はじめに

JavaScriptの関数を定義する方法は複数あります。そして、アプリケーションの開発では様々な方法で関数を定義していきます。しかし、学習して間もない時は複数ある関数の定義方法について混乱したり、理解が曖昧なことがあると思います。そのため、それぞれの記述方法や特徴をまとめました。

関数宣言

function、関数名、引数、関数の処理を記述して関数を定義します。引数がない場合も()を記述する必要があります。

function 関数名(引数){
  // 関数の処理
}

関数宣言で定義した関数は先に読み込まれるため、関数を実行する記述が前でもエラーになりません。

example()

function example(){
  console.log('example')
}

// エラーにならない

function、引数、関数の処理を記述して関数を定義します。

function (引数){
  // 関数の処理
}

関数宣言と比較すると、関数名がないためより簡潔なコードの記述ができます。次に紹介する関数式を定義する際に利用されます。

変数(関数名)と無名関数を記述して関数を定義します。無名関数を変数に代入します。

const 変数 = 無名関数

// 例
const example = function(){
  console.log('example')
}

example()

関数式で定義した関数は順番通りに読み込まれるため、関数を実行する記述が前ではエラーになります。

example()

const example = function(){
  console.log('example')
}

// エラーになる

()と関数宣言を記述して関数を定義します。関数宣言を()で囲い、その後に引数を記述します。

(関数宣言)(引数)

//例
(function example(){
  console.log('example')
})()

即時関数は関数を定義すると同時に実行されます。そのため、関数を実行する記述が不要になります。

無名関数のfunction(引数)の代わりに(引数)=>を記述して定義します。

(引数)=>{
  // 関数の処理
}

// 例
const example = () => {
  console.log('example')
}

example()

functionを使用した関数と比較してより短い記述で関数を定義できます。近年採用されることが増えています。