メインコンテンツまでスキップ

関数

処理の共通化​

次のコードを見てください。

let sum1To10 = 0;
for (let i = 1; i <= 10; i++) {
  sum1To10 += i;
}
document.write(`<p>1から10の和は${sum1To10}です。</p>`);

let sum6To18 = 0;
for (let i = 6; i <= 8; i++) {
  sum6To18 += i;
}
document.write(`<p>6から18の和は${sum6To18}です。</p>`);
注記
  • +=は加算代入演算子で、左辺の変数に右辺の式の値を加えます。式自体の評価結果は加算後の変数の値です。
  • `（バッククォート）はテンプレートリテラルと呼ばれ、文字列中の${から}に囲まれた部分を JavaScript の式として評価して文字列中に展開します。

見ての通り、1 ～ 10、6 ～ 18、それぞれの和を計算して表示するプログラムです。しかしながら、前半と後半で重複する部分が多く、無駄な感じがします。

ヒント

情報の重複を許さないというルールはDRY 原則（Don't Repeat Yourself）と呼ばれ、高品質な製品を実現するための基本的な枠組みとなっています。

純粋な関数​

関数を用いると、決まった処理をひとまとまりとして扱い、その処理に名前を付けることができます。

function sum(from, to) {
  let result = 0;
  for (let i = from; i <= to; i++) {
    result += i;
  }
  return result;
}

document.write(`<p>1から10の和は${sum(1, 10)}です。</p>`);
document.write(`<p>6から18の和は${sum(6, 8)}です。</p>`);

JavaScript における関数は、functionキーワードから始まる 1 つのブロックです。

関数は、引数（ひきすう）をとることができます。sum(from, to)のfromやtoを仮引数と呼び、関数内でその引数の値を扱うための変数となります。

関数を呼び出す側、例えばsum(1, 10)における1や10を実引数と呼びます。この場合、sum関数側ではfromに1が、toに10が代入されて実行されます。

return文は、関数の中で到達すると、その時点で関数の実行を中断し、式の評価結果を確定させます。sum(1, 10)を実行してreturn result;まで到達したとき、resultは55ですので、式sum(1, 10)の評価結果は55となります。関数の評価結果を、その関数の戻り値と呼びます。

副作用を持つ関数​

関数は、数学のそれとは異なり、あくまでも処理のまとまりであって、値を返す必要はありません。上のコードは、以下のように書き直すことができます。

function showSum(from, to) {
  let result = 0;
  for (let i = from; i <= to; i++) {
    result += i;
  }
  document.write(`<p>${from}から${to}の和は${result}です。</p>`);
}

showSum(1, 10);
showSum(6, 18);

上記の例において、showSumはfromからtoまでの合計を計算して表示するための関数です。return文が存在しないので、値を返すことはありません。

ヒント

上記のsumのように、数学の関数と同じく、引数を受け取って値を帰すだけの関数を、純粋な関数と呼びます。

showSumは、関数内で画面に文字を表示するという、関数の外界に影響を及ぼす処理（副作用）を行っています。副作用を持つ関数は純粋な関数ではありません。

document.writeは、文字列を受け取ってそれを画面に表示させる、副作用を持つ関数であるといえます。

課題​

文字列strと整数countを受け取り、strをcount回繰り返し結合してその文字列を返す関数repeat(str, count)を作成してください。

document.write(repeat("*", 6)); // ******

のようにして、作成した関数を実際に実行してみてください。

備考

加算代入演算子は、+と同じく、文字列結合の用途にも使用できます。