JavaScriptにおける関数の書き方

はじめに

こんにちはプログラマー2年目の塚田と申します。
最近のお仕事ではJavaScriptの関数についてじっくり触れる機会があり、
「こんな書き方ができるんだ～～」と勉強する毎日です。

特に気になったのは関数の書き方です。
調べてみるといろいろな関数の書き方があったので記事にしてみようと思います。

関数宣言

初めに一般的でよく見る書き方である、functionキーワードを使う書き方。

function displayName(name){
    return 'こんにちは、' + name + 'さん';
}

console.log(displayName("太郎"));  // →こんにちは、太郎さん

次に関数を変数に代入する書き方を試します。

関数式(無名関数)

const displayName = function(name){
    return 'こんにちは、' + name + 'さん';
}

console.log(displayName("太郎"))  // →こんにちは、太郎さん

この関数の書き方では以下のようなメリットがあります。
・関数名の衝突(重複)を避けられる。
・コードが短くなる。
・その場所でのみ実行することを表現できる。

私も始めてみた時は、わざわざ無名関数で書かなくてもよくないか？
と思っていましたが、意外と便利で使えそうですね。
また、コールバック関数ともいうそうです。

アロー関数

const displayName = name => 'こんにちは、' + name + 'さん';

console.log(displayName("太郎"));  // →こんにちは、太郎さん

アロー関数では関数の定義を簡略化できるという点です。
さっきまで書いていたfunctionやreturnは省略されています。
一行で書けるのでとても見やすいですね。

次は関数にデフォルト値を入れた書き方です。

デフォルト引数

function displayName(name = "太郎"){
    return 'こんにちは、' + name + 'さん';
}

console.log(displayName());  // →こんにちは、太郎さん

自分で書いといてなんですが、これ使う機会あるのかな...
知っておいて損はないでしょう！！

ちなみに引数を配列として受け取ることもできるらしいです。

function sum(...numArray){
    let total = 0;
    for(let i = 0; i < numArray.length; i++){
        total += numArray[i];
    }
    return total;
}
console.log(sum(1,2,3,4,5))  // →15

おわりに

今回はJavaScriptでの関数の書き方について書いてみました。
紹介だけで終わってしまいましたが、書き方による利点の詳細については
次回以降、調べて記事にしていこうかと思います。
以上、塚田でした。