JavaScript 関数

JavaScriptの関数は特定のタスクを実行するために設計されたコードブロックです。

JavaScriptの関数は、「何か」がそれを呼び出したときに実行されます。


// p1とp2の積を計算する関数
function myFunction(p1, p2) {
  return p1 * p2;
}

JavaScript関数の構文

JavaScriptの関数はfunctionキーワードで定義され、その後に名前が続き、その後に括弧 () が続きます。

関数名には、文字、数字、アンダースコア、ドル記号(変数と同じルール)を含めることができます。

括弧内には、カンマで区切られたパラメータ名を含めることができます:


function name(parameter1, parameter2, parameter3) {
  // 実行されるコード
}

関数のパラメータは、関数定義の括弧 () 内にリストアップされます。

関数引数は、関数が呼び出されたときに関数によって受け取る値です。

関数の内部では、引数(パラメータ)はローカル変数として振る舞います。

関数の呼び出し

関数の内部のコードは、「何か」が関数を呼び出すときに実行されます:

  • イベントが発生したとき(ユーザーがボタンをクリックしたとき)
  • JavaScriptコードから呼び出されたとき
  • 自動的に(自己呼び出し)

関数の呼び出しについては、後のチュートリアルでさらに詳しく学びます。

関数の戻り値

JavaScriptがreturn文に到達すると、関数の実行は停止します。

関数がステートメントから呼び出された場合、JavaScriptは呼び出しステートメントの後にコードを「返して」実行します。

関数はしばしば戻り値を計算します。戻り値は「呼び出し元」に「返されます」:


// 二つの数値の積を計算し、結果を返す関数
function myFunction(a, b) {
  return a * b;
}

なぜ関数を使うのか?

関数を使うことで、コードを再利用することができます。

同じコードを何度も使うことができます。

異なる引数を使って同じコードを使うことで、異なる結果を生成することができます。

()演算子

()演算子は関数を呼び出します:


// 華氏から摂氏に変換する関数
function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}

let value = toCelsius(77);

不正確なパラメータで関数にアクセスすると、不正確な答えが返されることがあります:


// 華氏から摂氏に変換する関数
function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}

let value = toCelsius();

()なしで関数にアクセスすると、関数の結果ではなく関数そのものが返されます:


// 華氏から摂氏に変換する関数
function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}

let value = toCelsius;

重要

上記の例からわかるように、toCelsiusは関数オブジェクトを参照し、toCelsius()は関数の結果を参照します。

関数を変数の値として使用する

関数は変数と同じように使うことができます。すべての種類の数式、代入、計算で使用することができます。


// 関数の戻り値を変数に格納する代わりに
let x = toCelsius(77);
let text = "気温は " + x + " 摂氏度です";

関数を直接、変数の値として使用することができます:


// 関数の戻り値を変数に格納する代わりに
let text = "気温は " + toCelsius(77) + " 摂氏度です";

関数については後のチュートリアルでさらに詳しく学びます。

ローカル変数

JavaScriptの関数内で宣言された変数は、その関数にローカルになります。

ローカル変数はその関数内からしかアクセスできません。


// ここではcarNameを使用できません

function myFunction() {
  let carName = "Volvo";
  // ここではcarNameを使用できます
}

// ここではcarNameを使用できません

ローカル変数はその関数が開始されるときに作成され、関数が完了すると削除されます。