関数の使い方

JavaScriptで、同じ処理を呼び出して使いたい時があります。

本ページでは、関数の使い方を説明します。

関数とは

関数とは、ある一定の処理をまとまりとして記述したものです。

関数を定義しておくと、後で何度も呼び出して使うことができます。

関数宣言(関数の定義)をして、何度も呼び出す。

関数の宣言

以下は、関数の宣言方法です。

【関数の宣言方法】
function func1() {
  処理を記述する
}

func1が、関数の名前です。好きな名前をつけれます。

上記の関数を呼び出す時は、func1();と記述します。何度も呼び出して、同じ処理をさせることができます。

関数宣言と呼び出しは、どちらが前でも問題ありません。本来、func1();を実行する前に、function func1()で関数が宣言されていないといけませんが、func1();を先に記述しても関数宣言が先に記述されたように扱われます。これを、巻き上げと呼びます。

なお、関数内で宣言した変数は、関数内だけで使えます。これを、スコープと言います。言い方を変えれば、関数の外と内部で同じ変数名を使っても、異なる変数として扱われるということです。

戻り値を利用する

関数内で処理した結果を、戻り値として利用できます。

【戻り値を利用する方法】
function func1() {
  let x = 1;
  return x;
}

let y = func1();

上記は、関数内で変数xに1が代入されます。return xでxを戻り値にするため、yにも1が代入されます。この例の場合では、let xで宣言しなくても、return 1と直接数字を指定することもできます。

戻り値は、数字だけでなく文字列も使えます。直接指定する場合は、return "テスト"などとします。また、return x + yなどとして計算結果を戻り値にすることもできます。

引数で関数に値を渡す

関数に値を渡すこともできます。

【引数の利用例】
function func1(x,y) {
  return x + y;
}

let z = func1(1,2);

上記は、関数内でxに1、yに2が渡されます。この値を引数と言います。結果として、x + yの3が戻り値になり、zには3が代入されます。

引数を使うメリットは、渡す引数によって結果を変えることができる点です。上記で、func1(3,4)を実行すれば、zは7になります。

引数を文字列にする場合、func1("テスト","テスト2")などとします。引数は、カンマ(,)で区切れば3つ以上も使えます。また、1つの場合はfunc1(1)などと記述します。

残余引数

引数の数が可変な時は、残余引数が使えます。

【残余引数の利用例】
function func1(x,y,...z) {
  return z;
}

let a = func1(1,2,3);
let b = func1(1,2,3,4);

上記で、xに渡されるのは1です。yには2が渡されます。zは、残りの引数を配列で受け取ります。このため、func1(1,2,3)の時は、z[0]に3が渡されます。func1(1,2,3,4)の時は、z[0]に3、z[1]に4が渡されます。

結果として、aには(3)が代入されて、bには(3,4)が代入されます。

func1(...z)とすれば、すべての引数がzの配列に渡されます。

残余引数であれは、配列のメソッドやプロパティが使えます。例えば、z.lengthであれば、引数の数を取得できます。詳細は、「配列の使い方」をご参照ください。

arguments

引数は、argumentsでも受け取れます。

【argumentsの利用例】
function func1() {
  return arguments;
}

let x = func1(1,2,3);

上記はarguments[0]に1、arguments[1]に2、arguments[2]に3が渡されます。このため、x[0]は1、x[1]は2、x[2]は3になります。

一見、残余引数と同じですが、以下の違いがあります。

  • argumentsは、名前が固定されています。残余引数であれば、変数で使えます。
  • argumentsは専用のプロパティが用意されていますが、残余引数で使える配列用のメソッドやプロパティの方が豊富です。

このため、残余引数の方が便利です。

再帰

関数は、関数内で自身を呼び出すことができます。これを、再帰と呼びます。

【再帰関数の例】
function func1(x) {
  if ( x === 5 ) {
    return;
  }
  x++;
  func1(x);
}

func1(1);

func1(1)で、xに1が渡されます。もし、xが5になるとreturnで終了しますが、そうでない場合は1加算されてfunc1(x)で再度自身を呼び出します。

次のページ関数式の使い方