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に影響を与えます。

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

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

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

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