DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるJavaScript入門
  4. 関数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.9】

関数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.9】

JavaScriptの関数は他の言語より仕様が複雑です。コードを再利用できるようによく使う処理をまとめたものが通常の関数の定義です。JavaScriptの関数はコンストラクタという別な役割をもっています。今回は、ベーシックな関数の仕様を解説します。

関数の定義

自分で関数を定義して呼び出して使ってみましょう。

Atomで新規ファイルをつくり「文字列型 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.2】」で作った「js-study」フォルダ内に、「func1.html」というファイル名で保存します。

以下のコードを書いて保存します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
      function add(num1, num2) {
        return num1 + num2;
      }

      var sum = add(5, 6);
      console.log(sum);
    </script>
  </body>
</html>

Google Chromeで「func1.html」を開き、JavaScriptコンソールを開きます。11が出力されていれば成功です。

11
function 関数名(引数名, …) {
   …処理…
   return 戻り値;
}

関数名は任意です。変数名と同じルールが適用されます。

  • 関数名の先頭は半角アルファベット文字かアンダースコア、$記号でなければいけません。先頭に数字は使えません。
  • 2文字目以降は、半角アルファベット文字と数字、アンダースコアが使えます。
  • 大文字、小文字は区別されます。
  • JavaScriptの予約語は使えません。

関数名は「showName」のように単語の区切りを大文字で表すcamelCase記法で書くのがJavaScriptの慣例です。

引数名は関数内で使うことができる変数です。複数個置くことができます。関数を呼び出すときに、この引数にデータを渡します。

add(5, 6);のところで、関数を呼び出しています。引数に2つのデータを渡しています。5が関数本体側のnum1に、6が関数本体側のnum2に、代入されます。この56実引数num1num2仮引数といいます。

return 戻り値;戻り値は、関数を呼び出した側に戻す値です。
関数を呼び出す側のコードをみてみましょう。

var sum = add(5, 6);

代入演算子の右辺で呼び出しています。add関数は戻り値を返しますので、

var sum = 11

という状態になります。呼び出す側が戻り値に置き換わるイメージです。11sum変数に代入されます。

戻り値のない関数

戻り値のない関数も定義できます。
「js-study」フォルダ内に、「func2.html」というファイル名で保存します。
コードは<script>以前、</script>以降のコードは「func1.html」と同じなので掲載は省略しています。
以下のコードを書いて保存します。

function add (num1, num2) {
  console.log(num1 + num2);
}

var sum = add(5, 6);
console.log(sum);

実行すると、JavaScriptコンソールには

11
undefined

が出力されます。コードは似ていますが、関数内にreturn文がありません。この場合、undefinedが暗黙に返されます。
つまり、

var sum = add(5, 6);

var sum = undefined

となるわけです。undefinedsum変数に代入されます。

デフォルト引数

デフォルト引数を使うと、仮引数に適切なデフォルト値を用意することで、関数を呼び出す側は、少ない実引数で関数を呼び出すことができます。コードを書いて確認してみましょう。

「js-study」フォルダ内に、「func3.html」というファイル名で保存します。
コードは<script>以前、</script>以降のコードは「func1.html」と同じなので掲載は省略しています。
以下のコードを書いて保存します。

function add (num1, num2 = 3) {
  return num1 + num2;
}

var sum = add(5);
console.log(sum);

実行するとJavaScriptコンソールには8が出力されます。

8

関数本体側は引数を2つ準備していますが、num2は、num2 = 3となっています。これは実引数が渡されなかったならば、num2には3を使いますよという意味になります。

もし、実引数でしっかり値を2つ渡していれば、渡した実引数が処理され、num2 = 33は使われません。

var sum = add(5, 6);
console.log(sum);
11

実引数が足らない場合

もしデフォルト引数を使わず、実引数の数が少なかったらどうなるでしょうか。
「js-study」フォルダ内に、「func4.html」というファイル名で保存します。
コードは<script>以前、</script>以降のコードは「func1.html」と同じなので掲載は省略しています。
以下のコードを書いて保存します。

function add (num1, num2) {
  return num1 + num2;
}

var sum = add(5);
console.log(sum);

実行すると、エラーにならずNaNが出力されます。

NaN

add(5);で一つしか実引数を渡していません。5は、num1に代入されます。num2は渡される実引数もデフォルト引数もないため、undefinedが代入されます。

num1 + num2;は、5 + undefinedとなるのですが、計算が不可能と解釈し、JavaScriptはNaNを返します。NaNは、Not a Numberを表す特別な値です。

予期しないundefinedはバグの原因になりますので、本当に注意が必要です。

実引数が多い場合

逆に実引数が仮引数より多い場合も確認してみましょう。コードは書かなくても大丈夫です。

function add (num1, num2) {
  return num1 + num2;
}

var sum = add(5, 3, 8);
console.log(sum);

実行すると、エラーにならず8が出力されます。

8

実引数で3つデータを渡しています。関数本体側は2つしか用意していません。この場合は、多すぎる実引数は無視されます。

Rest parametersを使った可変長引数

Rest parametersを使うと、任意の数の実引数を、ひとつの仮引数の配列として受け取ることができる機能です。

「js-study」フォルダ内に、「func5.html」というファイル名で保存します。
コードは<script>以前、</script>以降のコードは「func1.html」と同じなので掲載は省略しています。
以下のコードを書いて保存します。

function add (...nums) {
  var tmp = 0;
  for (var v of nums) {
    tmp = tmp + v;
  }
  return tmp;
}

var sum = add(5, 3, 8, 10, 12);
console.log(sum);

実行すると、38が出力されます。

38

...numsがポイントで、numsは配列として渡された実引数を収納します。
numsの中は[5, 3, 8, 10, 12]となります。

「繰り返し処理(for文、for of文) ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.7】」で学んだ、for of文を使い、配列の要素をひとつづつ取り出し、計算しています。

add(5, 3, 8, 10, 12);

の部分は実引数は何個でも渡すことができます。

argumentsオブジェクトを使った可変長引数

Rest parametersが登場したので、古いテクニックですが一応解説しておきます。

関数ではargumentsオブジェクトという配列に似たオブジェクトを使うことができ、複数の引数をおさめることができます。forループやfor-ofループで引数を取り出すことができます。

  function add () {
    var tmp = 0;
    for (var v of arguments) {
      tmp = tmp + v;
    }
    return tmp;
  }

  var sum = add(5, 3, 8, 10, 12);
  console.log(sum);

実行すると、38が出力されます。

38

function add () {のように仮引数のところは空にして、関数本体でいきなりargumentsオブジェクトが登場します。argumentsオブジェクトは配列ではないが、配列に似たオブジェクトです。

現在のJavaScriptは配列として処理できるRest parametersが使われます。

名前付き引数

「js-study」フォルダ内に、「func6.html」というファイル名で保存します。
コードは<script>以前、</script>以降のコードは「func1.html」と同じなので掲載は省略しています。
以下のコードを書いて保存します。

function add ({ num1, num2 }) {
  return num1 + num2;
}

var sum = add({ num2: 7, num1: 6 });
console.log(sum);

実行すると、13が出力されます。

13

名前付き引数を使うと、引数の順番が自由になり、実引数の意味がわかるのでコードの可読性があがります。

function add ({ num1 = 3, num2 }) {
  return num1 + num2;
}
var sum = add({ num2: 7 });
console.log(sum);

このように仮引数側でデフォルト値を設定することも可能です。呼び出す側はデフォルト値が設定された引数を省略することができます。この場合、10が出力されます。

10

今回は基本的なところにしぼって関数の解説をしました。

スポンサーリンク

関連記事

プロフィール

DESIGNMAP
制作ディレクター
ON VISITINGを運営。
お問い合わせ