変数のスコープ、var宣言と無名関数
jsの基本を教わったのでメモ!
知らないと手こずりそうなjsのお作法です。
function hoge(){
var x = "hello world";
return console.log(x);
}
hoge(); //hello world
console.log(x); //エラー
jsは関数の中にある変数を外から参照することができません。
関数の内側の変数をローカル変数と言います。
var x = "hello world"; //関数の外で変数を定義
function hoge(){
return console.log(x);
}
hoge(); //hello world
逆に関数の外で変数を定義すると関数の外に変数を探しに行きます。
上記のコードはグローバル変数のxをhoge関数の中から参照しています。
これをスコープチェーンと言います。
function hoge(){
x = "hello world";
return console.log(x);
}
hoge(); //hello world
console.log(x); //hello world
一つ目のコードとほとんど同じに見えますが二行目の関数にvarがついていません。すると変数xがグローバル変数になってしまい、関数の外から参照できてしまいます。
これはバグの温床なのでvarを忘れずに付けましょう。大規模なjsになってくると見つけるのも大変・・・!
(function(){
var x = "hello world";
console.log(x);
})(); // 無名関数を直ぐに実行してhello worldと出力
console.log(x); //エラー
上のコードは無名関数というもので、名前の付いてない関数を作成しすぐさま実行しています。
内部の変数が関数の中に格納されるのでグローバル変数を意図的に避け、名前空間をクリーンに保つテクニックです。
書き方が少し特徴的ですが
(function(){ //関数を無名にし()で囲む
処理内容
})(); //無名の関数を実行
上記のコードは即時関数とも呼ばれます。
var hoge = function(){
alert("hello");
}
こんな感じに無名関数を変数に入れておくこともできます。