関数

処理の共通化

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

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>`);
note
  • +=は加算代入演算子で、左辺の変数に右辺の式の値を加えます。式自体の評価結果は加算後の変数の値です。
  • `（バッククォート）はテンプレートリテラルと呼ばれ、文字列中の${から}に囲まれた部分をJavaScriptの式として評価して文字列中に展開します。

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

tip

情報の重複を許さないというルールは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文が存在しないので、値を返すことはありません。

tip

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

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

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

課題

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

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

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

info

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

Edit this page