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

はじめに
●値渡しとは
- ○プリミティブ型と参照型
●値渡しの方法①：関数に引数として渡す
- ○サンプルコード1
●値渡しの方法②：配列やオブジェクトを使う
- ○サンプルコード2
●値渡しの方法③：クロージャを利用する
- ○サンプルコード3
●値渡しの方法④：コールバック関数を使う
- ○サンプルコード4
●値渡しの方法⑤：イベントリスナーを利用する
- ○サンプルコード5
まとめ

はじめに

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に反映され、結果として num の値が変更されます。

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

クロージャは、関数とその関数がアクセスできる変数（レキシカルスコープ）を組み合わせたものです。

クロージャを利用することで、関数内部で値を保持し、その値を操作することができます。

○サンプルコード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 が変更され、その結果が表示されます。