JavaScriptパラメータ渡し方！初心者向け10選

はじめに
●JavaScriptのパラメータとは
- ○パラメータの基本
●パラメータの渡し方
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptでパラメータを渡す方法が10通りも学べます。

JavaScript初心者にもわかりやすく解説しているので、ぜひ読んで理解を深めてください。

●JavaScriptのパラメータとは

JavaScriptで関数を扱う際に、関数に値を渡すために使われるものがパラメータです。

パラメータは関数の処理に影響を与えることができ、コードの再利用性や柔軟性を向上させます。

○パラメータの基本

パラメータは関数定義の際に引数として受け取り、関数内で利用できます。

例えば、2つの数値を足す関数は以下のように書けます。

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

この例では、aとbがパラメータで、関数addに渡された値がそれぞれ代入されます。

●パラメータの渡し方

JavaScriptでパラメータを渡す方法はいくつかあります。

ここでは10種類の方法を解説していきます。

○サンプルコード1：関数にパラメータを渡す

このコードでは、関数addに2つの数値を渡して、結果をコンソールに表示しています。

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

const result = add(3, 5);
console.log(result); // 8

○サンプルコード2：イベントリスナーを使ってパラメータを渡す

このコードでは、ボタンがクリックされたときに関数showMessageを実行し、メッセージをアラートで表示しています。

<button id="button">クリック</button>
<script>
  function showMessage(message) {
    alert(message);
  }

  const button = document.getElementById('button');
  button.addEventListener('click', () => showMessage('こんにちは！'));
</script>

○サンプルコード3：コールバック関数にパラメータを渡す

このコードでは、関数execCallbackに関数addと数値を渡し、結果をコンソールに表示しています。

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

function execCallback(callback, a, b) {
  const result = callback(a, b);
  console.log(result);
}

execCallback(add, 3, 5); // 8

○サンプルコード4：クロージャを使ってパラメータを渡す

このコードでは、関数createAdderを使って、別の関数add5を作成し、数値を足しています。

ここではクロージャを利用して、createAdderが返す関数がbaseパラメータを保持できるようにしています。

function createAdder(base) {
  return function (number) {
    return base + number;
  };
}

const add5 = createAdder(5);
console.log(add5(3)); // 8

○サンプルコード5：オブジェクトを使ってパラメータを渡す

このコードでは、オブジェクトを引数に取る関数showProfileを定義し、オブジェクトのプロパティを表示しています。

function showProfile({ name, age, hobby }) {
  console.log(`名前: ${name}, 年齢: ${age}, 趣味: ${hobby}`);
}

const profile = {
  name: '山田太郎',
  age: 30,
  hobby: '読書',
};

showProfile(profile); // "名前: 山田太郎, 年齢: 30, 趣味: 読書"

○サンプルコード6：デフォルトパラメータを設定する

このコードでは、関数greetの引数にデフォルト値を設定しています。

指定されなかった場合にデフォルト値が適用されます。

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

greet('鈴木'); // "こんにちは、鈴木さん！"
greet(); // "こんにちは、匿名さん！"

○サンプルコード7：可変長引数を使ってパラメータを渡す

このコードでは、関数sumに可変長引数を指定し、渡された数値の合計を計算しています。

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

○サンプルコード8：分割代入を使ってパラメータを渡す

このコードでは、分割代入を使って関数swapの引数を交換し、新しい配列を返しています。

function swap([a, b]) {
  return [b, a];
}

const result = swap([1, 2]);
console.log(result); // [2, 1]

○サンプルコード9：Promiseを使ってパラメータを渡す

このコードでは、wait関数を使って指定した時間後にメッセージを表示するPromiseを作成し、そのPromiseを解決してメッセージをコンソールに表示しています。

function wait(message, delay) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(message);
    }, delay);
  });
}

wait('こんにちは！', 1000).then((message) => console.log(message)); // 1秒後に"こんにちは！"が表示される

○サンプルコード10：Async/Awaitを使ってパラメータを渡す

このコードでは、wait関数と同様に指定した時間後にメッセージを表示するPromiseを作成し、async/awaitを使って非同期処理を行っています。

async function showMessage(message, delay) {
  const result = await wait(message, delay);
  console.log(result);
}

showMessage('おはよう！', 2000); // 2秒後に"おはよう！"が表示される