JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでプリミティブ型とオブジェクト型を関数に渡す方法

JavaScriptでは、関数に引数として値を渡す際、プリミティブ型（文字列・数値・真偽値など）とオブジェクト型で挙動が異なります。

プリミティブ型とオブジェクト型の違い

プリミティブ型は「値渡し」で扱われます。関数に渡すとき、元の変数のコピーが渡されるため、関数内で値を変更しても元の変数には影響しません。

一方、オブジェクト型はオブジェクトへの参照（アドレス）が渡されるため、関数内でプロパティを変更すると、元のオブジェクトにも変更が反映されます。

サンプルコード

以下のコードでは、プリミティブ型とオブジェクト型をそれぞれ関数へ渡して処理しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 18px;
      font-weight: 500;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>プリミティブ型・オブジェクト型を関数に渡す</h1>
<div class="result"></div>
<div class="result"></div>
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、プリミティブ型とオブジェクトを関数に渡して実行します</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   let person = { name: "Rohan", age: 12, city: "Delhi" };
   // オブジェクトを受け取る関数
   function printObj(obj) {
      resEle.innerHTML = "名前 = " + obj.name + "<br>";
      resEle.innerHTML += "年齢 = " + obj.age + "<br>";
      resEle.innerHTML += "都市 = " + obj.city + "<br>";
   }
   // プリミティブ型を受け取る関数
   function printPrimitive(prim) {
      resEle.innerHTML += prim;
   }
   BtnEle.addEventListener("click", () => {
      printObj(person);
      printPrimitive(22);
   });
</script>
</body>
</html>

実行結果

上記コードを実行すると、次のような画面が表示されます。

JavaScriptでプリミティブ型とオブジェクト型を関数に渡す方法

「クリックしてください」ボタンをクリックすると −

JavaScriptでプリミティブ型とオブジェクト型を関数に渡す方法

ボタンをクリックすると、printObj(person) によってオブジェクトの各プロパティ（名前・年齢・都市）が出力され、続いて printPrimitive(22) によって数値 22 が表示されます。

ポイントまとめ

  • プリミティブ型（number、string、boolean など）は値そのものがコピーされて渡されるため、関数内での変更は呼び出し元に影響しない。
  • オブジェクト型は参照が渡されるため、関数内でプロパティを書き換えると元のオブジェクトも変わる。
  • オブジェクトの意図しない変更を避けたい場合は、スプレッド構文や structuredClone() を使って複製を作成してから渡すと安全です。
  1. JavaScriptでインポートしたオブジェクトを分割代入（デストラクチャリング）する方法

    JavaScriptでは、ESモジュールからインポートしたオブジェクトに対して分割代入（デストラクチャリング）を使うことで、必要なプロパティだけを個別の変数として簡潔に取り出すことができます。ここでは、import で読み込んだオブジェクトを分割代入する具体的な手順とコード例を紹介します。 ポイント：分割代入の基本構文 オブジェクトの分割代入は、次のように波括弧 { } の中に取り出したいプロパティ名を並べて記述します。let {プロパティ1, プロパティ2, プロパティ3} = オブジェクト;この構文は、インポートされたデフォルトエクスポートのオブジェクトにもそのまま適用できます。 コード例

  2. JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】

    はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。 サンプルコード 以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /