index.mdx

title	関数

import returnValueVideo from "./return-value.mp4";

処理の共通化

数学における関数は、数と数の関係のようなものですが、JavaScriptをはじめとしたプログラミング言語の文脈における関数は、基本的には文のまとまりに名前を付けたものです。

// 関数を定義しておけば
function greet() {
  document.write("Hello World!");
}

// 後から呼び出すことができる
greet();
greet();

上のプログラムにおいて、functionキーワードから始まる部分は関数を定義するための制御構文です。関数定義では、functionキーワードに続けて関数名、かっこを記述します。この後、関数内で実行したい処理を波かっこの中に記述していきます。

{/* prettier-ignore */} 関数を定義すると、関数名に続けてかっこを記述することにより、その関数を実行できるようになります。

このプログラムでは、greet関数が2回呼び出されているので、ブラウザにHello World!が2つ表示されます。

引数

{/* prettier-ignore */} 関数の振る舞いを呼び出し時に変更するため、関数に引数を与えることができます。引数には任意の値が指定できます。

function greet(greetingType, myName) {
  document.write("Good " + greetingType + ", " + myName + "!");
}

greet("morning", "佐藤");

{/* prettier-ignore */} 関数定義では、関数名直後のかっこ内に引数名をコンマ区切りで設定できます。上のプログラムでgreet関数は、greetingTypeやmyNameという名前の引数をとります。関数定義の中では、これらは変数のように振舞います。

呼び出し側では、括弧の中に関数に渡す引数を指定します。このプログラムを実行すると、ブラウザにGood morning, 佐藤!が表示されるでしょう。

戻り値

{/* prettier-ignore */} 関数呼び出しは式の一種です。関数定義内でreturn文を用いると、関数の実行が停止され、関数呼び出し式の評価結果が確定します。この値を戻り値と呼びます。ある値を戻り値として設定して関数の実行を終了することを、関数がその値を返すと表現します。

function add(a, b) {
  const sum = a + b;
  return sum;
}

document.write(add(3, 4));

上の例の6行目で、式add(3, 4)が評価されると、a = 3, b = 4としてadd関数が実行されます。add関数の中で文const sum = a + b;が実行されると、式a + bが評価され、7になります。これにより、sumに7が代入されます。次の行return sum;でadd関数は変数sumを評価した結果である、7を返します。そして式add(3, 4)の評価結果が7となります。