JavaScriptの開発において、複数のデータ構造（配列やオブジェクト）を一つにまとめる操作は頻繁に発生します。ここでは、jQueryのメソッドと標準的なJavaScriptの機能を活用した、効率的な結合およびコピーの手法について解説します。

1. 配列の結合

1.1 concatメソッドによる非破壊的な結合

concatメソッドは、既存の配列に他の配列や値を結合した新しい配列を返します。元の配列は変更されません。

const groupA = ["Tokyo", "Osaka"];
const groupB = ["Nagoya", "Fukuoka"];

const allCities = groupA.concat(groupB);

console.log(allCities); // ["Tokyo", "Osaka", "Nagoya", "Fukuoka"]
console.log(groupA);    // ["Tokyo", "Osaka"] （元の配列は維持される）

1.2 ループ処理による要素の追加

特定の条件に基づいた結合や、メモリ効率を考慮して既存の配列を直接拡張したい場合は、ループ処理を用います。

const primaryNumbers = [2, 3, 5];
const extraNumbers = [7, 11];

for (let i = 0; i < extraNumbers.length; i++) {
    primaryNumbers.push(extraNumbers[i]);
}

console.log(primaryNumbers); // [2, 3, 5, 7, 11]

1.3 applyメソッド（またはスプレッド構文）による一括追加

push.applyを使用すると、配列の要素を別の配列に一括で追加できます。現代のJavaScript環境では、スプレッド構文（...）を用いるのが一般的です。

const baseData = [100, 200];
const appendData = [300, 400];

// 従来の手法
Array.prototype.push.apply(baseData, appendData);

// もしくはスプレッド構文
// baseData.push(...appendData);

console.log(baseData); // [100, 200, 300, 400]

2. オブジェクトの結合

2.1 jQuery.extend() によるマージ

jQueryの$.extend()は、複数のオブジェクトを一つに統合する強力なメソッドです。

const settings = { theme: "dark" };
const options = { showSidebar: true };

// settingsオブジェクトが直接書き換えられる
$.extend(settings, options);
console.log(settings); // { theme: "dark", showSidebar: true }

// 新しいオブジェクトとして作成する場合
const newConfig = $.extend({}, settings, { version: "1.0" });
console.log(newConfig);

2.2 プロパティの反復代入

標準のループ処理を用いて、自有プロパティのみをコピーする方法です。hasOwnPropertyで継承されたプロパティを除外します。

const targetObj = { x: 10 };
const sourceObj = { y: 20, z: 30 };

for (let key in sourceObj) {
    if (sourceObj.hasOwnProperty(key)) {
        targetObj[key] = sourceObj[key];
    }
}
console.log(targetObj); // { x: 10, y: 20, z: 30 }

2.3 Object.assign() の活用

ES6以降では、Object.assign()を使用して複数のソースオブジェクトからターゲットオブジェクトへプロパティをコピーできます。

const userBase = { id: "user_01" };
const userProfile = { name: "Tanaka", age: 25 };
const userPermissions = { role: "admin" };

const fullUser = Object.assign(userBase, userProfile, userPermissions);

console.log(fullUser); // 全てのプロパティが統合される
console.log(userBase); // ターゲットとなったuserBaseも更新される

3. 浅いコピーと深いコピー（Shallow vs Deep Copy）

3.1 浅いコピー（Shallow Copy）

デフォルトの結合操作の多くは「浅いコピー」です。ネストされたオブジェクトが含まれる場合、参照情報のみがコピーされるため、コピー元の変更がコピー先にも影響します。

const original = { meta: { color: "red" } };
const shallowCopy = $.extend({}, original);

original.meta.color = "blue";
console.log(shallowCopy.meta.color); // "blue" （参照が同じため影響を受ける）

3.2 深いコピー（Deep Copy）

$.extend()の第一引数にtrueを渡すことで、再帰的にプロパティをコピーし、完全に独立した別個のオブジェクトを作成できます。

const source = { details: { status: "active" } };
const destination = {};

// 深いコピーを実行
$.extend(true, destination, source);

source.details.status = "inactive";
console.log(destination.details.status); // "active" （元の変更に影響されない）