JavaScriptのスコープとコンテキストの違いとは？基礎からわかりやすく解説

JavaScriptにおいて、「スコープ」と「コンテキスト」はよく混同されますが、まったく別の概念です。関数を呼び出すときには、必ずこの両方が関わってきます。本記事では、それぞれの違いと仕組みをサンプルコード付きでわかりやすく解説します。

スコープ（Scope）とは

変数の「スコープ」とは、その変数が定義され、参照できる範囲のことを指します。JavaScriptの変数には、大きく分けて次の2種類のスコープがあります。

• グローバル変数：グローバルスコープを持ちます。つまり、JavaScriptコードのどこからでも定義・アクセスが可能です。
• ローカル変数：定義された関数の中でのみ参照できます。関数の外からはアクセスできません。

なお、関数に渡される引数（パラメータ）も、常にその関数内でのみ有効なローカル変数として扱われます。

また、ES6（ECMAScript 2015）以降では、let や const を使うことで、if文やfor文などの波括弧 {} の中だけで有効な「ブロックスコープ」を実現できるようになりました。

コンテキスト（Context）とは

「コンテキスト」は、関数がどのように呼び出されたかによって決まるものであり、主に this が何を指すのかに関わります。実際に例を見てみましょう。

サンプルコード

var ob1 = {
    display: function() {
        return this;
    }
};
ob1.display() === ob1; // true

この例では、オブジェクトのメソッドとして関数を呼び出しているため、結果は true になります。これは、this のコンテキストが「メソッドを呼び出したオブジェクト（ここでは ob1）」に設定されるためです。

つまり、同じ関数でも呼び出し方によって this が指す対象は変わります。スコープが「変数の有効範囲」を表すのに対し、コンテキストは「呼び出し方」に依存するという点が、両者の大きな違いです。