分割代入とは
JavaScriptにおける分割代入とは、文字通り分割して変数に代入することができる構文のことです。
分割代入は、主に配列やオブジェクトに対して使われることがほとんどで、配列からは要素を、オブジェクトからはプロパティを取り出して個別の変数に代入します。
配列やオブジェクトの一部の値を変数に代入して利用したいときや、逆に、オブジェクトのいくつかのプロパティに対して一括で値を代入したりするのに便利な構文です。
配列の分割代入
まずは、配列の分割代入について見ていきましょう。
配列の分割代入の基本構文
const color = ['red', 'blue', 'green'];
const [a, b, c] = color;
console.log(a); // red
console.log(b); // blue
console.log(c); // green代入したい値を配列colorとして宣言しておいて、変数a,b,cに対して分割して代入しています。
代入する側の変数を、先に宣言しておくこともできます。
let a, b, c;
const color = ['red', 'blue', 'green'];
[a, b, c] = color;
console.log(a); // 'red'
console.log(b); // 'blue'
console.log(c); // 'green'代入する側の変数の数が、代入したい値の配列の長さよりも小さくても問題ありません。
const color = ['red', 'blue', 'green'];
const [a, , b] = color;
console.log(a); // 'red'
console.log(b); // 'blue'分割代入する値がない時
分割代入する時に、代入する値がない場合にはundefinedとなります。
const color = ['red', , 'green'];
const [a, b, c] = const;
console.log(a); // 'red'
console.log(b); // undefined
console.log(c); // 'green'普段通りの変数定義した後、値を定義しなかったときと同じ扱いです。
let a;
console.log(a); // undefined配列の分割代入の初期値の設定
配列で分割代入する時に、代入する値がなくundefinedになってしまうことを防ぐために、初期値を設定することができます。
const color = ['red', , 'green'];
const [a = 'white', b = 'white', c = 'white'] = color;
console.log(a); // 'red'
console.log(b); // 'white' （初期値）
console.log(c); // 'green'変数a, b, cに対してそれぞれ初期値’white’を設定していますが、変数bのみ代入する値がないため、設定した初期値’white’が代入されています。
分割代入での変数の入れ替え
変数の入れ替えについては、通常一時的に値を保管しておく変数を使用する必要がありますが、分割代入を利用することで簡単に変数を入れ替えを行うことができます。
まずは、通常の一時変数を使用する方法を見ていきましょう。
let a = 1;
let b = 2;
let c;
c = a;
a = b;
b = c;
console.log(a); // 2
console.log(b); // 1追加で変数c（一時変数）を定義する必要があり、手順も多いです。
次に、分割代入を利用する変数入れ替えを見ていきます。
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1分割代入を利用することで、先ほどは必要だった一時変数の定義の必要がなく、手順も簡潔で簡単に変数の入れ替えを行うことができます。
オブジェクトの分割代入
次に、オブジェクトの分割代入について見ていきます。
オブジェクトの分割代入の基本構文
const user = {
firstName : 'taro',
lastName : 'yamada',
age : 18
}
const {firstName, lastName, age} = user;
console.log(firstName); // 'taro'
console.log(lastName); // 'yamada'
console.log(age); // 18配列の分割代入とは異なり、代入される側の変数名に対して同じ名前のプロパティの値が代入されます。
そのため、オブジェクトの要素の順番を入れ替えても代入される値は変わらず、プロパティにはない名前の変数はundefinedとなります。
const user = {
firstName : 'taro',
lastName : 'yamada',
age : 18
}
const {age, firstName, lastName, height} = user;
console.log(firstName); // 'taro'
console.log(lastName); // 'yamada'
console.log(age); // 18
console.log(height); // undefinedプロパティ名ではない変数に分割代入をする
基本では、プロパティ名と同じ名前の変数に対して、プロパティの値が代入されると説明しましたが、別の名前の変数に代入することもできます。
const user = {
firstName : 'taro',
lastName : 'yamada',
age : 18
}
const {firstName: first, lastName: last, age} = user;
console.log(first); // 'taro'
console.log(last); // 'yamada'
console.log(age); // 18このように、別の名前の変数に分割代入を行った場合、プロパティ名と同じ名前の方の変数は定義されていない扱いになるため、注意が必要です。
console.log（firstName）; // ReferenceError: firstName is not definedオブジェクトの分割代入の初期値の設定
オブジェクトの分割代入についても、配列の分割代入と同じように初期値を設定することができます。
const user = {
firstName : 'taro',
lastName : 'yamada',
age : 18
}
const {firstName, lastName, age = 20, height = 180} = user;
console.log(first); // 'taro'
console.log(last); // 'yamada'
console.log(age); // 18
console.log(height); // 180先ほどの、プロパティ名とは別の名前の変数に分割代入する時も同様です。
const user = {
firstName : 'taro',
age : 18
}
const {firstName: first = 'ichiro', lastName: last = 'sato', age} = user;
console.log(first); // 'taro'
console.log(last); // 'sato'
console.log(age); // 18関数の引数でオブジェクトの分割代入を利用する
JavaScriptでは、関数の引数でオブジェクトの分割代入を利用することがしばしばあります。
オブジェクトの分割代入について正しく理解していないと、そのようなコードが読めないこともあるため、ここで覚えておきましょう。
const user = {
firstName : 'taro',
lastName : 'yamada',
age : 18
}
const getFirstName = ({firstName}) => {
return firstName;
}
console.log(getFirstName(user)); // 'taro'まとめ
JavaScriptの分割代入は、配列なオブジェクトに対して使われます。
分割代入を使うことで、複数の変数への代入を同時に行うことができるため、簡潔なコードを書くことができます。
特に、オブジェクトの分割代入については、覚えておかないと既存のコードを読めないということも考えられますので、覚えておくようにしましょう。
コメント