function文とfunction式について

function文とfunction式って何が違うんだ?と思ってイロイロ確認してみた。

文頭がfunctionで始まるのが文で,変数に代入したりするのは式です。

// 文
function func1(){
  return 'hoge';
}

// 式
var func2 = function(){
  return 'fuga';
};

// 式
(function func3() {})


if (x) {
   // 式
   function func4() {}
}

function文とfunction式は関数が定義されるタイミングが違ってくるらしい。

function文はコード読み込み時にトップレベルで定義され、どこにあっても呼び出すことができるがfunction式は代入時に定義され変数と同じようにホイストが起こる。

console.log(func1()); // 'hoge'
console.log(func2()); // 未定義になる

function func1(){
  return 'hoge';
}

var func2 = function(){
  return 'fuga';
};

if文の関数宣言に注意

JavaScriptエンジンによってif文中の関数宣言のされ方が違ってきます。
Chrome系(opera,safari)で下記コードは関数がトップレベルで宣言され実行されてしまいます。

if (false) {
  function check(){
    return 'true';
  }
}

console.log(check()); // Chromeでは'true'が返ってくる。

if文の中で関数を定義する時には、関数式を使ってあげて変数に代入すると狙った動作をしてくれます。

var check;

if (true) {
  check = function (){
    return 'true';
  }
} else {
  check = function (){
    return 'false';
  }
}

console.log(check()); // 'true'

Author