駆け出しJavaScriptエンジニアが見落としがちな演算子

駆け出しJavaScriptエンジニアが見落としがちな演算子:

この記事の対象

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

Webエンジニアに転職して1ヶ月経ち、覚えたことをアウトプット

スプレッド演算子

配列の場合

「...arr1」は「arr1」で作成した配列のクローン配列を作ります9

「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' } 

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 

比較 ? trueの処理 || falseの処理のようにif文よりもスマートなコードになります。