JavaScriptにおける関数のレキシカル環境の適用

ある関数が、その結果として別の関数を返すとします：

javascriptfunction test() {
  return function() {
    
  }
}

親関数が何らかの変数を持っている場合、それらの変数は返される関数のレキシカル環境に含まれます：

javascriptfunction test() {
  let num = 1; // 親関数の変数
  
  return function() {
    // レキシカル環境 = {num: 1}
  }
}

返される関数のコードに、変数 numの値を出力するconsole.logを記述しましょう：

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

では、親関数testを呼び出し、その実行結果を変数funcに代入しましょう：

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

let func = test();

変数funcには返された関数が代入されます。この関数を呼び出してみましょう。その結果、変数numの内容が出力されます：

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

let func = test();
func(); // 1を出力する

一方、関数の外で変数numを出力しようとすると、アクセスできません：

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

console.log(num); // ここでは変数numはアクセスできない

ご覧の通り、ローカル変数numはこの関数のレキシカル環境に結び付けられました。これで、コードのどこでこの関数を呼び出しても、変数numの値を取得できるようになります。たとえ呼び出し場所自体ではその変数が直接アクセスできなくてもです。

実は、変数numをグローバルにすることで同様の結果を得ることができます：

javascriptfunction test() {
  return function() {
    console.log(num);
  }
}

let num = 1; // グローバル変数
let func = test();
func(); // 1を出力する

しかし、ここには重要な違いがあります： 新しいバージョンでは、変数numは関数の外からも変更できます（グローバル変数なので）。 一方、古いバージョンではできません。

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

let func = test();
console.log(func());

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

console.log(test()());

javascriptfunction test() {
  let num1 = 1;
  
  return function() {
    return num1 + num2;
  }
}

let num2 = 2;
let func = test();
console.log(func());

javascriptfunction test() {
  let num = 1;
  
  return function() {
    return num;
  }
}

let num = 2;
let func = test();
console.log(func());