◆ ...式 を使う
  ◆ 条件を満たせば追加したい要素を含んだ配列やオブジェクト
  ◆ 条件を満たさないときは 空の配列やオブジェクト

const value = ["abc", "def" if flag]

こういうことがしたいです

2つめの "def" は flag が true のときだけ追加したくて flag が false なら追加したくないです

const value = ["abc", flag ? "def" : null]

と書いても null が入ります
null の代わりに Symbol でも入れておいて filter するか 条件付きの構造でデータを渡して目的のデータを返す関数を作るかになりますが面倒です

そこまでするなら普通に

const value = ["abc"]
if(flag) value.push("def")

でいいことも多いです
ただ やっぱり最初のリテラルでの定義だけで済ませたいですし 別の if 文が出てくる気持ち悪さはあります


一応 ES2015 からの機能で一応

const value = ["abc", ...flag?["def"]:[]]

とすることで一応ひとつの式に出来ます

... の機能は 配列やオブジェクトリテラルの定義の中で ... の後に持ってきた式の中身をそこに展開します
簡単な例

const values = [10, 20]
const result = [5, ...values]
console.log(result)
// [5, 10, 20]

... の後は式なので条件演算子を使って flag が true なら埋め込みたい値 false なら空の配列になるようにすれば true のときだけ要素を追加できます



オブジェクトの場合も同じで

const value = {a: 1, b: 2 if flag}

こういうことをしたいなら

const value = {a: 1, ...flag?{b: 2}:{}}

こう書けばできます

やっぱり見た目だけは気になるところで もっといい書き方ないものかと思わざるをえないです
const value = {
a: 1,
...b?{b}:{},
...c?{c}:{},
}