Webサイト

【javascript】関数について

定義方法

以下にいくつかの関数定義方法を紹介します。

ここでは、「sample」という関数名(変数名)で定義しています。

関数名は自由ですが、どういった処理をするか関数名からわかるような関数名にすることを推奨します。

関数宣言

一番ポピュラーな方法のようです。

以下のように定義します。

function sample(){
  // 処理を記載する
}

関数式

以下のように定義します。

const sample = function(){
  // 処理を記載する
}

上記では、関数定義してsampleという変数に代入しています。

関数自体には名前がついてないです。(名前のない関数を「無名関数」や「匿名関数」という)

関数コンストラクタ

以下のように定義します。

const sample = new Function('x', 'y', 'return x + y');

上記では、javascriptに標準で定義されているFunctionオブジェクトのコンストラクタを利用して関数を定義しています。

ただ、関数コンストラクタを使った記述は特にメリットがなく、間違いが発生しやすいことや、パフォーマンスの観点などから避けるべきと言われており、ここでは詳細に説明はしません。

アロー関数

ES6から導入されたアロー関数です。

アロー関数の場合は、関数式の「function」キーワードを使わない代わりに、「=>」で関数を表現します。

以下のように定義します。

const sample = () => {
  // 処理を記載する
}

使用方法

上記のsample関数を使用する場合は、以下のように記載します。

sample();

引数

引数を設定する

引数を設定する場合は、function(引数1, 引数2, ・・・)というように記載します。

この引数は、関数内で使用することが可能です。

以下に具体例を記載します。

function sample(number1, number2){
  // 処理でnumber1,number2を使用できる
}

引数に値を渡す

引数に値を渡すには、以下のようにします。

function sample(number1, number2){
  console.log(number1 + number2);
}

// 引数に値を渡す
sample(4, 12);

戻り値

戻り値を設定する

関数内にreturn文を記載することで、任意の値を返すことが可能です。

以下のように設定します。

function sample(number1, number2){
  return number1 + number2;
}

// 返り値を使用する
console.log(sample(4, 12)); // コンソールに「16」と表示される。

-Webサイト