【初心者でも分かる！】JavaScriptの関数とスコープの基礎

スコープとは

• 関数や変数などの参照できる範囲
• 基本的には関数の内側（スコープ内）で作成した変数は外側（スコープ外）では参照できない

基本的なスコープ(変数)

• 関数fnA、Bを定義し、変数xを新規作成する。
• console.logで変数xをコンソールに表示する。fnA、Bをそれぞれ実行する。

function fnA() {
  let x = 2;
  console.log(x)// 2
}
fnA()

function fnB() {
  let x = 3;
  console.log(x)// 3
}
fn(B)

console.log(x) //ReferenceError: x is not defined

すると、スコープの対象は範囲が一目瞭然ですね。
fn()関数だけ実行できます。

基本的なスコープ（関数）

• fn(関数)に仮引数xを定義、ｘをコンソールに表示する。

function fn(){
  console.log(x);// 4
}
fn(4);

console.log(x)// ReferenceError: arg is not defined

こちらもfn()関数の外では仮引数xを参照できません。

letを用いた変数作成について

上記2つのコードはいずれも「let x = 数字」で再代入しています。
同じスコープ内で再代入をするとエラーとなりますが、異なるスコープ内では再定義可能です。
以下は例です。

function fnA(){
  let x = 5;
  let x = 6; //SyntaxError
  console.log(x);
}
fnA();//SyntaxError: Identifier 'x' has already been declared

function fnB(){
  let x = 7;
  console.log(x)
}
fnB();// 7

function fnC(){
  let x = 8;
  console.log(x)
}
fnC();//8

グローバルスコープについて

名前の通りもっとも外側にあるスコープです。

const global = 9;
{
  console.log(global);//9
}
function fn(){
  console.log(global);//9
}
fn();

グローバル変数はあらゆるスコープから参照できる変数なので、いずれも９と表示されます。