【JavaScript】関数(アロー関数・無名関数・即時関数)の書き方・使い方について解説

様々なプログラミング言語を扱う際には関数を用いることが多いでしょう。高校の数学でもやったことがある人もいると思います。JavaScriptではいくつかの関数の定義方法が用意されており、関数の使い方も様々です。本記事ではJavaScriptの関数の書き方とその使い方について解説します。記事後半ではブロックスコープを実装するための即時関数や関数名を指定しなくても良い無名関数についても説明します。

関数とは

関数とは変数などの入力した値に対してあらかじめ自分で定義しておいた処理を行い、処理の結果を返す仕組みを指します。例えば次のようなものです。

function double(num) {
    let result = num * 2
    return result
}
console.log(double(4)) //8

書き方については後述しますが、doubleという関数を自分で定義して使っています。doubleは与えられた数値を二倍にして返すという関数です。doubleに4を入れることで8が結果的に帰ってきていることが確認できます。値を二倍しなければいけない場面が多数あるときにはあらかじめdouble関数を定義しておけばいいので非常に便利です。

関数を定義する

JavaScriptで関数を定義する方法はいくつかありますが、基本的な記述方法について説明します。

基本的な書き方

function 関数名(引数) {
    //処理内容
    return 戻り値
}

上の書き方はfunction命令と呼ばれるものです。これらのうち、引数と戻り値はなくてもいいですし、複数でも大丈夫です。

function greeting() {
    console.log("こんにちは");
}
greeting() //"こんにちは"

このように引数も戻り値も指定しないまま定義して利用することもできます。

関数の引数

引数とは関数に入力する値のことです。宣言した引数は関数内部でのみ用いることができます。

function double(num) {
    let result = num * 2
    return result
}

こちらの例ではnumが引数として指定されており、関数内でも使用されています。

関数の戻り値（返り値）

戻り値（返り値）は関数の結果を関数の外に出力するための値です。

function double(num) {
    let result = num * 2
    return result
}

こちらの例ではresultが戻り値として指定されています。戻り値がletで宣言されていますが変数である必要はありません。

function double(num) {
    return num * 2
}

このように記述しても同じ振る舞いをします。

関数を使う

関数名(引数)

定義した関数を使用するためにはこのように書くだけです。

戻り値を用いる場合は関数を値として用いることができます。

function double(num) {
    result = num * 2
    return result
}
let doubledNum = double(4)
console.log(doubledNum); //8

スコープに注意する

関数を使う際には中で宣言した変数に関数スコープが適用されます。

function func() {
    let hoge = "ほげ"
}
func()
console.log(hoge) //ReferenceError: hoge is not defined（エラー）

上のように関数内で宣言した変数は関数外で使用できなくなります。スコープについて詳しく学習したい方は「JavaScriptの変数や定数・データ型について解説」を参照してみてください！

関数の応用

ここまで基本的な関数の使い方を説明しましたが、用途に応じて応用的な関数を用いることができます。本項ではいくつかの特徴的な関数について説明します。

即時関数を使う

即時関数とはvarで変数を定義した際にブロックスコープが使えないために用いられる関数です。擬似的にブロックスコープを再現することができます。しかし、ES6(ES2015)以降はletやconstを用いることができるため必要性は小さくなりました。ブロックスコープについて詳しく学習したい方は「JavaScriptの変数や定数・データ型について解説」を参照してみてください！

let hoge = "ホゲ"
{
    let hoge = "ほげ"
    console.log(hoge); //"ほげ"
}
console.log(hoge); //"ホゲ"

と同じことを次のようにして実現できます。

var hoge = "ホゲ"
function block() {
    var hoge = "ほげ"
    console.log(hoge); //"ほげ"
}
block()
console.log(hoge); //"ホゲ"

このような処理のことを即時関数と呼びます。varを使わなければならず、かつブロックスコープを使いたい方は即時関数を使ってみましょう。

関数リテラルを使う

const 関数名 = function (引数) { 
    //処理内容
    return 戻り値
}

JavaScriptでは関数も値（データ）の一つです。したがって関数リテラルを用いて関数を定義することができます。引数と戻り値はなくてもいいですし、複数でも大丈夫です。

const double = function (num) {
    return num * 2
}
console.log(double(4)); //8

アロー関数を使う

const 関数名 = (引数) => {
    return 戻り値
}

ES6(ES2015)からはアロー関数を用いることで5.2項で紹介した関数リテラルをより簡潔に記述することができます。引数と戻り値はなくてもいいですし、複数でも大丈夫です。

const double = (num) => {
    return num * 2
}
console.log(double(4)); //8

アロー関数は条件に応じてさらに表現を簡素化することができます。

処理文がが一文である場合

波括弧{}を記述する必要もreturnを記述する方法も必要なくなります。

const double = (num) => num * 2

本文が一文で引数が一つの場合

引数をくくる括弧()を記述する必要もなくなります。ただし引数がない場合は括弧を記述する必要があります。

const double = num => num * 2

無名関数を使う

無名関数とはその名の通り、関数名を指定していない関数のことです。関数名を指定したり考えたりする必要がないため便利です。イベントに対するハンドラ関数として利用する場合や一度しか使用しない場合などに便利です。関数リテラルを用いることで実装することができます。

window.addEventListener('DOMContentLoaded', function () {
    //処理内容
});

わざわざ関数名を決める必要がないときに便利です。

window.addEventListener('DOMContentLoaded', () => {
    //処理内容
});

アロー関数を用いて無名関数を実装することもできます。

この記事のまとめ

本記事ではJavaScriptでの関数の扱いを、具体例を元に説明しました！最後に記事の要点をまとめてみましょう。

関数とは変数などの入力した値に対してあらかじめ自分で定義しておいた処理を行い、処理の結果を返す仕組みを指す。
関数はfunction命令で引数と処理内容と戻り値を指定して定義できる。
引数と戻り値は省略することも複数書くこともできる。
関数リテラル、アロー関数を用いても表現することができる。
即時関数を用いてブロックスコープを表現することができる。
無名関数を用いて名前のない関数を定義することができる。

JavaScriptを是非活用してみましょう。