ReactのためのJavaScript – スコープと変数宣言(var/let/const)
はじめに
Reactを学ぶためのモダンなJavaScriptについてまとめます。
この記事では、ECMScript2015(ES6)から導入された新たなスコープについて、そして変数宣言(var/let/const)についてまとめていきます。
スコープ
スコープとは、変数の有効範囲を定義した概念です。同じスコープ上にある変数にはアクセスできますが、スコープが異なればアクセスできません。
JavaScriptには、グローバルスコープとローカルスコープがあり、ローカルスコープにはブロックスコープと関数スコープの２つのスコープがあります。
├── グローバルスコープ
└── ローカルスコープ
├──関数スコープ
└──ブロックスコープ
グローバルスコープ
プログラムのトップレベルで宣言された変数をブローバル変数といい、プログラム全体のどこからでもアクセスできるグローバルスコープを持ちます。
const scope = 'global';
//トップレベルからのアクセス
console.log(scope); // => global
// ブロック内からのアクセス
if (true) {
console.log(scope); // => global
}
// 関数内からのアクセス
function accessVariable() {
console.log(scope);
}
accessVariable(); // => global
ローカルスコープ
グローバル変数以外の全ての変数は、ブロックスコープか関数スコープをもつローカル変数になります。
ブロックスコープ
ブロックスコープとは、{ ... }で囲まれた範囲(ブロック)がもつスコープのこと。ブロック内で宣言された変数は、スコープ内でのみ参照でき、スコープの外からは参照できません。
{
const scope = 'scope';
console.log(scope); // =>scope
}
console.log(scope); // => ReferenceError: x is not defined
関数スコープ
関数ごとに作られるスコープのこと。アクセスできる範囲に関してはブロックスコープと同様です。
function fun() {
const scope = 'local';
console.log(scope); // => local
}
fun(); // => ReferenceError: scope is not defined
変数と宣言
JavaScriptには変数の宣言に、var / let / const という３つのキーワードが使われます。varは意図しない動作を作りやすいということで、ECMAScript2015(ES6)でconst / letが導入されました。なので、varは非推奨となっています。
const
constは、再代入できない変数の宣言とその変数が参照する値を定義できます。再代入しようとするとエラーがでます。
const x = 1;
x = 3; // => TypeError: Assignment to constant variable.
let
値の再代入が可能な変数を宣言できます。
let x = 1;
x = 4;
console.log(x); // => 4
var
varもletと同様、値の再代入が可能な変数を宣言できます。
ただし、letとの違いは有効なスコープです。
各キーワードが有効なスコープを↓のようになります。
| 宣言 | ブロックスコープ | 関数スコープ |
| var | × | ○ |
| let | ○ | ○ |
| const | ○ | ○ |
なぜvarが非推奨か
varが非推奨な理由は、varのスコープは関数単位でありブロック単位ではないからです。
var n = 0;
if (true) {
var n = 50;
var m = 100;
}
console.log(n); // => 50
console.log(m); // => 100
JavaやPythonなど他の言語に慣れていると、console.log(n)は0, console.log(m)はReferenceError: m is not definedになると思ってしまいますが、JavaScriptではvarのスコープはブロック単位ではないので↑のような挙動になります。
なので、再代入が必要な場合はlet, そうでない場合はconstを使うようにします。
今回は以上です。
こちらで他のテーマも扱ってるのでよかったらぜひ！
