【初心者でも分かる!】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を定義、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();

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