1. はじめに
ドットインストールのJavaScript入門 データ構造応用編を学習したので内容を整理しました。
この記事ではObject.entriesやES6の構文を中心にまとめています。
今回整理する内容は次の通りです。
- Object.entries()
- 分割代入
- レスト構文
- スプレッド構文
- 配列やオブジェクトの参照の仕組み
JavaScriptではよく見かける書き方のようなので、出力結果を確認しながら理解していきたいと思います。
2. Object.entries()とforEachでの取り出し方
Object.entries()はオブジェクトのデータを配列に変換するメソッドのようです。
変換した配列をforEachで処理する方法を確認しました。
2.1 Object.entries()の基本
const scores = { math: 80, english: 90 };
const entries = Object.entries(scores);
console.log(entries);
出力
[
["math", 80],
["english", 90]
]
解説
元のオブジェクトは次の形になっています。
{ math: 80, english: 90 }
オブジェクトはキー: 値という形でデータを持っています。
Object.entries()を使うと、このデータが[キー, 値]という配列の形に変換されます。
その結果、次のような配列の中に配列が入った構造になります。
[
["math", 80],
["english", 90]
]
このように変換することで、配列のメソッド(forEachなど)を使って処理しやすくなるようです。
2.2 forEachで取り出す
const scores = { math: 80, english: 90 };
const entries = Object.entries(scores);
entries.forEach(prop => {
console.log(`${prop[0]}: ${prop[1]}`);
});
出力
math: 80
english: 90
解説
entriesの中身は次の配列です。
[
["math", 80],
["english", 90]
]
そのためforEach()で1つずつ取り出すと
["math", 80]
という配列がpropに入ります。
この配列の中では
prop[0] → キー
prop[1] → 値
という位置になっています。
そのため
console.log(`${prop[0]}: ${prop[1]}`);
と書くことで
math: 80
english: 90
という形で表示されます。
3. 配列の分割代入
配列の分割代入を使うと、配列の値をそれぞれの変数に取り出すことができる書き方のようです。
従来の書き方に比べて、コードがシンプルになると感じました。
3.1 基本的な使い方
const [a, b] = [10, 20];
console.log(a);
console.log(b);
出力
10
20
解説
配列
[10, 20]
を
[a, b]
という形で受け取ることで
a = 10
b = 20
のように、それぞれの値が変数に代入されます。
配列の順番に対応して値が入る仕組みになっていると理解しました。
3.2 分割代入で値を入れ替える
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a);
console.log(b);
出力
20
10
解説
通常は値を入れ替える場合、
temp = a;
a = b;
b = temp;
のように一時的な変数を使うことが多いと思います。
しかし分割代入を使うと
[a, b] = [b, a];
と書くだけで値を入れ替えることができます。
配列を一度作ってから、それぞれの変数に再代入しているような動きになると理解しました。
4. レスト構文
レスト構文は残りの要素をまとめて取得する書き方のようです。
配列とオブジェクトの両方で使うことができます。
4.1 配列でのレスト構文
const nums = [10, 20, 30, 40];
const [first, ...rest] = nums;
console.log(first);
console.log(rest);
出力
10
[20, 30, 40]
解説
配列
[10, 20, 30, 40]
を分割代入するときに
...rest
を使うと、残りの要素がまとめて取得されます。
結果は次のようになります。
first = 10
rest = [20, 30, 40]
このように残りの要素を配列として受け取れるのが特徴のようです。
4.2 オブジェクトでのレスト構文
const user = {
name: "taro",
age: 20,
country: "Japan"
};
const { name, ...rest } = user;
console.log(name);
console.log(rest);
出力
taro
{ age: 20, country: "Japan" }
解説
まず
name
というプロパティを取り出します。
その後、残っているプロパティ
age
country
が
rest
にまとめられます。
結果として
rest = { age: 20, country: "Japan" }
というオブジェクトになります。
5. スプレッド構文
スプレッド構文は配列やオブジェクトの中身を展開する書き方のようです。
データをコピーしたり、結合したりするときによく使われるようです。
5.1 配列でのスプレッド構文
const nums = [10, 20, 30];
const copy = [...nums];
console.log(copy);
出力
[10, 20, 30]
解説
...nums
と書くことで、配列の中身が展開されます。
そのため
[...nums]
と書くと
新しい配列
が作られます。
見た目は同じ配列ですが、別の配列として作られているようです。
5.2 オブジェクトでのスプレッド構文
const moreScores = {
shiro: 77,
goro: 88
};
const scores = {
taro: 80,
jiro: 70,
saburo: 90,
...moreScores
};
console.log(scores);
出力
{
taro: 80,
jiro: 70,
saburo: 90,
shiro: 77,
goro: 88
}
解説
...moreScores
と書くことで
moreScoresのプロパティ
が展開されます。
その結果、scoresオブジェクトの中に新しいプロパティとして追加されます。
オブジェクトを結合するような書き方として使えるようです。
5.3 レスト構文との違い
どちらも...を使いますが、意味は少し異なります。
| 構文 | 意味 |
|---|---|
| レスト構文 | 残りの要素をまとめる |
| スプレッド構文 | 配列やオブジェクトを展開する |
同じ記号でも使われる場所によって意味が変わると理解しました。
6. オブジェクトの分割代入
分割代入はオブジェクトでも使うことができます。
プロパティ名を指定して値を取り出す形になるようです。
const user = {
name: "taro",
age: 20
};
const { name, age } = user;
console.log(name);
console.log(age);
出力
taro
20
解説
オブジェクト
{ name: "taro", age: 20 }
の中から
name
age
というプロパティを取り出しています。
オブジェクトの場合はプロパティ名を指定して取り出す形になるようです。
7. 参照とコピーの仕組み
JavaScriptではデータの種類によってコピーの仕組みが異なるようです。
この違いを理解していないと予期しない動作になることがあると感じました。
7.1 数値や文字列のコピー
let a = 10;
let b = a;
a = 20;
console.log(a);
console.log(b);
出力
20
10
解説
b = a;
を実行した時点で
b = 10
という値がコピーされます。
そのため、その後aを変更してもbの値は変わりません。
数値や文字列は値そのものがコピーされるようです。
7.2 配列やオブジェクトの参照
const nums = [10, 20, 30];
const nums2 = nums;
nums[0] = 99;
console.log(nums);
console.log(nums2);
出力
[99, 20, 30]
[99, 20, 30]
解説
配列やオブジェクトの場合は
nums2 = nums;
とすると同じデータを参照する状態になります。
そのため
nums[0] = 99;
と変更すると、nums2も同じ配列を見ているため値が変わります。
このような仕組みを参照と呼ぶようです。
7.3 スプレッド構文で配列をコピー
const nums = [10, 20, 30];
const copy = [...nums];
nums[0] = 99;
console.log(nums);
console.log(copy);
出力
[99, 20, 30]
[10, 20, 30]
解説
スプレッド構文を使うと
[...nums]
のように書くことで新しい配列を作ることができます。
そのため
nums
を変更しても
copy
には影響しません。
配列をコピーしたいときによく使われる書き方のようです。
まとめ
今回整理した内容は次の通りです。
- Object.entries()でオブジェクトを配列に変換する方法
- 配列とオブジェクトの分割代入
- レスト構文で残りの要素をまとめる書き方
- スプレッド構文で展開やコピーをする方法
- 配列とオブジェクトの参照の仕組み
まだ慣れていない部分もあるので、実際にコードを書きながら少しずつ理解を深めていきたいと思います。