こんにちは！サーバサイドとフロントエンドの二刀流の hikaru-kimi です！
突然ですが、JavaScript をコーディングする際、みなさんはどのように関数定義されますか？
既存のコードに迎合する形で、言わば横展開のような形で関数を定義される方もいらっしゃるかもしれません。
ただ、JavaScript の関数定義方法にはそれぞれ特徴があり、それを理解していないと思わぬ挙動を引き起こす可能性があるのです。
今回は、JavaScript の関数定義の種類とそれぞれの特徴について整理してみました！
関数の定義方法は大きく3種類あります。
- 関数宣言
- 無名関数
- アロー関数
関数宣言
関数を function で宣言する形で定義する方法です。
function addition(num1, num2) { return num1 + num2; }
JavaScript を習得する際の基本中の基本ですね！
ちなみに、この関数宣言型では定義前の関数呼び出しが可能なんです！
addition(1, 2); function addition(a, b) { return a + b }; => 3
以降でご紹介する無名関数（定数や変数に代入した場合）やアロー関数では、定義後の呼び出ししかできません！
それを忘れてしまうと関数が呼び出せず不具合の原因となってしまいますので注意が必要です。
無名関数
無名関数は、関数名を指定することなく定義する方法です。 関数名がないため、定義と同時に実行されます。
関数を使い回すことなく使い捨てたい場合に便利ですね！
私見ではありますが、関数名を考えなくていいのって地味に便利ですよね！笑
(function() { console.log('bbb'); }() )
もちろん使い回すことも可能です！
その場合は定数や変数に代入し、その定数や変数を呼び出す形での対応となります！
const addition = function(num1, num2) { return num1 + num2 }; addition(3, 5);
上記関数宣言型でも触れましたが、定数や変数に代入した無名関数は定義前に呼び出すはできません…
基本的には関数宣言型と同等の機能を有していますが、些細な違いもありますので気をつけたいですね！
addition(3, 5); const addition = function(num1, num2) { return num1 + num2 }; => VM360:1 Uncaught ReferenceError: addition is not defined at <anonymous>:one:1
アロー関数
最後に、今回のメインとなるアロー関数についてご紹介します！
アロー関数は、関数宣言型や無名関数型の定義方法を簡略化した書き方となります！
ES6から導入されました。
こんな記述になります！
const addition = (num1, num2) => num1 + num2;
ぱっと見てお分かりの通り、function もなければ {} も（本文が一文であれば）不要、return も不要となります！
ちなみに、引数が1個しかない場合は引数の () まで不要です！
const getHalf = num => num / 2;
その他、機能面での違いで言いますと引数名の重複の可否が挙げられます！
関数宣言型や無名関数型で定義された関数では、なんと引数名の重複が許可されてました！
引数名が重複した場合、重複した引数名の中で最後に定義された引数のみが有効となります！
function returnNumber(num, num, num) { return num; } returnNumber(1, 10, 100); => 100
さすがにこのような仕様は危険と判断されたのか、ES6から導入されたアロー関数では、変数名が重複するとエラーが発生するようになりました。
const returnNumber = (num, num, num) => num; VM40200:1 Uncaught SyntaxError: Duplicate parameter name not allowed in this context
以上、JavaScript の関数の定義方法の違いについて簡単にまとめてみました！
これだけならわざわざ記事にするほどのことではありません。 しかし、アロー関数と上2個の関数とでは機能面においてもっと大きな差異があるのです！
…と思ったのですが、そろそろ業務に戻らないといけなくなりました！よって大きな差異についてはまた次回お伝えいたします！
弊社インゲージでは、言語の仕様の細かな機能の違いにも着目した上で、その特性を存分に活かしたコーディングをできるエンジニアを募集しております！
JavaScript の関数の定義方法の違いなんて朝飯前だよと思ったそこのあなた！ぜひ以下のリンクより、まずは気軽にカジュアル面談からのご応募お願いいたします！
