JS 関数の書き方関数宣言関数式アロー関数どれを使うべきか

今回は「関数」について見ていきましょう。

JavaScriptに限ったことではありませんが、どの言語でも「関数」は非常に重要な要素の一つです。

特に、JavaScriptにおいては、「関数」を理解できれば、JSを使いこなせるようになると言われるほど大切な部分になります。

関数の魅力は、何と言っても、「一度定義すると何度でも呼び出すことが出来る」点にあります。

沢山の同じ処理をしなくてはならない時に、大変有効な手段となります。

JavaScriptを学習する上で、避けては通れないものになりますので、しっかりと学習していきましょう。

関数宣言
関数式（無名関数）
アロー関数
1. 特徴
あとがき

関数宣言

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

ここでは、「add」と言う「関数」を宣言しています。

この関数は、「a,b」と言う2つの「引数」を受け取り、足して、returnで返しています。

console.logでは、「add(1,2)」と引数の値を入れていますので、戻り値（返り値）は「３」になります。

当然引数の値を変えれば、戻り値も変わります。

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

こちらは「add1」という関数を宣言しています。

先程と何が違うでしょうか？

見ての通りなのですが、「console.log(add1(2,3));」が先に書かれています。

それでも計算結果は但し表示されています。

これは、JavaScriptが最初にコード全体を解釈してから上からコードを実行するようになっているためで、後に書いたとしても実行コードは正しく動作するのです。

関数式（無名関数）

const plus = function(a,b){
    return a + b;
};console.log(plus(1,2));
    
 3

変数「plus」に関数を代入しています。

「console.log」で値を取得して結果を返しています。

このような、変数に関数を代入するものを、「関数式」と言います。

関数宣言と似ていますが、違いを確認してください。

const plus = function sample(a,b){

なお、ここで「function sample(a,b)」のように、関数に名前をつけても意味はありません。

どんな名前をつけても結局は変数に代入されてしまうので、このような書き方をすることはありません。

つまり関数式では、「function(a,b)」と書くことが一般的であり、名前がないことで、「無名関数」と呼ばれることもあります。

アロー関数

const plus1 = () => {
    return a + b;
}
console.log(plus(2,3));
 5

関数式をより簡単に記述する時に使用されるのが、「アロー関数」になります。

名前の通り、「=>」がアロー（矢、矢印）になっているので、そう呼ばれています。

まずは今までとの一番の違いを見ていきましょう。

イメージとしては、「function」が「=>」に変わったと思えば良いのですが、並びに変化があります。

「function()」と書いていたものが、「() =>」になっています。

「function」が「=>」に変わり、「()」の後に「=>」を書くというイメージです。

特徴

「() => {}」の形で書く
引数が1つなら「()」を書かなくても良い(引数が0の場合は必要)
出力が1行なら「{}」を書かなくても良い
出力が1行なら「return」を書かなくても良い

アロー関数の特徴で覚えておいて欲しいのは、上記の4つになるかと思います。

具体的に見ていきましょう。

// 関数式

const sample = function(greeting){
    alert(greeting);
}
sample('Hello');

// アロー関数

const sample1 = (greeting1) => {
    alert(greeting1);
}
sample1('hello');

// アロー関数（省略版）

const sample2 = greeting2 => alert(greeting2);

sample2('Good Bye');

それぞれ同じ動作をしますが、書き方に違いがあります。

実際にコードを書いてみて確認してください。