JavaScriptの分割代入について簡単なサンプルコードで解説
2 回閲覧されました
みなさんこんにちは、jonioです。
今回はJavaScriptの分割代入について簡単なサンプルコードで解説します。
分割代入とは
要素を取り出したい配列やオブジェクトに対して新たな変数を使った配列やオブジェクトに代入して要素を取り出す書き方です。
具体的にコードで説明した方が分かりやすいのでそうします。
配列とオブジェクトの場合で使用しますがまずは配列の場合です。
配列の場合
下記のコードで考えます、まずは分割代入を使わない場合です。
const colors = ['red', 'blue', 'green'];
const first = colors[0];
const second = colors[1];
console.log(first); // red
console.log(second); // blue分割代入は自分で変数を設定して配列を用意してその中に配列を代入します。
const colors = ['red', 'blue', 'green'];
const [first, second, third] = colors;3行目の左辺が用意した配列です、右辺は代入する配列です。
呼び出す時は下記の記述をします。
console.log(first); // red
console.log(second); // blue
console.log(third); // green「const [first, second, third]」のfirst・second・thirdは代入した配列([‘red’, ‘blue’, ‘green’])のインデックス番号の順に対応します。
だからfirstは0番目・secondは1番目・thirdは3番目のインデックス番号に対応しています。
分割代入は「要素を取り出したい配列やオブジェクトに対して新たな変数を使った配列やオブジェクトに代入して要素を取り出す書き方」と説明しましたが「要素を取り出したい配列やオブジェクト」が「[‘red’, ‘blue’, ‘green’];」で「新たな変数を使った配列やオブジェクト」が「const [first, second, third]」です。
次はオブジェクトの場合です。
オブジェクトの場合
下記のコードで考えます、まずは分割代入を使わない場合です。
const user = {
id: 1,
name: '田中',
age: 25
};
const name = user.name;
const age = user.age;
console.log(name); // 田中
console.log(age); // 25分割代入を使うと下記になります。
const user = {
id: 1,
name: '田中',
age: 25
};
const { name, age } = user;
console.log(name); // 田中
console.log(age); // 25配列の時は新しく置いた配列と代入する配列はインデックス番号で対応させていました。(「const [first, second, third]」のfirst・second・thirdは代入した配列([‘red’, ‘blue’, ‘green’])のインデックス番号の順に対応)
オブジェクトの場合は新しく置いたオブジェクトと代入するオブジェクトはkeyで対応させます。
だから新しく置いたオブジェクトの要素(const { name, age }の「name」・「age」)は代入するオブジェクトの要素(const user = {id: 1, name: ‘田中’, age: 25};の「id」・「name」・「age」)以外を使うことができません。