関数の作り方 — 処理に名前を付けて使い回す

関数は「処理のまとまりに名前を付けたもの」です。一度作れば、何度でも呼び出せます。料理でいえばレシピを書いておくようなものです。

いちばん単純な関数

script.js

// 作る
function sayHello() {
  console.log("こんにちは");
}

// 呼び出す
sayHello();

作っただけでは何も起きません。名前にかっこを付けて呼び出したときに、中の処理が動きます。ここは最初につまずくところなので、「作る」と「呼ぶ」は別、と覚えてください。

かっこの中に名前を書いておくと、呼び出すときに値を渡せます。これを引数と呼びます。同じ処理を、違う値に対して使い回せるようになります。

引数を受け取る

function sayHello(name) {
  console.log(name + "さん、こんにちは");
}

sayHello("ふじわら"); // ふじわらさん、こんにちは
sayHello("たなか");   // たなかさん、こんにちは

return を書くと、計算結果を呼び出し元に返せます。返された値は、変数に入れたり、そのまま使ったりできます。

CODE税込価格を計算する関数コードを書き換えると、すぐ下で動きます

税率や商品の値段を変えてみてください。関数はひとつだけで、何度でも使い回せます。

return が実行された時点で、関数はそこで終わります。return より後ろに書いた処理は動きません。これを利用して、条件に合わないときに早めに抜ける書き方もよく使われます。

同じ意味の2つの書き方

// function を使う書き方
function add(a, b) {
  return a + b;
}

// アロー関数
const add = (a, b) => {
  return a + b;
};

最近のコードではアロー関数をよく見かけます。意味はほぼ同じなので、読めれば十分です。書くときはどちらでも構いません。慣れないうちは function のほうが分かりやすいと思います。

特に3つ目が大事です。10行のコードに calculateTotal という名前を付けるだけで、読む人は中身を読まずに済みます。関数は、コードに見出しを付ける行為でもあります。

関数は「何かをするもの」なので、動詞から始めるのが定番です。getUserName、showMenu、calculateTotal のように書くと、呼び出す側を読んだだけで動きが想像できます。