学び直しのJS ~ var・let・const編 ~

Reactの勉強にあたってES6の仕様をしっかりと理解しておかないと後々つまづきそうなので、
学び直しの第一弾としてやっていこうかなと思います！

早見表

	再宣言	再代入	スコープ	ホイスティング
let	×	○	ブロック	×
const	×	×	ブロック	×
var	○	○	関数	undefined

基本的にはconstを使って、再代入が必要な時はletを使う。
varは非推奨。

再宣言

JavaScriptでは変数を宣言する際にlet constまたはvarを変数名の前に付けるのですが,
同じ変数名を使って宣言し直すことを再宣言といいます。

varを使って例にするとこんな感じです。
最初の行で定義したnameを次の行で再宣言しています。

var name = "Mike";
var name = "Bob";

次の例は再宣言ではなく再代入です！

var name = "Mike";
name = "Bob";

再宣言をできるのはvarだけです。
letやconstは再宣言をしてしまうとエラーになります。

再代入

再代入は変数に一度設定した値を上書きすることをいいます。
const以外は再代入が可能です。

let language = "Japanese";
language = "English"; // OK

var name = "Mike";
name ="Bob"; // OK

const taxRate = 0.1;
taxRate = 0.15; // ERROR

スコープ

スコープは変数や関数が参照できる範囲のことをいいます。

ブロックスコープ

ブロック({})毎に作られるスコープのことをブロックスコープといいます。
ブロックの内側で宣言した変数は、ブロックの外側からアクセスできず、ブロックの内側からのみアクセスが可能となります。
let或いはconstで宣言された変数はブロックスコープの変数になります。

const name = "Mike";

{
  console.log(name); // ブロックの外側に宣言した変数を参照しているのでOK

  const message1 = "Hello World";
}

console.log(message1); // ブロックの内側で宣言した変数を参照しているのでERROR

let age = 20;

if (age >= 20) {
  const message2 = `${name}は${age}歳なので成人しています`;
  var message3 = "varは関数スコープ";
}

console.log(message2); // ブロックの内側で宣言した変数を参照しているのでERROR
console.log(message3); // varはブロックスコープではないのでOK

関数スコープ

関数毎に作られるスコープのことを関数スコープといいます。

{
  var message1 = "Hello World";
}

console.log(message1);

function fn1() {
  var message2 = "fn1が呼び出されました";
}

console.log(message2);

ホイスティング

ホイスティングは変数や関数をコード実行前にメモリに配置することをいいます。
宣言の巻き上げといったりもします。
JavaScriptは上から順に処理が実行されるので、関数の定義より先に関数の呼び出しがあったらエラーになりそうですが、コード実行前にメモリに配置するのでエラーにはなりません。

fn1(); // 関数の定義より先に関数の呼び出しがあってもエラーにならない

function fn1() {
  console.log("Hello World");
}

varは宣言した値がホイスティングされた時の値になるのではなく、undefinedがホイスティングされた時の値になります。

console.log(name); // undefined

var name = "Mike";

対して、letとconstは未定義のものを参照しようとした時点でエラーになります。

console.log(name); // ERROR
console.log(language); // ERROR

const name = "Mike";
let language = "English";

関数をホイスティングさせたくない場合は、無名関数をletあるいはconstの変数に代入してあげればOKです。

something(); // constで定義しているのでERROR

const something = function () {
  console.log("Hello World");
};