関数

function square(n) { return n * n; } と一度書けば、square(4) は 16、square(9) は 81 というように、渡したどんな数にも答えを返します。

ひとまとまりの仕事に名前をつける

あなたはもう、ほかの人が書いた関数を使っています。console.log も Math.round も toUpperCase も、みな関数です。関数は、一つの仕事をする名前つきのコードのブロックです。一度定義すれば、あとは名前で何度でも呼び出せます。関数を使えば同じ行をあちこちにコピーせずにすみますし、プログラムを大きなまとまりで考えられるようになります。長い計算の並びではなく、「チップを計算して、それから代金を割りかんする」というようにです。

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Ana"));   // Hello, Ana!
console.log(greet("Ji"));    // Hello, Ji!

定義はキーワード function で始まり、次に関数の名前、そしてかっこの中に引数のリストが続きます。仮引数は、関数が呼び出されたときに値を受け取る変数で、ここでは name です。波かっこの中の本体が仕事をします。greet("Ana") と呼び出すと、実引数と呼ばれる値 "Ana" が仮引数 name に入り、本体が実行されます。

return は値を返す

キーワード return は関数を終わらせ、関数を呼び出した場所に値を送り返します。呼び出し greet("Ana") は式で、その値は返された値です。だから console.log の中にも、計算の中にも置けますし、変数に入れることもできます。const msg = greet("Ana"); のようにです。

値を返すことと表示することは別のことで、初心者はよく混同します。console.log を呼ぶだけの関数は画面に何かを表示しますが、何も返しません。その呼び出しは undefined と評価されるので、結果を計算に使うことはできません。原則として、関数には結果を返させ、表示するかどうかは呼び出す側のコードに決めさせましょう。

function addPrint(a, b) {
  console.log(a + b);
}
function add(a, b) {
  return a + b;
}

const x = add(2, 3) * 10;
console.log(x);      // 50
addPrint(2, 3);      // 5 と表示するが、使える値は返さない

return は関数をすぐに止めることもします。同じ道筋で return よりあとにある行は実行されません。これを使うと、特別な場合を先に処理できます。関数の先頭に if (n < 0) return "negative"; と書き、ふつうの場合はその下に書きます。

複数の引数と既定値

関数はコンマで区切った複数の仮引数をとることができ、実引数は順番どおりに対応します。add(2, 3) では a が 2、b が 3 です。呼び出しで実引数を省くと、その仮引数は undefined になります。何も渡されなかったときに使う既定値を仮引数につけることもできます。function tip(bill, rate = 0.15) は、呼び出す側が別の rate を渡さないかぎり 0.15 を使います。

アロー関数

今の JavaScript には、小さな関数を短く書く方法もあります。アロー関数です。const square = (n) => n * n; は、冒頭の square 関数と同じ意味です。本体が一つの式だけなら、波かっこも return キーワードもなしで、その値が自動的に返されます。今のコードではアロー関数をあらゆるところで見かけます。

中の変数は中にとどまる

関数の中で宣言した仮引数や変数は、その関数の中にしか存在しません。これをスコープと呼びます。二つの別々の関数がそれぞれ total という変数を持っても、たがいにじゃまし合いません。関数の外のコードは、その関数の中だけの変数を見ることができません。関数は外で宣言された変数を読むことはできますが、いちばんすっきりした関数は、必要なものをすべて引数で受け取り、すべてを return で返します。そうすれば、その関数だけを見て理解できます。