【JavaScript】関数の書き方一覧

マークアップ言語のイメージ画像 JavaScript

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

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

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

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

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

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

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

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

2.変数定義っぽく書く方法

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」そのものがオブジェクトの中の要素だった、というだけである。

3.アロー関数

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

() => {
}

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

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

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

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

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

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

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

アロー関数 - JavaScript | MDN
アロー関数式は、より短く記述できる、通常の function 式の代替構文です。また、this, arguments, super, new.target を束縛しません。アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。

番外編:即時関数

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

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

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

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

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

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

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

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

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

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

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

  • 1つ目:関数定義しか記述しなかったので「関数名を決めてくれ」と怒られる
  • 2つ目:書き方1で記述、「hello」が出力されていることが分かる
  • 3つ目:書き方2で記述、「hello」が出力されていることが分かる

ここまではfunctionを使って解説したが、
この即時関数はもちろんアロー関数でも表現することができる。

(() => console.log('hello'))();

こんなものがいきなりソースコード上に出てきたら嫌になるかもしれないが、
この記事で伝えた知識を使って一つ一つ分解して考えてみれば、
「あー、なるほどな」と思えるようになると思う。

まとめ

  • function」や「=>」が出現したら、それは関数である
  • 厳密には異なるが、初めのうちは「関数の書き方の違い」と理解しておく
  • (」から始まるものが出現したら、即時関数の可能性がある
タイトルとURLをコピーしました