ReactのためのJavaScript – 便利な書き方(分割代入/スプレッド記法)
はじめに
Reactを学ぶためのモダンなJavaScriptについてまとめます。
今回はECMAScript2015(ES6)から導入された、分割代入やスプレッド記法などの配列/オブジェクトに関する便利な書き方についてまとめます。
まずは分割代入から。
分割代入
分割代入とは、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする式です。
//配列の値をそれぞれ変数に代入
const [x, y] = ['hello', 'goodbye'];
console.log(x); //=> hello
console.log(y); //=> goodbye
//オブジェクトのプロパティをそれぞれ変数に代入
const obj = { name: 'Tom', age: 25 };
const { name, age } = obj;
console.log(name); //=> Tom
console.log(age); //=> 25
ちなみに、↓のようにしてしまうと値が入らなかったりエラーになります。
const { x, y } = ['hello', 'goodbye'];
console.log(x, y); //=> undefined undefined
const obj = { name: 'Tom', age: 25 };
const [ name, age ] = obj;
//=> TypeError: obj is not iterable
スプレッド記法
続いてスプレッド記法。↓のように、配列名やオブジェクト名の前に[...]をつけて配列/オブジェクトに渡すと展開されます。[...]はスプレッド演算子と呼びます。
const arry1 = [1, 2, 3];
const arry2 = [...arry1, 4, 5];
console.log(arry2); //=> [ 1, 2, 3, 4, 5 ]
const obj1 = { a: 1, b: 2, c: 3};
const obj2 = { ...obj1, d: 4, e: 5};
console.log(obj2); //=> { a: 1, b: 2, c: 3, d: 4, e: 5 }
今回は以上になります。
こちらで他のテーマも扱ってるのでよかったらぜひ！
