みなさんこんにちは、現役エンジニアのサメハックです
未経験から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でも同じ使われかたをするよ!
AngularなどのTypeScriptでも同じ使われかたをするよ!
まとめ
- スプレッド構文を使用すると、オブジェクトや配列を展開することができる
- オブジェクトの展開&値の更新が最重要用途
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈