技術のメモ箱

JavaScript/関数

関数の定義

関数宣言

関数の宣言はfunctionを使う。return文を省略した場合はundefinedが返る。

function sum(arg1, arg2) {
    return arg1 + arg2;
}

関数の定義は、変数に関数式を代入しても行うことができる。

const sum = function (arg1, arg2) {
    return arg1 + arg2;
}

関数の実行は普通に。ちなみに渡す引数の数が不足していてもエラーにならず、undefinedが渡される。

let result = sum(5, 8);

可変長引数

引数はargumentsという特殊なオブジェクトにも渡される。可変長引数として使える。

function sum() {
    const arg1 = arguments[0];
    const arg2 = arguments[1];
    return arg1 + arg2;
}

デフォルト引数

引数に値が渡されなかった場合（値がundefinedの場合）、デフォルト値が設定される。

function multi(arg1, arg2 = 2) {
    return arg1 * arg2;
}

コールバック関数

関数はオブジェクトの一種なので、引数として渡すことができる。

calc(3, 4, sum);
calc(3, 4, multi);

渡されたコールバック関数は普通に実行できる。

function calc(val1, val2, func) {
    console.log(func(val1, val2));
}

無名関数とアロー関数

無名関数

名前が無い関数のこと。
関数式、コールバック関数、オブジェクト内のメソッド定義に使われる。

setTimeout(function() {console.log("Hello");}, 1000);

アロー関数

アロー関数は、ES6で追加された無名関数の省略記法のこと。
引数の個数や本文の行数によってどのくらい省略して書けるかが変わってくる。
引数を囲む丸括弧は、引数が1個の時だけ省略できる。

() => {関数の本文};
val => {関数の本文};
(val1, val2) => {関数の本文};

関数を囲む中括弧は、関数の本文が1行の場合に省略できる。
その際は、結果がそのまま戻り値となる。以下は等しい。

(val1, val2) => val1 + val2;
(val1, val2) => {
    let result = val1 + val2;
    return result;
}

関数の本文が1行でも、戻り値がオブジェクトの場合は区別するために丸括弧が必要。

(val1, val2) => ( {result: val1 + val2;} )

無名関数とアロー関数の違い

特定のケースにおいて挙動が異なる。
無名関数：thisを持つ。argumentsを持つ。newでのインスタンス化が可能。prototypeを持つ。
アロー関数：thisを持たない。argumentsを持たない。newでのインスタンス化が不可。prototypeを持たない。
アロー関数はargumentsを持たないが、スプレッド演算子によって可変長引数が記述できる。

pagetop