JavaScript 関数宣言

更新日：2019-06-20

さて、JavaScriptで最もよくつかう関数について理解していきましょう。

関数はどのプログラミング言語でも重要なものですが、JSではその関数について特に重要な機能として、関数宣言と関数式という大きな区分けが存在します。今回は、関数宣言を扱って説明しますし、次回では関数式について書いていきます。

さらに関数式が理解できてくれば、「無名関数」や、その応用として「オブジェクトのメソッド」「即時実行関数」ということを理解することができます。それぞれ記事にしてきます。

このあたりが、JavaScriptでのプログラミングの一番の重要どころになってきます。ここがわかれば、もう怖いものなしな感じでJavaScriptを自在に使いこなしていけるでしょう。

サンプル

理解できやすいようにシンプルな例で説明していきます。

//[1]
function plus1(a, b) {
  return a + b;
}
console.log(plus1(1, 2)); // 3 と表示される

//[2]
console.log(plus2(3, 4)); // 7 と表示される
function plus2(a, b) {
  return a + b;
}

//[1]

function plus1(a, b) {

return a + b;

}

console.log(plus1(1, 2)); // 3 と表示される

//[2]

console.log(plus2(3, 4)); // 7 と表示される

function plus2(a, b) {

return a + b;

}

まず[1]です。plus1 という関数を宣言しています。これは、2つの引数(関数に渡される変数のことを引数と呼ぶ)を受け取って、足し算して、 return で値を返すように書かれたものです。

plus1(1, 2) が 3 という値になるので、console.log で表示しています。引数の値を変えれば結果が変わるわけです。

シンプルです。

そして、[2]です。[1]とほとんど同じで、plus2という関数を使って計算結果を出しているのですが、今度は、console.log で記述する後(下)で plus2 を実装しています。

これでも、正しく動作します。

JavaScriptの言語としてどのように動作するのか、ということになりますが、JavaScript はプログラムコードの全体の構文をチェックして、関数宣言などを解釈してから、全体のコードを上から実行していくような動きになります。

なので、[2]のconsole.log が実行される時には、その行より下にかかれている関数 plus2 が存在しているということは、JavaScriptを実行する側は把握しているということになります。

より詳しい情報を得たい人は「JavaScript 関数巻き上げ」というようなキーワードで検索してみてもいいかもしれません。「変数の巻き上げ」は有名なのですが、関数宣言の巻き上げという仕組みもあります。巻き上げという概念はちょっとむずかしいのと、本質的ではないのと、現在ではほとんど問題にならないので、詳しくはとりあげません。

今回の「関数宣言」については、これだけです。

どうですか？簡単でしょ？