【JavaScript&TypeScript】スプレッド構文を使おう!【…Object】

JavaScript

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。

JavaScriptの解説シリーズです。

今回はスプレッド構文について学んでいきましょう!

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!

この記事を読むと・・・
  • スプレッド構文が扱えるようになる
モダンな言語だとかなり多用される構文だよ!

スプレッド構文を使ってみよう

そもそもスプレッド構文とは?

...Object

のように、ドットを3つ連ねて記述する構文です。

これは、配列やオブジェクトを自動的に展開してくれるショートハンドです。

わかりづらいと思うので実際に動かしてみよう!

配列にスプレッド構文を使おう

const array1 = [0, 1, 2];

console.log(...array1);

【出力結果】

0 1 2

このように、ログに出すだけでも中身が展開されたのがわかります。

配列をスプレッド構文で結合しよう

const array1 = [0, 1, 2];
const array2 = ["XXX", "YYY", "ZZZ"];
const array3 = [...array1, "あいうえお", ...array2];

console.log(array3);

【出力結果】

[0, 1, 2, 'あいうえお', 'XXX', 'YYY', 'ZZZ']

このように

[...配列1, ...配列2]

と記述すると、ややこしい処理をせずとも配列の結合ができます。

配列の複製

const array1 = [0, 1, 2];
const array2 = [...array1];

array1[1] = 100;

console.log(array2);

【出力結果】

[0, 1, 2]

ちなみに普通に

array2 = array1;

と記述してしまうと、出力結果が以下になります。

[0, 100, 2]

オブジェクトの複製

const user1 = { name: "サメハック", age: 29, job: "エンジニア" };
// user1の内容をコピー
const user2 = { ...user1 };

user1.name = "いぬハック";

console.log(user2);

【出力結果】

{name: 'サメハック', age: 29, job: 'エンジニア'}
オブジェクトも配列と同じような複製方法だよ!

オブジェクトと配列の、参照渡しと値渡しの違いが
わからない方はこちらを参考にしてください。

【納得!】配列のコピー・複製がうまくいかない原因と理由【JavaScript】

【重要!】オブジェクトの展開&値の更新

const user1 = { name: "サメハック", age: 29, job: "エンジニア" };
// user1の内容をコピーし、nameプロパティを更新する
const user2 = { 
    ...user1, 
    name: "ねこハック" 
};

console.log(user2);

【出力結果】

{name: 'ねこハック', age: 29, job: 'エンジニア'}

これはAngularなどで多用するので非常に重要です。
パッと見だと、何をしているのかわからないと思いますが

const オブジェクト2 = {
    ...オブジェクト1,
     オブジェクト1の更新したいプロパティ:新しい値
}

というように第一引数にスプレッド構文を渡し、

第二引数にプロパティのkey:valueを渡すことで

オブジェクトの複製と、値の更新が一度でできる画期的な手法です。

ほぼほぼこの使用用途だよ!
AngularなどのTypeScriptでも同じ使われかたをするよ!

まとめ

  • スプレッド構文を使用すると、オブジェクトや配列を展開することができる
  • オブジェクトの展開&値の更新が最重要用途

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました