JavaScriptで関数を宣言する

関数は、引数をとり、処理を行い、値を返すものです。
イメージはこんな感じ f:id:utouto97:20210706224016p:plain

関数は、何かしらの処理をします。
ここでは、足し算を行う関数を考えます。
例えば、引数として2と3を渡した場合、関数は処理の結果5を返します。 f:id:utouto97:20210706224108p:plain

JavaScriptで関数を宣言（定義）する方法はいくつかあります。
それらをまとめていきます。
ここでは、二つの引数をとり、それらを足した結果を返す関数を宣言します。

function を使う

一つ目の方法は、functionを使う方法です。
以下の形で記述します。

function 関数名(引数1, 引数2) {
  何かしらの処理
  return 返り値;
}

足し算を行う関数は以下のように記述できます。
関数名はaddとします。

function add(a, b) {
    return a + b;
}

JavaScriptで関数を呼び出すには、関数名(引数1, 引数2)の形で記述します。

console.log(add(2, 3));

console.logで表示しています。
結果は5と表示されます。

無名関数

JavaScriptでは、関数に名前を付けなくてもよいです。
名前をつけてない関数を無名関数といいます。

無名関数の宣言方法は、functionを使う方法で、関数名を省略するだけです。
足し算を行う関数は以下のとおりです。

function (a, b) {
  return a + b;
}

無名関数は、関数名がないので、ふつうには呼び出すことができません。
そのため、無名関数の用途としては、引数に関数を渡す場合があります。

例えば、setTimeoutという関数があります。
setTimeoutは、引数に関数と時間をとり、その時間が経過したあと、引数にとった関数を実行する関数です。
これに、さきのアラートを出す関数を渡してみます。

setTimeout(function(){alert("Hello");},1000)

また、JavaScriptで関数はオブジェクトの一つなので、変数に格納することもできます。
格納した関数は普通に呼び出して、使うことができます。

const add = function (a, b) {
    return a + b;
};

console.log(add(2, 3));

アロー関数を使う

JavaScriptで関数を宣言するには、また別の方法もあります。
それがアロー関数を使う方法です。

さきに、足し算を行う関数をアロー関数で記述してみます。

(a, b) => {
    return a + b;
}

無名関数と似ています。
functionを使う代わりに、引数の()と処理を記述する部分の{}の間を=>でつなぎます。

アロー関数の方法でも、用途は無名関数とほぼ同じです。
他の関数の引数として渡す場合と変数に格納して呼び出す場合に使います。

足し算を行う関数は以下のように記述できます。

const add = (a, b) => {
    return a + b;
}

console.log(add(2, 3));

この方法で、記述するメリットは、様々なものが省略できるため、簡潔な記述ができるということです。
まず、functionを記述する必要がありません。

引数が一つの場合に限り、引数を囲っている()を省略できます。

const plusone = a => {
  return a + 1;
};

処理の内容が式の場合は、{}とreturnを省略できます。

const plusone = a => a + 1;

このように、かっこやreturnを省略することもできます。

アロー関数は、手軽で便利なのですが、通常の関数と以下の点で異なります。

this や super への結びつけを持たないので、メソッドとして使用することはできません。

arguments や new.target キーワードがありません。

call、apply、bind のような、一般にスコープの設定のためのメソッドには適していません。

コンストラクターとして使用することはできません。

本体内で yield を使用することはできません。

参考
関数 - JavaScript | MDN
アロー関数式 - JavaScript | MDN

終わり