JavaScriptを習得したい

on Note

関数の使い方

関数はJavaScriptを記述する上で、下記の3つの形で扱っていきます。

宣言
関数を作ること。
決められたルールに従って、あるデータを別のデータに変換するものを作る。
関数は自由に作ることができ、関数を作ることを関数宣言と言う。
参照
データとして関数を扱うこと。
関数もデータであり、関数をデータや値として扱うことを参照するという。
呼び出し
関数に値を渡して変換してもらうこと。

関数は自由に作ることができます。関数宣言をして関数を作り、参照や呼び出しという形で関数を使っていくわけです。

関数は宣言した(作った)だけでは動作しません。関数は呼び出さないと動かないのですが、関数を動かして値を変換させる際に必要なのが呼び出しです。

変換が必要な時に
関数名 ();
で関数を呼び出して、その時に渡す値があれば ( ) の中に記述します。

function 関数名(引数) {
    処理
    return 戻り値;
}

関数名 ();      //関数の呼び出し

関数の書き方

関数の書き方として、ここでは下記の3パターンを説明しています。

  • functionキーワードで宣言する関数式を使う書き方
  • 関数リテラル表現での書き方
  • アロー関数式を使う書き方

functionキーワードで宣言する関数式を使う書き方

関数の書き方の1つが、functionキーワードを使った関数の宣言です。

function 関数名(引数) {
    処理
    return 戻り値;
}

functionキーワードで宣言した関数には任意で名前を付けます。付けたその名前を使って関数を使い回していくことになります。

名前を付けるにあたって、命名に使える文字と使えない文字があったりと、一定のルールがあります。

参照:識別子の命名規則:変数名や関数名の付け方

functionキーワードを使って宣言した関数の具体例が下記です。この関数では、呼び出し時に2つの値を渡して、大きい方の値に変換して返しています。

function max(x, y) {
    if(x < y) {
        return y;
    }
    return x;
}

max(2, 5);

変換結果はです。

関数を呼び出す際に、引数xとy、それぞれに値を渡します。

変換の内容としては、もしxがyより小さければyを返し、そうでなければxを返すといったものです。要は2つの値を受け取って、それを大きい方の値に変換し、その変換した値を返す、という関数に仕上がっています。

関数リテラル表現での書き方

2つ目に説明する書き方は、関数リテラルで定義する書き方です。

functionキーワードを使った関数の定義では、関数を呼び出す際に使用する関数名を指定しました。

関数リテラルでは関数名を付けません。定義した関数を変数に代入し、その変数名を使って関数を呼び出します。

const max2 = function (x, y) {
    if(x < y) {
        return y;
    }
    return x;
}

max2(2, 5);

アロー関数式を使う書き方

3つ目に説明するのはアロー関数式を使った関数の書き方です。構文は以下のようになります。

(引数) => {
    処理
    return 戻り値;
}

引数の後ろにアロー記号「=>」(イコール・大なり)を書き、処理ブロックを記述します。

引数が1つだけの場合は、以下のように()を省略して記述することができます。

引数 => {
    処理
    return 戻り値;
}

処理が1行で終わる場合は、{ }(波括弧)と return を省略して記述することができます。これらを省略した場合は、処理の結果がそのまま戻り値となります。

(引数) => 処理;

アロー関数式を使った関数の具体例が下記です。

const max = (x, y) => {
    if (x < y) {
        return y;
    }
    return x;
}

max(2, 5);

上記は、アロー関数式を使って関数を宣言し、変数 max に代入しています。関数はデータなので変数に代入することができます。よってこの場合、関数を1つのデータとして扱って参照しているわけです。

以降はこの変数max を利用して関数を呼び出すことになります。

アロー関数式では関数名を付けません。よってアロー関数式では、関数式を変数に代入し、その変数名で関数を呼び出すという使い方をします。

アロー関数式でオブジェクトリテラルを返す時の注意点

下記は、アロー関数が戻り値としてオブジェクトリテラルを返す例です。

const getObject = () => ({hoge: "ほげ"});

getObject();

アロー関数での戻り値がオブジェクトリテラルである場合、リテラル全体を ( ) で囲む必要があります。丸括弧がないと、{ } は関数ブロックを表した波括弧と見なされ、「hoge:」がキーを表していることになる為、オブジェクトリテラルそのものを返したい場合は丸括弧で囲みます。

丸括弧で囲んでいない場合は、関数全体の戻り値として「undefined」が返ります。

returnの挙動による処理の流れ

プログラムの読み込み及び処理は、原則、上から順番に行われます。関数の中でも同様に、上から順番に処理が行われます。

関数に return命令がある場合、returnに到達するとそこで処理が終了します。その流れを先程からの例で見てみます。

function max(x, y) {
    if(x < y) {
        return y;
    }
    return x;
}

xよりyの値が大きければyの値を返す。そうでなければxの値を返す関数になっています。

関数ブロックの中の if文の条件に一致して if分の中に入った場合、return y; によってyを返し、そこでその関数の処理は終了します。よって以降の処理は行いません。

関数の参照

関数名( );
とすることで、関数を呼び出し変換結果を受け取ります。その時渡したい値があれば丸括弧の中に記述します。

const calc = (x2, y2) => {
    return x2 + y2;
}

calc(2, 3);

変換結果はです。

上記コードでは、関数calc に2と3を渡した場合の変換結果を受け取る、先ほどからと同様の関数の呼び出しです

calc(a, b)の部分(関数呼び出し部)で、丸括弧とその中身を省いた
calc;
といった記述にすると、関数そのものを得る命令になります。


calc;     //関数そのものを得る呼び出し

これが関数を参照していることになります。( ) を付けると変換結果が返るが、( ) を省くと関数を参照する(関数そのものを呼び出す)ことになります。

関数を参照するタイミングとしては下記のような場合があります。

  • 関数を別の関数に渡す。
  • 関数を、戻り値として関数から返す。

関数を受け取ったり、関数を返すような関数を高階関数と呼びます。

関数が受け取る関数、つまり関数に渡された関数のことをコールバック関数と呼びます。