web関連

【javascript】変数宣言のletとconstについて

2020/10/09

漠然とconstは一度宣言したら再宣言も再代入も駄目なのは理解していたんだけど、for文の中でconst使ってたのを見た時に不思議に思ったので備忘録

letとconstのおさらい

まず、letは「再宣言」のみ駄目
再宣言すると「Uncaught SyntaxError: Identifier ‘test’ has already been declared」ってエラーを吐く

let test = "変数を宣言するよー";
// let test = "変数を再宣言するよー";// Error
test = "変数に代入するよー";
console.log(test);// 変数に代入するよー

constは「再宣言」も「再代入」も駄目
再代入の時に「Uncaught TypeError: Assignment to constant variable.」ってエラー吐く

const test = "変数を宣言するよー";
// const test = "変数を再宣言するよー";// Error
// test = "変数に代入するよー";// Error
console.log(test);// 変数を宣言するよー
constで宣言したものは変数ではなく「定数」と呼ぶみたい

ちなみにvarは「再宣言」も「再代入」もできる

var test = "変数を宣言するよー";
var test = "変数を再宣言するよー";
test = "変数に代入するよー";
console.log(test);// 変数に代入するよー

違いについては他にスコープの違いなんかもあって、varが「関数スコープ」で、letconstが「ブロックスコープ」
スコープ周りは後で詳しく調べようかな

varはあまり使われなくなったみたいだけどその理由についてまとめられている記事があったから貼っておく

で、本題

for文の中のletとconstについて

ループ文の中でconstを使うコードがあって、「えっ!?再代入も再宣言も駄目なのに使えるの!?」って驚いたので備忘録に残しておく

// ここのconstは納得
const character = [
  {name: "田中", age: 5},
  {name: "鈴木", age: 28},
  {name: "佐藤", age: 10000},
];

for (let i = 0 ; i < character.length ; i++) {
  // ここのconstはびっくりした
  const name = character[i].name;
  const age = character[i].age;
  console.log(`${name}です`);
  console.log(`${age}歳です`);
}

結論としてはfor文とかのループってスコープが違うみたいね
簡単に言うとループが回るたびに新しく以下のコードが生成されているイメージ

const name = character[i].name;
const age = character[i].age;
console.log(`${name}です`);
console.log(`${age}歳です`);

だから再宣言でも再代入でもないから
const使って問題がないみたい

ちなみにfor文の引数に指定しているlet i = 0constにするとエラー吐くi++で再代入しているから

今までvarしか使ってこなかったからちゃんとletとconstも使って行くかな