JavaScript
es6
es2015

駆け出しJavaScriptエンジニアが見落としがちなスプレッド演算子と条件演算子


この記事の対象

演算子と言っても関係演算子くらいは分かる人

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


詳しい記事の紹介

もっと詳しい記事があるので、掘り下げたい人は確認してみてください。