オブジェクトの分割代入(destructuring)メモ `Cannot destructure property '**' of 'undefined' or 'null' , '***' as it is null.` を防止する

オブジェクトの分割代入(destructuring)メモ

• JavaScript の分割代入(destructuring)に関するセルフメモです

• デフォルト値を指定したオブジェクトの分割代入をつかって
  Cannot destructure property '**' of 'undefined' or 'null' , '***' as it is null. を防止したいための備忘録

const { prop1 } = { prop1: "value1",prop1_1:"value1_1" };
console.log(prop1);// => "value1"

const { prop2: prop2_new } = { prop2: { prop2_1: "value2_1" } };// 新しい変数名への代入
console.log(prop2_new);// => { prop2_1: "value2_1" }

const { prop3: { prop3_1 } } = { prop3: { prop3_1: "value3_1" } };// ネスト
console.log(prop3_1);// => "value3_1"

const { prop4 } = {};//
console.log(prop4);// undefined

const { prop5 = "value5_default" } = {};// デフォルト値(prop5 == "value5_default"。prop5の値が undefined のときはこのデフォルト値が割り当てられる
console.log(prop5);// => "value_some"

const { prop6: prop6_new } = {};// 新しい変数名への代入
console.log(prop6_new);// => undefined

const { prop7: { prop7_1 }} = { };// ネスト
console.log(prop7_1);// => エラー Cannot read property 'prop7_1' of undefined

const { prop8: { prop8_1 }={}} = {};// ネスト　＆　デフォルト値(prop8 == {}　。prop8の値が undefined のときはこのデフォルト値が割り当てられる)
console.log(prop8_1);// => undefined

const { prop9: { prop9_1="value9_1_default" }} = {};// ネスト　＆　子プロパティデフォルト値
console.log(prop9_1);// => エラー  Cannot read property 'prop9_1' of undefined (prop9が undefined のため)

const obj10=null;
const { prop10: { prop10_1="value10_1_default" }={}} = obj10 || {} ;// obj10 が null や undefined の可能性のある場合のエラー回避
console.log(prop10_1);// => "value10_1_default"

関数の引数にも分割代入＋デフォルト値でスッキリ

【Before】改善前：これを分割代入＋デフォルト値で改善したい

const fnWhatsYourNameOld = (options) => {
  const opts = options || {};
  const { firstName, lastName } = opts;
  let fullName = '';
  if (!firstName) {
    fullName += 'ナナシノ';
  } else {
    fullName += lastName;
  }
  if (!lastName) {
    fullName += 'ゴンベイ'
  } else {
    fullName += firstName;
  }
  return fullName;
};

console.log(fnWhatsYourNameOld());// =>"ナナシノゴンベイ"
console.log(fnWhatsYourNameOld({}));// ==>"ナナシノゴンベイ"
console.log(fnWhatsYourNameOld({ firstName: 'ノビタ', lastName: 'ノビ' }));// => "ノビノビタ"

【after】改善後：関数の引数に分割代入とデフォルト値を使ってスッキリ

const fnWhatsYourNameNew = ({ firstName = 'ゴンベイ', lastName = 'ナナシノ' } = {}) => {
  return `${lastName}${firstName}`;
};

console.log(fnWhatsYourNameNew());// =>"ナナシノゴンベイ"
console.log(fnWhatsYourNameNew({}));// =>"ナナシノゴンベイ"
console.log(fnWhatsYourNameNew({ firstName: 'ノビタ', lastName: 'ノビ' }));// => "ノビノビタ"

• { firstName = 'ゴンベイ', lastName = 'ナナシノ' }={}の右辺の{}は引数のデフォルト値。引数が undefined や　null の場合に効く

• { firstName = 'ゴンベイ', lastName = 'ナナシノ' }は引数が Object だった場合の、各プロパティ（変数）のデフォルト値

• これで、関数内での引数の null(undefined)チェックやデフォルト値まわりの処理をだいぶシンプルにできる。