最速JavaScript講座

コアスクリプトを読み解き、スクリプトを使いこなすうえでもっとも重要な概念、それが『関数』です。
プログラミング言語における関数とは『複数の処理をひとまとめにして簡単に呼び出せるようにしたもの』です。
何度も実行したい処理を関数として定義しておけば、呼び出すだけで実行できます。
イベントコマンドにおける『コモンイベント』に近いもの、と考えればひとまずはOKです。

関数の定義

関数を実行するには、まず呼び出される関数を定義しなければいけません。

構文

function 『関数名』() {
  『実行したい処理』
}

例

function aaa() {
  console.log(111);
}

変数名と同様に関数名も自由に付けられます。一部を除く記号や予約語が使えないのも同じです。
とはいえ、実はスクリプトを使いこなすだけなら関数を定義する機会はほとんどありません。
しかしコアスクリプトというのは、実は膨大な関数の集まりなのです。
ここで関数について知っておくことは、スクリプトを学ぶうえでとても重要です。

関数の呼び出し

定義した関数を呼び出す式は以下の通りです。

構文

『関数名』();

例

aaa();

このように関数名の後ろに小カッコを付けて呼び出します。
イベントコマンドのスクリプトで記述する処理の大半は関数の呼び出しです。
なのでこの記述は確実に覚えておきましょう。

引数

関数を呼び出すとき関数の呼び出し先に対して、数値や文字列などを渡すことができます。
これを『引数』と呼びます。
引数の概念はコモンイベントにはないものなので戸惑うかも知れません。
ここでは数学における『関数』を思い出してみましょう。

y = f(x)

数学における関数には入力『x』と出力『y』という考え方がありました。
引数とは上の例で言うところの『x』に相当します。

まずは例を見てみましょう。

構文

function 『関数名』(『引数』) {
『実行したい処理』
}
『関数名』(『関数に渡す値』);

例

function outputSum(bbb, ccc) {
  console.log(bbb + ccc);
}
outputSum(10, 11);

例の処理を実行すると『21』がログとして出力されます。
処理の流れは以下の通りです。

• 関数『outputSum』の呼び出しで『10』と『11』を渡す。
• 関数『outputSum』に処理が移り、引数『bbb』に『10』が、引数『ccc』に『11』格納される。
• console.logでbbbにcccを加算した値、つまり21がログとして出力される。

戻り値

戻り値とは、関数を実行した結果です。再び数学における関数を思い出しましょう。

y = f(x)

上記の『y』が戻り値です。例を見てみましょう。

構文

function『関数名』() {
  return 『返したい値』
}
let aaa =『関数名』();

例

function getHundred() {
  return 100;
}
let bbb = getHundred();
console.log(bbb);

例の関数『getHundred』を実行すると、固定値の『100』が戻り値として返ってくるため、変数『bbb』には『100』が格納されます。

関数を変数に格納する

変数の型を解説したとき、関数という型があったのを覚えているでしょうか。
JavaScriptでは定義した関数を『変数』に入れられるのです。

構文

let 『関数名』= function() {
  『実行したい処理』
}
『関数名』();

例

let aaa = function() {
  console.log(1);
}
aaa();

引数を指定する場合は以下の通りです。

let aaa = function(bbb) {
  console.log(bbb);
}
aaa(1);

変数に定義できる、ということはオブジェクトのプロパティにも定義できます。
このことは非常に重要です。
オブジェクトのプロパティとして定義された関数を特別に『メソッド』と呼びます。
ただし、本項では最後まで『関数』という呼び方で統一します。

let aaa = {};
aaa.bbb = function() {
console.log(1);
}
aaa.bbb();

関数を変数に格納できるとどんな利点があるのでしょうか。
実のところ、イベントコマンドのスクリプトから、変数に関数を入れる機会はほとんどありません。
ですが、この事実を正しく理解しておくと、コアスクリプトに定義された関数を呼び出すとき、「どうしてこのように書くのか」を正確に理解できます。
なのでこの項では頭の片隅に入れておきましょう。

let aaa = (bbb) => {
  console.log(bbb);
}
aaa(1);

let aaa = bbb => console.log(bbb);
aaa(1);

let aaa = function(bbb) {
  console.log(bbb);
}
aaa(1);