【JavaScript】分割代入を使おう！

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

JavaScriptの解説シリーズです。

今回は分割代入について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

配列の分割代入が出来る
オブジェクトの分割代入が出来る

分割代入をマスターしよう！

分割代入とは
配列の分割代入
オブジェクトの分割代入
まとめ

分割代入とは

分割代入は、配列やオブジェクトから値を取り出して
変数に代入するための便利な構文です。

使いこなせると便利だよ！

配列の分割代入

全ての要素を代入する例

const numbers = [1, 2, 3, 4, 5];

// 配列の要素を順番に取り出して変数に代入する
const [a, b, c, d, e] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
console.log(e); // 5

上記の例では、numbersという配列から要素を一つずつ取り出し、
それぞれの値をa、b、c、d、eという変数に代入しています。

順番に値が代入されるよ！

変数の数が配列の要素より少ない際の処理

const numbers = [1, 2, 3, 4, 5];

const [a, b, c] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

上記の例では、numbersの最初の3つの要素だけが取り出され
それぞれa、b、cに代入されます。

不足分はスキップされるよ！

不要な要素をスキップする

const numbers = [1, 2, 3, 4, 5];

const [a , , c] = numbers;

console.log(a); // 1
console.log(c); // 3

配列の分割代入では、特定の要素をスキップすることもできます。
スキップしたい要素には、空欄にします。

2はどこにも代入されないよ！

オブジェクトの分割代入

変数と同名のkeyを設定する

構文

const 変数X = 値xyz;

const オブジェクト = { 変数X }

const オブジェクト = { 変数X: 値xyz }
のショートハンドだよ！

例

const name = "サメハック";

const user = { 
    name,
    gender: "male"
}

console.log(user); 
// { name: 'サメハック', gender: 'male' }

Angular等でよく使用する記法だよ！

オブジェクトの特定のプロパティを取り出す

構文

const オブジェクトXに存在するkey名 = オブジェクトX;

例文

const user = {
  name: 'サメハック',
  age: 30,
  city: 'Fukuoka'
};

// オブジェクトのプロパティを取り出して変数に代入する
const { name } = user;

console.log(name); // 'サメハック'

筆者の環境ではもっとも使用頻度が高いよ！

オブジェクトの特定のプロパティを取り出し、別名の変数名につける

構文

const { key名: 変数別名} = オブジェクト;

例文

const user = {
  name: 'サメハック',
  age: 30,
  city: 'Fukuoka'
};

// プロパティ名とは異なる変数名で取り出す
const { name: userName } = user;

console.log(userName); // 'サメハック'

これもよく使うよ！

プロパティが存在しない場合にデフォルト値を設定する

構文

const { key名 = デフォルト値 } = オブジェクト;

例文

const user = {
  name: 'サメハック',
  age: 30,
  city: 'Fukuoka'
};

// プロパティが存在しない場合にデフォルト値を設定する
const { hobby = "映画鑑賞" } = user;

console.log(hobby); // '映画鑑賞'

nullの可能性があるケースでバグ回避になるよ！

まとめ

分割代入を使用するケース

配列から値を取り出す必要がある場合
オブジェクトからプロパティを取り出す必要がある場合
オブジェクトの一部のプロパティだけを取り出して利用したい場合
プロパティが存在しない場合にデフォルト値を使用したい場合

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram