[[JavaScript]]には複数のfor文がありますが、主に使うfor文は2つです。
## Reference
- [ループと反復処理 · JavaScript Primer \#jsprimer](https://jsprimer.net/basic/loop/)
## Lesson
繰り返し処理でfor文を使う場合は、[[for...of (JavaScript)|for...of]] を利用しましょう。
```js
// 配列の場合
for (const value of [10, 20, 30]) {
console.log(value);
// 10
// 20
// 30
}
// 配列でindexも欲しい場合
for (const [i, value] of [10, 20, 30].entries()) {
console.log(i, value);
// 0, 10
// 1, 20
// 2, 30
}
// オブジェクトの場合
for (const [key, value] of Object.entries({ id: 1, name: "Ichi" })) {
console.log(key, value);
// id, 1
// name, "Ichi"
}
```
配列インデックスだけが欲しい場合は、よくあるfor文も利用できます。
```js
for (let i = 0; i < [10, 20, 30].length; i++) {
console.log(i);
// 0
// 1
// 2
}
```
## Mission 1
#🙂NORMAL
以下のコードは実行エラーになります。その理由を説明してください。
```js
for (const i = 0; i < [10, 20, 30].length; i++) {
console.log(i);
}
```
%%
解答例
`i` を [[const (JavaScript)|const]]で宣言しているため `i` には値を再代入できないが、増分式である `i++` は `i` の値を変更しようとするため。
%%
> [!hint]- Hint 1
> `const i` は `i` に再代入することができないという意味合いです。つまり...
## Mission 2
#😵HARD
以下のテストコードが失敗する理由を説明してください。
```js
import { expect } from "jsr:@std/expect";
Deno.test("xsの各要素を2倍にする", () => {
const xs = [10, 20, 30];
for (let x of xs) {
x = x * 2;
}
expect(xs).toEqual([20, 40, 60]);
});
```
%%
解答例
`xs`は[[プリミティブ型 (JavaScript)|プリミティブ型]]の配列であるため、`x` には参照ではなく値が代入される。その時点で、`x` の値は元の[[配列 (JavaScript)|配列]]`xs` との参照繋がりが切れているため、`x` をいくら変更しても `xs` には一切影響がない。以上から、`xs` は `[10, 20, 30]` のままであるため `[20, 40, 60]` とは一致しない。
%%
> [!hint]- Hint 1
> `xs` の各要素は[[プリミティブ型 (JavaScript)|プリミティブ型]]であるため、`x` は参照ではなく値を受け取ります。
---
*NEXT* >> [[📗TDQ-012 オブジェクトの基本]]