🐬

TypeScriptやJavaScriptの分割代入

2022/03/05に公開

これ書いた理由

const [a, b, c] = await Promise.all([
  methodA(),
  methodB(),
  methodC(),
]);
 const { name, type } = params;

と言う記述が気になった。

配列の代入の場合

const [num1, num2, num3] = [100, 200, 300];
console.log(num1);  // 100
console.log(num2);  // 200
console.log(num3);  // 300

const fruits = ['apple', 'banana', 'grape',];
const [val1, val2, val3] = fruits;
console.log(val1);  // "apple"
console.log(val2);  // "banana"
console.log(val3);  // "grape"

// 配列を返すメソッドと組み合わせると便利
let [a, b, c] = "red blue yellow".split(' ');
console.log(a);  // "red"
console.log(b);  // "blue"
console.log(c);  // "yellow"

オブジェクトの代入の場合

let user = {
  id: 1,
  userName: 'Tom',
  plan: {
    planName: 'Basic',
    cardBrand: 'visa',
  },
};

const { id, userName } = user;
console.log(id, userName);  // 1, "Tom"

const { plan: { cardBrand } } = user;
console.log(cardBrand);  // "visa"

参照

https://qiita.com/ringtail003/items/b4de9278cd507feb2478

Discussion