JavaScriptで値渡しを理解する5つの方法

JavaScriptの値渡しを理解するためのサンプルコード JS
この記事は約5分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptで値渡しを使いこなすことができるようになります。

値渡しにはいくつかの方法がありますが、ここでは5つの方法をサンプルコード付きで詳しく解説していきます。

●値渡しとは

JavaScriptでデータを扱う際、関数の引数や変数にデータを渡すことがよくあります。

このとき、データの種類によって渡し方が異なります。

JavaScriptにはプリミティブ型と参照型の2つのデータ型があります。

○プリミティブ型と参照型

プリミティブ型は、数値や文字列、真偽値などの基本的なデータ型です。

プリミティブ型の値渡しでは、データのコピーが渡されます。

一方、参照型はオブジェクトや配列などの複合データ型です。

参照型の値渡しでは、データへの参照が渡されます。

●値渡しの方法①:関数に引数として渡す

関数に引数として値を渡すことができます。

プリミティブ型の値を渡す場合、値のコピーが渡されます。

参照型の値を渡す場合、参照が渡されます。

○サンプルコード1

下記のサンプルコードでは、プリミティブ型の値(数値)と参照型の値(オブジェクト)を関数に引数として渡しています。

function exampleFunc(num, obj) {
  num = num + 1;
  obj.value = obj.value + 1;
}

let number = 1;
let object = { value: 1 };

exampleFunc(number, object);

console.log(number); // 1(変更されない)
console.log(object.value); // 2(変更される)

このコードでは、numberというプリミティブ型の値を関数exampleFuncに渡していますが、関数内での変更がnumberに影響を与えません。

一方、objectという参照型の値を渡すと、関数内での変更がobjectに影響を与えます。

●値渡しの方法②:配列やオブジェクトを使う

配列やオブジェクトを使って値を渡すことができます。

この方法では、プリミティブ型の値でも参照型のように扱うことができます。

○サンプルコード2

下記のサンプルコードでは、プリミティブ型の値(数値)をオブジェクトでラップして、関数に引数として渡しています。

function exampleFunc2(obj) {
  obj.num = obj.num + 1;
}

let object2 = { num: 1 };

exampleFunc2(object2);

console.log(object2.num); // 2(変更される)

このコードでは、object2というオブジェクトにプリミティブ型の値numを格納し、関数exampleFunc2に渡しています。

関数内での変更がobject2に影響を与えます。

●値渡しの方法③:クロージャを利用する

クロージャを利用して値を渡すことができます。

クロージャは、関数とその関数がアクセスできる変数(レキシカルスコープ)を一緒にしたものです。

○サンプルコード3

下記のサンプルコードでは、クロージャを利用してプリミティブ型の値を関数に渡しています。

function createClosure(value) {
  return function() {
    value = value + 1;
    return value;
  };
}

let closure = createClosure(1);
console.log(closure()); // 2
console.log(closure()); // 3

このコードでは、createClosure関数がクロージャを生成し、プリミティブ型の値valueを保持しています。

closure関数を実行することで、保持している値valueが変更され、その結果が返されます。

●値渡しの方法④:コールバック関数を使う

コールバック関数を使って値を渡すことができます。

コールバック関数は、ある関数が終了した後に実行される関数です。

○サンプルコード4

下記のサンプルコードでは、コールバック関数を利用してプリミティブ型の値を関数に渡しています。

function exampleFunc3(value, callback) {
  value = value + 1;
  callback(value);
}

let number2 = 1;

exampleFunc3(number2, function(newValue) {
  console.log(newValue); // 2
});

このコードでは、exampleFunc3関数にプリミティブ型の値number2とコールバック関数を渡しています。

exampleFunc3関数内でnumber2の値が変更された後、コールバック関数が実行され、変更された値が表示されます。

●値渡しの方法⑤:イベントリスナーを利用する

イベントリスナーを利用して値を渡すことができます。

イベントリスナーは、特定のイベントが発生したときに実行される関数です。

○サンプルコード5

下記のサンプルコードでは、イベントリスナーを利用してプリミティブ型の値を関数に渡しています。

const button = document.querySelector("button");

button.addEventListener("click", function() {
  let value = 1;
  value = value + 1;
  console.log(value); // 2
});

このコードでは、button要素にクリックイベントリスナーを追加しています。

ボタンがクリックされると、イベントリスナー内でプリミティブ型の値valueが変更され、その結果が表示されます。

まとめ

この記事では、JavaScriptで値渡しを行う5つの方法をサンプルコード付きで解説しました。

それぞれの方法がどのような状況で利用されるかを理解し、適切な場面で活用することが重要です。

  1. 直接関数に引数として渡す
  2. オブジェクトのプロパティに値を格納して渡す
  3. クロージャを利用する
  4. コールバック関数を使う
  5. イベントリスナーを利用する

それぞれの方法には、独自の特徴と利点があります。適切な方法を選択することで、コードの可読性や保守性を向上させることができます。

この記事を参考に、JavaScriptでの値渡しをマスターしましょう!