JavaScriptの無名関数ってどういう時に必要でしょうか？

Question

• 無名関数

var sum = function(a,b){
    return(a + b);
}
console.log(sum(2,3));

• 通常の関数

function sum2(a,b){
    return(a + b);
}
console.log(sum2(2,3));

---

見た感じ、関数を変数に代入してるだけで何が恩恵になるのかが理解できません。

どういう場合に通常の関数を使うのではなく、無名関数を使ったほうがいいのか教えて頂けませんでしょうか？
（アロー関数も同様です。functionという文字を =>[アロー] にしてるだけで、どこに恩恵があるのかわかりません）

Answer 1

##Function Expression(関数式?)

1つ目のはfunction expressionです。つまり式です。
名前をオプションで入れることができますが、再帰関数を作るときぐらいにしか使わないでしょう。
名前が無いときは無名関数と呼ばれます。

var f = function factorial(n) {
  if (n < 1) {
    return 1;
  } else {
    return factorial(n - 1) * n;
  }
};

式であるがゆえに、文(statement)の中に直接入れれるので、1回しか使わない場合はfunction declarationのように余分に数行使わずに済みます。

##Function Declaration(関数宣言)

こちらはそれ単体でstatementとなります。function expressionと違い、hoistingが起こり、同じスコープならfunction declarationの前にそのfunctionを参照することができます。

alert1();

function alert1() {
  alert(1);
}

それ以外の点ではvar f = funtion (...) { ... }と同じです。

---

ES6ではconstやletが導入され、1つ目のパターンを使って関数の上書きを防ぐことができます。

const f = function () { return 1; };
const f = function () { return 2; };  // syntax error

しかしfunction declarationでは上書きを防げません。

function f() { return 1; }
function f() { return 2; }
f();  // 2

##Arrow Function

これはほぼfunction expressionと同じです。
短く書けるというメリットがあります。

bodyがreturn文だけなら、さらに{ }なしで返り値をそのまま式として書くことができます。

var f = function(x) { return x + 1; };
var g = x => x + 1;

function expressionとの主な機能的な違いは、thisをbindしません。

var obj1 = {
  checkThis: function () {
    console.log(this === obj1);
  }
};
obj1.checkThis();  // true

var obj2 = {
  checkThis: () => {
    console.log(this === obj2);
  },
  checkThis2: () => {
    console.log(this === window);
  }
};
obj2.checkThis();  // false
obj2.checkThis2();  // true

Comments

[EzrealTrueshot]

ありがとうございます！
勉強になりました。

Answer 2

関数を変数に代入してるだけで何が恩恵になるのかが理解できません。

このやり方では質問者さんのいうとおり恩恵はありません。
アロー関数も含めて、javascriptでは関数定義するやり方が複数あると捉えてください。

まず大前提として、「無名関数」は読んで字のごとく名前がない関数なので、
主に１度限り（２度以上の呼び出しを行わない）場合や名前空間を汚したくない用途に用います。

使用例１：パラメータとしての関数

例えばタイマー関数を使うときによく見るものでは、このようなコードを見かけることがあると思います。

setTimeout(function(){
  alert("timer!");
}, 1000)

こういったコードの無名関数に無理やり名前を付けることもできますが、
外部から参照することはできないため無意味であり、人によっては混乱を招く可能性があります。

使用例２：objectに後付けでメソッドを生やす

var obj = {id: 123};
obj.getId = function(){
  return this.id;
}
obj.getId(); // 123

関数を別途定義してから代入することもできますが、こちらのほうが名前空間を汚さずよりシンプルにかけます

使用例３：カスタマイズした関数を返す関数

function labelGenerator(name) {
  return function(num, price){
    return name + ':数量は' + num + 'つ,金額は' + (num * price) + '円';
  }
}
var appleLabelFnc = labelGenerator('りんご');
appleLabelFnc(2, 50) // "りんご:数量は2つ,金額は100円"
appleLabelFnc(5, 70) // "りんご:数量は4つ,金額は350円"
var melonLabelFnc = labelGenerator('メロン');
melonLabelFnc(3, 1050) // "りんご:数量は3つ,金額は3150円"

同じnameを毎回設定したくないという用途で、name値を固定させた関数を返します。
返却する関数はlabelGenerator関数が実行されるまで作られない動的な関数であるため予め関数定義しておくことができません。

---

思いつくものをざっと記載しましたが、まだまだ様々な使い方があります。

Comments

[karamarimo]

使用例3ですが、一応function内でfunction declarationをして返すこともできますよ。
function f(x) {
function g(y) {
return x + y;
}
return g;
}

[EzrealTrueshot]

ありがとうございます！勉強になりました。