この記事の対象
演算子と言っても関係演算子くらいは分かる人
Webエンジニアに転職して1ヶ月経ち、覚えたことをアウトプット
スプレッド演算子
スプレッド演算子とは配列要素を「...」といったカンマ3つで表し、クローン配列を作ります。
以下に例を記します。
配列の場合
「...arr1」は「arr1」で作成した配列のクローン配列を作ります。
「arr2」では「arr1」と「7, 8, 9」をマージします。
const arr1 = [1, 2, 3, 4, 5, 6];
const arr2 = [ ...arr1 , 7, 8, 9];
console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ]
console.log(arr2); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
オブジェクトの場合
基本的に配列と同様で、クローンオブジェクトを作ります。
const obj1 = { a: "apple", b: "orange", c: "banana" };
const obj2 = { ...obj1 , d: "strawberry" };
console.log(obj1); // { a: 'apple', b: 'orange', c: 'banana' }
console.log(obj2); // { a: 'apple', b: 'orange', c: 'banana', d: 'strawberry' }
条件演算子
比較式 ? trueの場合の処理 : falseの場合処理 のようにif文よりもスマートなコードで記述できます。
if文から条件演算子の変換
例として、複数の文字列を含む配列a, bを用意します。
それぞれの配列が一致するかどうか、if文で一致すればtrue、しなければfalseの文字列を出力します。
const a = ["a", "b", "c"];
const b = ["d", "e", "f"];
if(a === b){
console.log(true);
} else {
console.log(false);
}
// false
上記のif文を条件演算子に変換してみます。
const a = ["a", "b", "c"];
const b = ["d", "e", "f"];
console.log(a === b ? true : false);
// false
詳しい記事の紹介
※もっと詳しい記事があるので、掘り下げたい人は確認してみてください。