JavaScript で [key, value] のループと分割代入を使ったループ

# 1. 調べようと思ったきっかけ

参考「[非推奨の機能、廃止された機能 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features)」

何となく上のページを読んでいたら、

> - 分割代入型 [`for...in`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in) は非推奨です。代わりに [`for...of`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of) を使用してください。

とあったのですが、`for...in` のページを見ても「分割代入型 `for...in`」が何なのか書いてなかったので、気になって調べてみました。

(実は最近まで `for...in` が非推奨だと勘違いしていました… (汗

# 2. 分割代入型 `for...in` (非推奨)

普通の `for...in` は非推奨ではないですが、「分割代入型 `for...in`」は非推奨です。

```js:分割代入型&nbsp;for...in&nbsp;(非推奨)
// Array
const array = [['a', 1], ['b', 2], ['c', 3]];

console.log('array');
for (const [key, value] in array) { // ★
	console.log({key, value});
}

// Map
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

console.log('map');
for (const [key, value] in map) { // ★
	console.log({key, value});
}

// Object
const object = {'a': 1, 'b': 2, 'c': 3};

console.log('object');
for (const [key, value] in object) { // ★
	console.log({key, value});
}
```

(もちろん `[key, value]` 以外にもコードがあり得ます)

※実行環境によりますが、このコードは正しく動作しないと思った方が良いです。

# 3. 分割代入型 `for...of`

こちらは使って大丈夫です。

(`for...of` と `Iterator` を使った方法が非推奨、という情報がありますが、ここで言っているのは `Iterator` を使わない方法です)

## 3.1. Array

配列の要素を分割代入して使いたいときはそのまま回せます。

```js:分割代入型&nbsp;for...of
// Array
const array = [['a', 1], ['b', 2], ['c', 3]];

console.log('array');
for (const [key, value] of array) { // ★
	console.log({key, value});
}
```

## 3.2. Array - `Array.prototype.entries()`

配列のインデックスを key にして回したいときは `Array.prototype.entries()` を使います。

```js:分割代入型&nbsp;for...of
// Array 2
const array2 = ['a', 'b', 'c'];

console.log('array2');
for (const [key, value] of array2.entries()) { // ★
	console.log({key, value});
}
```

## 3.3. Map

Map はそのまま回すことができます。

```js:分割代入型&nbsp;for...of
// Map
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

console.log('map');
for (const [key, value] of map) { // ★
	console.log({key, value});
}
```

参考「[Map で反復する - for...of - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of#Iterating_over_a_jsxref(Map))」

## 3.4. Object - `Object.entries()`

Object で Map と同じようなことがしたいときは `Object.entries()` を使います。

```js:分割代入型&nbsp;for...of
// Object
const object = {'a': 1, 'b': 2, 'c': 3};

console.log('object');
for (const [key, value] of Object.entries(obj)) { // ★
	console.log({key, value});
}
```

※ `Object.entries()` は、ES8 の機能です。
日本語版の MDN だと「`これは実験段階の機能です。`」と出てきますが、英語版だと取り除かれています。

参考「[Object.entries() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)」(日本語版)
参考「[Object.entries() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)」(英語版)

※ `Object.entries()` は `Array.prototype.entries()` とは違い、static メソッドです。

# 4. `forEach()`

## 4.1. Array - 分割代入

分割代入は関数の引数でも使えます。
ただし、アロー関数の場合、引数の括弧 `()` を省略できません。

```js:forEach
// Array
const array = [['a', 1], ['b', 2], ['c', 3]];

console.log('array');
array.forEach(([key, value]) => { // ★
	console.log({key, value});
});
```

## 4.2. Array

インデックスは普通の `forEach()` で取得できます。

```js:forEach
// Array 2
const array2 = ['a', 'b', 'c'];

console.log('array2');
array2.forEach((value, key) => { // ★
	console.log({key, value});
});
```

※ `Array.prototype.entries()` に `forEach()` を使うことはできません。

## 4.3. Map

Map もそのまま `forEach()` で回せます。

```js:forEach
// Map
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

console.log('map');
map.forEach((value, key) => { // ★
	console.log({key, value});
});
```

## 4.4. Object - `Object.entries()` - 分割代入

`Array.prototype.entries()` は `forEach()` で回せませんが、`Object.entries()` は回せます。

```js:forEach
// Object
const object = {'a': 1, 'b': 2, 'c': 3};

console.log('object');
Object.entries(object).forEach(([key, value]) => { // ★
	console.log({key, value});
});
```

# 5. key だけを回して value を取得

## 5.1. 普通の `for...in`

普通の `for...in` で key だけ取得して `const value = foo[key];` のように value を取得する。

## 5.2. key 配列を使う

以下のコードで key 配列を取得し、`for...of` や `forEach()` で key ごとに回し、`const value = foo[key];` のように value を取得する。

```js
Object.keys(array);
Map.prototype.keys();
Object.keys(object);
```