スコープ

JS
2023.12.26

関数宣言と関数式

関数宣言は巻き上げが発生する（宣言よりも前に変数を使用可能）が、再代入はできない。

関数式は巻き上げが発生しない（宣言よりも前に変数を使用不可）が、再代入が可能。

目的に合わせて使うとよい。

関数宣言

foo(); //'Hello,World'

function foo(){
   console.log('Hello,World')
}

foo = function(){
  エラーになる（再代入はできない）
}

関数式

bar() //error

var bar = function(){
  console.log('Hello,World')
}

if(someCondition){
  bar = function(){
   別の処理（再代入が可能）
  }
}

letとvarとconstの違い

var ・・・変数を関数スコープで宣言します。つまり、変数が宣言された関数内でのみ有効。再宣言可。

let ・・・変数をブロックスコープで宣言します。再代入が可能。

const ・・・変数をブロックスコープで宣言します。再代入は不可。配列や関数などのオブジェクトは中身の　　　　　　　　　　　　　　　　　変更は可能

funcion example(){
   if(true){
      var x = 10 //関数スコープ
      let y = 20  //ブロックスコープ
　　　　　console.log(y) //20 
   }
   console.log(x) //10
   console.log(y) // error
}
var x =5
var x = 10 //問題なし

let y = 15
let y = 20 //エラー

letとconstどちらを使うか

let counter = 0;
$(document).on('click', function() {
    counter++;
    console.log(counter);
});

このようにletは変数の値が変更される場合に使い、

constは変数の値の変更がない場合に使うのが適しています。