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

【初心者でも分かる！】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(); 

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