JavaScript入門 #12 - 関数の基本

このシリーズについて

「JavaScript入門」第12回です。今回は、処理に名前を付けて再利用する関数を学びます。

関数とは

関数は、一連の処理をまとめて名前を付けたものです。

function greet() {
  console.log("こんにちは");
}

greet();

同じ処理を2回以上書きそうになったら、関数に分ける候補です。

Step 1: 関数宣言を書く

function を使って関数を定義します。

function sayHello() {
  console.log("Hello");
}

sayHello();
sayHello();

関数は、呼び出した時に実行されます。定義しただけでは動きません。

Step 2: 引数を使う

引数を使うと、外から値を渡せます。

function greet(name) {
  console.log(`${name}さん、こんにちは`);
}

greet("Taro");
greet("Yuki");

同じ処理でも、渡す値によって結果を変えられます。

Step 3: 戻り値を使う

return を使うと、関数の結果を呼び出し元へ返せます。

function add(a, b) {
  return a + b;
}

const result = add(10, 5);
console.log(result);

console.log するだけの関数と、値を返す関数は役割が違います。

Step 4: アロー関数を書く

JavaScriptでは、アロー関数もよく使います。

const multiply = (a, b) => {
  return a * b;
};

console.log(multiply(3, 4));

短い処理なら、次のようにも書けます。

const double = (number) => number * 2;

console.log(double(5));

配列メソッドのコールバックでもよく使います。

Step 5: 関数に分ける

税込価格を計算する処理を関数にします。

function calculateTaxIncludedPrice(price, taxRate) {
  return Math.floor(price * (1 + taxRate));
}

const price = calculateTaxIncludedPrice(1200, 0.1);

console.log(price);

関数名は「何をする関数か」が分かる名前にします。

練習

functions.js を作り、合格判定関数を書きます。

function isPassed(score) {
  return score >= 70;
}

console.log(isPassed(80));
console.log(isPassed(60));

よくあるエラー

次のステップ

JavaScript入門 #13 - スコープと巻き上げ で、変数がどこから見えるのかを学びます。

まとめ

関数は、処理を再利用し、コードを読みやすくするための基本です。引数で値を受け取り、return で結果を返します。アロー関数も、配列メソッドやイベント処理でよく使います。

参考リソース

• MDN: 関数
• MDN: アロー関数式

×

PR

×

PR