ReactのためのJavaScript – スコープと変数宣言(var/let/const)

はじめに

Reactを学ぶためのモダンなJavaScriptについてまとめます。

この記事では、ECMScript2015(ES6)から導入された新たなスコープについて、そして変数宣言(var/let/const)についてまとめていきます。


スコープ

スコープとは、変数の有効範囲を定義した概念です。同じスコープ上にある変数にはアクセスできますが、スコープが異なればアクセスできません。

JavaScriptには、グローバルスコープローカルスコープがあり、ローカルスコープにはブロックスコープ関数スコープの2つのスコープがあります。

├── グローバルスコープ
└── ローカルスコープ
    ├──関数スコープ
    └──ブロックスコープ

グローバルスコープ

プログラムのトップレベルで宣言された変数をブローバル変数といい、プログラム全体のどこからでもアクセスできるグローバルスコープを持ちます。

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 という3つのキーワードが使われます。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を使うようにします。

今回は以上です。

こちらで他のテーマも扱ってるのでよかったらぜひ!

「ReactのためのJavaScript – スコープと変数宣言(var/let/const)」へのコメント1件

コメントを残す

メールアドレスが公開されることはありません。