最近学んだJavaScriptのTipsをアウトプット

こんにちは、Yu_riです。
今回はJavaScriptでの小さな学びをアウトプットしたいと思います。

オブジェクトの分割代入

自分がいつも使用していたオブジェクトの分割代入は以下のような形でした。

const {sample1, sample2} = {
  sample1: "Hello",
  sample2: "Bye"
}

console.log(sample1); // Hello
console.log(sample2); // Bye

よく見るオブジェクトのプロパティ名で受け取るものですね。
シンプルなオブジェクト構造ならこれで充分なのですが、オブジェクトの中にオブジェクトがあり、そのネストされたオブジェクトのプロパティを分割代入したい場合はどうするのでしょうか？

今回アウトプットする内容はその方法です。
具体的には以下のような記述をします。

const {
  sample1,
  sample2: {sample3}
} = {
  sample1: "Hello",
  sample2: {
    sample3: "Bye"
  }
}

console.log(sample1); // Hello
console.log(sample3); // Bye

ちなみにsample2には値が代入されないため「console.log(sample2)」をしても「sample2 is not defined」とエラーになります。

オプショナルチェーン（?.）

オプショナルチェーンは、アクセスするオブジェクトがundefinedやnullだった場合にエラーを発生させずにundefinedを返してくれる演算子です。
具体的に以下のように記述します。

const sample1 = {
  name: 'Taro'
};

console.log(sample1.hobby?.sports); // undefined

上記の例では「sample1.hobby」がundefinedとなり、「.sports」でundefinedに対してsportsプロパティにアクセスしています。
通常ではエラーとなりますが、オプショナルチェーン（?.）を使用することで「undefined」が返り処理が終了しています。

ではこのオプショナルチェーンはどこで使用するのか？
以下はユースケースの一例です。

• オブジェクトのプロパティの取得（先程の例）
• 配列の要素へのアクセス

const items = [{ name: "Item1" }, { name: "Item2" }];
console.log(items[1]?.name); // "Item2"
console.log(items[3]?.name); // undefined

• 関数やメソッドの呼び出し

const obj = {
  greet: () => "Hello",
};

console.log(obj.greet?.());  // "Hello"
console.log(obj.sayGoodbye?.()); // undefined

• DOM要素のプロパティにアクセス

const button = document.querySelector(".sample-btn");
console.log(button?.innerText); // undefined

もちろんオプショナルチェーンを多用するのはデバッグがしづらいなどの懸念点はありますが、全体の処理を止めないことやif文による判定が不要になるのはメリットと言えます。
自分も使い所を考えながら使用したいと思います。