subtitle

RaiseTechの各種コースをはじめとしたイロイロな学習の記録

JavaScriptの基本文法③

JavaScriptの基本文法では、前回・前々回と下記についてまとめた。


今回は、JavaScriptの基本文法の第3回目として、分割代入やスプレッド構文などについて学んだことをアウトプットしていく。(C言語との比較も交えつつ・・・)



分割代入

通常の配列の値の取り出し方は、C言語も同じ書き方をする。(あまりこういうまどろっこしい書き方は実際にはしないけど、必要に応じて普通に使う。)


配列の要素をそのまま代入する方法

necoListsという配列の要素は3つ値を指定してみた。

4つ目の要素はないが、neco3という変数に代入して読みだしてみると、中身は「undefined」になる。

この辺は、JavaScript側でよしなにしてくれるところが、素晴らしい。(C言語だと、あらかじめ要素数を決めて宣言するので、ない要素を指定すると、エラーになる。)


ちなみに、オブジェクトの中身(オブジェクトの場合はプロパティ、配列の場合は要素)を変数に代入する場合は、プロパティや要素がプリミティブ型なら値が渡されるし、プロパティや要素がオブジェクト型(配列など)の場合は、参照値が渡される。

この辺りは、JavaScriptの基本文法①の追記にて解説している。

necoListsの4つ目の要素に値を入れても、neco3の値は変わらない。


配列の分割代入

配列の分割代入は、配列を宣言するときに要素を[]で囲って、コピー元のリストをまるっと代入するイメージ。

C言語にはこういうあいまいな書き方はない。

この場合も、コピー元リストにない要素を代入すると、「undefined」になる。

コピー元リストの4つ目の要素を追加した場合も、コピー先の neco3 には影響しない。


JavaScriptの基本文法①でも取り上げたが、配列に配列をまるっと代入すると、参照値が入るので、コピー元リストを書き換えると、コピー先リストも書き換わる。


オブジェクトのプロパティをそのまま代入する方法

配列の次はオブジェクト。

普通に取り出す場合。


オブジェクトの分割代入

コピー先オブジェクトを宣言するときに、{}で囲う。


ここで疑問がわいてくるのが、異なるオブジェクトでプロパティ名が同じ場合はどうなるのか?ということ。


片方のオブジェクトだけ使う分には、問題ない。



necoInfoとinuInfoに同じプロパティ名がある場合は、コピー先変数の宣言方法も同じになるので、エラーになる。


necoInfoもinuInfoも、両方値を取り出したければ、直接各オブジェクトのプロパティを指定して代入すればよい。

が、これだとせっかく学んだ分割代入が使えていないことになってしまうので、同じプロパティ名を持つ別のオブジェクトをそれぞれ代入する場合は、コピー先の変数を宣言するときに、変数名を指定してやることで解決。


オブジェクトの分割代入時に初期値を設定する

配列の時に、初期値を入れていない要素を取り出すと「undefined」になったが、オブジェクトの場合も同様に、存在しないプロパティを読みだすと、「undefined」が返ってくる。

オブジェクトの分割代入の変数宣言の時に、デフォルト値を設定してやると、そのプロパティが実際にオブジェクトに存在していなくても、指定したデフォルト値を設定することができる。

最初は、オブジェクトのプロパティにないものを、なぜ設定するのか?と疑問に思った。

だって、オブジェクトにないプロパティ=そのオブジェクトには必要ないプロパティだと思ったからだ。

必要なプロパティなら、最初からオブジェクトに入れておくべきではないか?

本来意図していないプロパティに値を付けて取り出す意味が分からない。

と、思っていたのだが。

そのオブジェクトを利用する側が、オブジェクトにはないプロパティを必要とした場合、オブジェクトの分割代入する時に、ついでに自分が必要としている変数を初期値付きで宣言してしまおう、と考えたならば、納得できるかも。

後付けで宣言したweightは、元のオブジェクトとは、物理的に全く関係がない(もちろん使う側からすれば、意味的に関係がある)と考えれば、ちょっとだけJavaScriptの気持ちにより添えるような気がする。


結局のところ、こういうこと↓なんじゃないかと思うんだけど、一行でまとめて書けるなら、書いちゃえばいいんじゃね?という気持ちなんじゃないかと。



イロイロ盛り込んでみた。(ちなみに、関数の引数にもデフォルト値を与えることができる。)



スプレッド構文

配列を普通に展開する場合

こんな感じ。


スプレッド構文を使って配列を展開する場合

...[配列名]の記法で、配列を展開することができる。


配列のコピー

スプレッド構文で配列をコピーした場合は、コピー先の配列に参照値ではなく、各要素の値が渡されるので、元の配列を変更しても、コピー先の配列に影響はない。


元の配列に要素を追加して、新しい配列を作成

スプレッド構文の前にも後ろにも要素を追加可能。


配列の結合

スプレッド構文を使うと、簡単に配列の結合ができる。


スプレッド構文を使ってオブジェクトを展開する場合

展開方法は、配列と同様に ...[オブジェクト名]


オブジェクトのコピー


元のオブジェクトにプロパティを追加して、新しいオブジェクトを作成


オブジェクトの結合

ただし、同じプロパティ名を持つオブジェクトをスプレッド構文で結合すると、後勝ちでプロパティが上書きされる。



オブジェクトの省略記法

変数名とオブジェクトのプロパティ名が完全一致している場合は、プロパティ名に対応する変数名を省略可能。