IT~情報と技術

ドットインストール「詳解JavaScriptオブジェクト編」で勉強#14(スプレッド演算子)

ドットインストールというオンラインのプログラミング講座に「詳解JavaScript」というのがあります。

これでJavaScriptの基礎を勉強していきましょう。「基礎文法編」の次は「オブジェクト編」です。

今日のメイントピックは、スプレッド演算子を使ってみる、です。

詳解JavaScript

ドットインストールのレッスン一覧に「②もっと詳しくJavaScriptを学ぼう」というセクションがあります。

ここに3つ並んでいる

  • 詳解JavaScript 基礎文法編(全24回)
  • 詳解JavaScript オブジェクト編(全23回)
  • 詳解JavaScript DOM編(全15回)

で勉強していきたいと思います。

これまでの勉強した内容はこちらです。

オブジェクト編 #14

詳解JavaScript 基礎文法編 #14 スプレッド演算子を使ってみよう

今回は、スプレッド演算子を使います。

スプレッド演算子(スプレッド構文)

MDNでスプレッド演算子を調べてみると、スプレッド構文として出てきます。

英語版でチェックすると、”Spread Syntax”だったので構文の方がいいかな。演算子は”operator”ですね。

スプレッド構文を使うと、関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します。(MDNのスプレッド構文から)

要するに、こんな感じでしょうか。

  • 配列の要素を引数として、関数を呼び出すことができる。
  • 既に存在する配列を含む、新しい配列を作ることができる。
  • 既に存在するオブジェクトのプロパティを含む、新しいオブジェクトを作ることができる。

イメージしやすいように図にしてみました。

スプレッド演算子(スプレッド構文)のイメージ1スプレッド構文のイメージ1
スプレッド演算子(スプレッド構文)のイメージ2スプレッド構文のイメージ2

参照渡しではない

以前、配列やオブジェクトのコピーは参照渡しだ、というのをやりました。

ドットインストール「詳解JavaScriptオブジェクト編」で勉強#08(オブジェクト型の参照渡し)

今回のスプレッド構文は、そうではなくて値がそのままコピーされます。

スプレッド構文の場合

y[0]の変更に対して、x[0]が影響をうけません。

配列を代入する場合(参照渡し)

y[0]の変更に対して、x[0]が影響をうけます。

今日のまとめ

スプレッド構文(スプレッド演算子)というのをやりました。最初は「何だ?!」と思いますが、分かればそんなに難しい内容ではないですね。

超スローペースなプログラミング学習ですが、マイペースでぼちぼち続けています。

JavaScriptはちょっと難しいですが、がんばって一通りやってみましょう!