[JavaScript Primer - 変数と宣言](https://jsprimer.net/basic/variables/) を読んで、変数と宣言方法について理解しましょう。
## Reference
- [JavaScript Primer - 変数と宣言](https://jsprimer.net/basic/variables/)
## Lesson
変数の宣言には3つの方法(変数宣言修飾子)があります。
| 宣言修飾子 | ECMAScriptバージョン | スコープ | 再代入 |
| ----------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------- | ------ |
| [[const (JavaScript)\|const]] | [[ES2015]]から | [[ブロックスコープ (JavaScript)\|ブロックスコープ]] | 不可 |
| [[let (JavaScript)\|let]] | [[ES2015]]から | [[ブロックスコープ (JavaScript)\|ブロックスコープ]] | 可 |
| [[var (JavaScript)\|var]] | 初期から | [[関数スコープ (JavaScript)\|関数スコープ]]、[[グローバルスコープ (JavaScript)\|グローバルスコープ]] | 可 |
基本的には[[const (JavaScript)|const]]を使い、どうしても再代入が必要なときのみ[[let (JavaScript)|let]]を使いましょう。`const`は再代入を防ぎ、コードの予測可能性を高めます。
> [!danger] [[var (JavaScript)|var]]を使ってはいけません
> [[ES2015]]より前に書かれたコードは[[var (JavaScript)|var]]で宣言されていますが、`var`はスコープの扱いが直感的でないため、[[let (JavaScript)|let]]や[[const (JavaScript)|const]]へ変更してください。
## Mission 1
#😁EASY
次のコードを **最も適切な** 宣言修飾子を使って書き直してください。
```js
function main() {
var a = 1;
var b = 2;
console.log(a + b);
}
main();
```
%%
解答例
```js
function main() {
const a = 1;
const b = 2;
console.log(a + b);
}
main();
```
%%
## Mission 2
#😁EASY
次のコードを **最も適切な** 宣言修飾子を使って書き直してください。
```js
function isOver10(num) {
return num > 10;
}
function main() {
var v = 11;
if (isOver10(v)) {
v = 10;
}
console.log(v);
}
main();
```
%%
解答例
```js
function isOver10(num) {
return num > 10;
}
function main() {
let v = 11;
if (isOver10(v)) {
v = 10;
}
console.log(v);
}
main();
```
%%
## Mission 3
#🙂NORMAL
次のコードを **最も適切な** 宣言修飾子を使って書き直してください。
```js
function main() {
var nums = [];
for (var i = 0; i < 5; i++) {
nums.push(i * 10);
}
console.log(nums);
}
main();
```
%%
解答例
```js
function main() {
const nums = [];
for (let i = 0; i < 5; i++) {
nums.push(i * 10);
}
console.log(nums);
}
main();
```
%%
---
*NEXT* >> [[📗TDQ-004 データ型]]