JavaScriptの関数書き方一覧

js
JavaScriptでは関数の書き方も様々です。

よくみかけるお馴染みのヤツもあれば、「あれ、この記述は前にネットで見たのと微妙に違うな」と思う書き方のものもあります。

今回はそんな微妙に違う関数の書き方をまとめていこうと思います。

[スポンサーリンク]

もくじ

無名関数
関数宣言
無名関数と関数宣言の違い
コンストラクタ関数
アロー関数(引数2つ以上)
アロー関数(引数1つ)
アロー関数(引数なし)

無名関数

こちらはメジャーな書き方ですね。
関数名は決めずに変数に格納して関数を使う方法です。

let sum1 = function(x, y){
    var result = x+y;
    console.log("合計値は" + result + " です。");
}

上記の関数の呼び出し方はこのようになります。

sum1(1, 2);

関数宣言

JavaScriptの関数といえば、この書き方が一番メジャーではないでしょうか。
関数名を宣言する書き方です。

function sum2 (x, y){
    var result = x+y;
    console.log("合計値は" + result + " です。");
}

上記の関数の呼び出し方はこのようになります。

sum2(1, 2);

一見すると無名関数と大きな違いがないように見えますよね。

次で無名関数と関数宣言の違いについて説明していきます。

無名関数と関数宣言の違い

さて、先程でてきました無名関数と関数宣言の違いですが、書き方が微妙に違うだけじゃなくて、どこから呼び出すことができるのかというのが大きな違いになります。

関数宣言では、関数の前後ろどちらからでも関数を実行することができます。
これは、関数宣言の場合だとホイストされているから前後どちらからもで実行できるということです。

sum2(1, 2);
function sum2 (x, y){
    var result = x+y;
    console.log("合計値は" + result + " です。");
}
sum2(10, 20);

しかし、無名関数でこれをやってしまうとエラーになってしまいます。
必ず無名関数を定義した後で関数を呼び出す必要があります。
ようは、無名関数はホイストされない。ということですね。

// ここはエラーになる。
sum1(1, 2);
let sum1 = function(x, y){
    var result = x+y;
    console.log("合計値は" + result + " です。");
}
// ここはエラーにならない。
sum1(1, 2);

無名関数と関数宣言の大きな違いとしては、

  1. 関数制限の場合だと、どこからでも関数が呼べる
  2. 無名関数の場合だと、関数定義後でないと関数が呼べない

ということになります。

コンストラクタ関数

こちらも馴染みのある関数の種類ですね。
オブジェクトを生成するための関数をコンストラクタと称します。

let sum3 = new Function('x', 'y', 'return x+y');

上記の関数の呼び出し方はこのようになります。

console.log("合計値は" + sum3(100,200) + " です。");

上記のサンプルだとちょっと馴染みがないように感じますが、こちらだとどうでしょうか?

function car(name) {
    this.name = name;
}
var mycar = new car("プリウス");
console.log("名前 : " + mycar.name);

こちらだとお馴染みの書き方ですよね。

オブジェクトを作成して値をセットするためにここではコンストラクト関数を使っています。

アロー関数(引数2つ以上)

ここからはES6から導入されたアロー関数を紹介していきます。
このアロー関数ですが、引数がある場合、無い場合、引数の数によって記述方法を変えることができるので、サンプルソースを紹介しているサイトによっては表記が多少異なってくることもあると思います。

ではまずは引数が2つ以上の場合の書き方を見ていきましょう。

let sum4 = (x, y) => {
    var result = x+y;
    console.log("合計値は" + result + " です。");
}

関数の呼び出し方は今まで通りと変わりありません。

sum4(1000,2000)

アロー関数を使うメリットですが、公式サイトによるとthisを束縛したくないこととあります。

このthisを束縛しないというのはどういうことでしょうか?

これはいわゆるbind()関数や、that変数を使って、関数が参照するthisの値を指定してきたことをアロー関数を使ってカバーするということです。

言い換えますと、アロー関数を使うとbind()関数やthat変数を使わなくても、コンストラクタが定義したthisを参照することができる。というのがアロー関数を使う上での最大のメリットとなります。

アロー関数(引数1つ)

引数が1つの場合は、()を省略することが可能です。

let sum5 = x => {
    console.log("引数は" + x + " です。");
}

アロー関数(引数なし)

引数無しの場合は、()を省略することができません。

let sum6 = () => {
    console.log("引数はなしです。");
}

さいごに

JavaScriptの関数は色々な書き方がありますが、一通りおさえておいたほうが色々なサイトや書籍を見たときに混乱しなくてすみます。

特にアロー関数のところはおさえていて損はないと思います。最近の解説サイトでも頻繁に目にしますし。

JavaScriptの関数はしっかりとおさえておきましょう。

それでは!