【JavaScript】初心者向け関数の書き方３種類

JavaScriptではいろいろな関数の書き方が存在し、
それが初心者にとって難しく、つまずいてしまうポイントでもある。

今回はその関数の書き方一覧を紹介する。

１．他のプログラミング言語と似てる書き方
２．変数定義っぽく書く方法
1. 変数定義っぽく書いているけどちょっと違う書き方
３．アロー関数
番外編：即時関数
まとめ

１．他のプログラミング言語と似てる書き方

function 関数名(引数) {
  // 処理
}

functionというキーワードを使って、関数名を定義する。

function doubleNum(number) {
  return number * 2;
}

const a = doubleNum(3);
console.log(a);  // 出力結果は「6」

C言語やJavaなどはこんな感じで書くことが多いので、
そういったプログラミング言語を知っている人だったら理解しやすい形式。

２．変数定義っぽく書く方法

const 関数名 = function(引数) {
  // 処理
}

関数名を変数のように定義し、その中に関数の機能を代入するようなイメージ。

const doubleNum = function(number) {
  return number * 2;
}

const a = doubleNum(3);
console.log(a);  // 出力結果は「6」

この関数宣言の方法は、あまり他のプログラミング言語には見られない。

ここではあまり詳しくは解説しないが、JavaScriptでは
「数値や文字列、関数は全部オブジェクト。
だから数値や文字列が変数に代入できるのと同じように、関数も変数の中にしまうことができる。」
という考え方をしているため、このように変わった記述をすることができる。

変数定義っぽく書いているけどちょっと違う書き方

関数名: function (引数) {
  // 処理
}

他の人が書いたソースコードを見ると、関数をこんな感じで定義しているケースも存在する。
似ているようでちょっと違う書き方で混乱すると思うが、安心して欲しい。
これは「木を見て森を見ることができていない」状態にあるだけだ。

これは上記の「関数定義っぽく書く方法」と意味は全く同じであるが、
この関数がオブジェクトの要素かどうかを見落としている。

オブジェクトは、例えば以下のようなものだ。

// 名前が「yamada」、年齢が「20」、スキルが「htmlとcssとjavascript」のyamadaオブジェクト
const yamada = {
  name: 'yamada',
  age: 20,
  skill: ['html', 'css', 'javascript']
}

このyamadaさんが、挨拶をできるようになった場合を考えると分かりやすい。
このオブジェクト内に挨拶をする関数を定義する場合は、以下のように記述する。

const yamada = {
  name: 'yamada',
  age: 20,
  skill: ['html', 'css', 'javascript'],
  hello: function () { console.log('こんにちは！'); }
}

yamada.hello(); // 「こんにちは！」と出力される

つまり、「hello」という変数に関数が格納されている点は同じだが、
この場合は「hello」そのものがオブジェクトの中の要素だった、というだけである。

３．アロー関数

アロー関数は「=>」というキーワードを使って記述する方法で、
このような形式で書かれる。

() => {
}

厳密にはfunctionを使った関数定義とは扱いが異なる部分があるが、
初心者的には関数の省略記法と考えてもらうのが一番理解しやすいと思う。

とことん書き方を省略するために、以下のように書いてもOKになっている。

// 普通に書く
(引数1, 引数2) => {
  return 返り値
}

// 引数がない場合
() => {
  return 返り値
}

// 引数が一つしかない場合、()を省略可能
引数 => {
  return 返り値
}

// 中身が1行の場合、returnすら省略
引数 => 返り値

もちろんfunctionと同じく変数定義っぽく書くことも可能。

// 関数の定義
const hello = () => {
  console.log('hello');
}

// 関数の実行
hello();

詳しくはこちらを見るのが確実ではある。

アロー関数式 - JavaScript | MDN

アロー関数式は、従来の関数式の簡潔な代替構文ですが、意味的な違いや意図的な使用上の制限もあります。

番外編：即時関数

即時関数とは、関数を定義したと同時に実行までしてしまうものである。

関数の定義の仕方とは少し異なるが、ついでなので軽く触れておく。

先ほどの「JavaScriptでは全てがオブジェクトである」という考え方を利用し、
関数をオブジェクトとして扱い、すぐに実行している。

下記の「書き方１」から理解すると分かりやすい。

// 書き方1
(関数定義)(引数);

// 関数は変数に代入できる
const greet = function() {
  console.log('hello');
}

// 考え方↓
// 定義した変数に()をつけると実行される
greet(); // →「hello」が出力される

// ということは、関数定義した瞬間に()を付けたらそのまま実行できる！
// 関数定義を全部()で囲んで、先に処理するようにする
(function() {
  console.log('hello');
})();
// →「hello」が出力される

// 書き方2：こちらの書き方の方が使われることが多い
(関数定義(引数));

// 書き方2の例
(function() {
  console.log('hello');
}());

実際に実行してみると、以下のようになる。