JavaScript | 「引数」を使って関数にデータを渡す

JavaScript

2020.08.022025.10.28

主な内容の要点

主な内容の要点

JavaScriptの関数に値を渡すときに使う「引数」について解説されています。引数は関数にデータを渡す仕組みで、数が合わなくてもエラーにならず、工夫次第で柔軟に使えます。

1. 引数の基本

関数を定義するときに (param1, param2, ...) のように書く
関数を呼び出すときに (値1, 値2, ...) を渡す
渡された値は関数内で変数として使える

function dispMessage(msg) {
  console.log(msg);
}

dispMessage("Hello"); // → Hello
dispMessage(100);     // → 100

function dispMessage(msg) {
  console.log(msg);
}

dispMessage("Hello"); // → Hello
dispMessage(100);     // → 100

JavaScript

2. 引数の数が合わない場合

少ないとき → 指定されなかった引数は undefined になる
多いとき → 余分な値は無視される

function dispProfile(name, age) {
  console.log("name:", name);
  console.log("age:", age);
}

dispProfile("Yamada", 24);   // name: Yamada, age: 24
dispProfile("Suzuki");       // name: Suzuki, age: undefined
dispProfile("Tanaka", 30, "Tokyo"); // 3つ目は無視される

function dispProfile(name, age) {
  console.log("name:", name);
  console.log("age:", age);
}

dispProfile("Yamada", 24);   // name: Yamada, age: 24
dispProfile("Suzuki");       // name: Suzuki, age: undefined
dispProfile("Tanaka", 30, "Tokyo"); // 3つ目は無視される

JavaScript

3. デフォルト値

引数に あらかじめ値を設定しておける
値が渡されなかったときに、そのデフォルト値が使われる

function dispOrderPrice(price, count = 10) {
  console.log("Total =", price * count);
}

dispOrderPrice(80, 14); // → 1120
dispOrderPrice(120);    // → 1200 (countは10が使われる)

function dispOrderPrice(price, count = 10) {
  console.log("Total =", price * count);
}

dispOrderPrice(80, 14); // → 1120
dispOrderPrice(120);    // → 1200 (countは10が使われる)

JavaScript

4. 可変長引数（Rest Parameter）

... を使うと、いくつでも引数を受け取れる
受け取った値は配列として扱える

function calcSum(...nums) {
  let sum = 0;
  for (let n of nums) sum += n;
  return sum;
}

console.log(calcSum(1, 2, 3));       // → 6
console.log(calcSum(1, 2, 3, 4, 5)); // → 15

function calcSum(...nums) {
  let sum = 0;
  for (let n of nums) sum += n;
  return sum;
}

console.log(calcSum(1, 2, 3));       // → 6
console.log(calcSum(1, 2, 3, 4, 5)); // → 15