JavaScriptにおけるシャローコピーとディープコピーの違い

const original = { a: 1, b: { c: 2 } };
const copied = Object.assign({}, original);

console.log(copied); // { "a": 1, "b": { "c": 2 } }
console.log(original); // { "a": 1, "b": { "c": 2 } }

/**
 * コピーしたデータのcの値を変更した場合
 */
copied.b.c = 3;

// コピーデータの出力結果
console.log(copied); // { "a": 1, "b": { "c": 3 } }

// オリジナルデータの出力結果
console.log(original); // { "a": 1, "b": { "c": 3 } }

// コピーデータとオリジナルデータの比較
console.log(copied.b.c === original.b.c); // true 

const original = { a: 1, b: { c: 2 } };
const copied = { ...original };

console.log(copied); // { "a": 1, "b": { "c": 2 } }
console.log(original); // { "a": 1, "b": { "c": 2 } }

/**
 * コピーしたデータのcの値を変更した場合
 */
copied.b.c = 3;

// コピーデータの出力結果
console.log(copied); // { "a": 1, "b": { "c": 3 } }

// オリジナルデータの出力結果
console.log(original); // { "a": 1, "b": { "c": 3 } }

// コピーデータとオリジナルデータの比較
console.log(copied.b.c === original.b.c); // true

const originalArray = [1, 2, [3, 4]];
const copiedArray = originalArray.slice();

console.log(copiedArray); // [1, 2, [3, 4]]
console.log(originalArray); // [1, 2, [3, 4]]

/**
 * コピーした配列内にある配列のデータを変更した場合
 */
copiedArray[2][0] = 5;

// コピーデータの出力結果
console.log(copiedArray); // [1, 2, [5, 4]]

// オリジナルデータの出力結果
console.log(originalArray); // [1, 2, [5, 4]]

// コピーデータとオリジナルデータの比較
console.log(copiedArray[2][0] === originalArray[2][0]); // true

const originalArray = [1, 2, [3, 4]];
const copiedArray = [].concat(originalArray);

console.log(copiedArray); // [1, 2, [3, 4]]
console.log(originalArray); // [1, 2, [3, 4]]

/**
 * コピーした配列内にある配列のデータを変更した場合
 */
copiedArray[2][0] = 5;

// コピーデータの出力結果
console.log(copiedArray); // [1, 2, [5, 4]]

// オリジナルデータの出力結果
console.log(originalArray); // [1, 2, [5, 4]]

// コピーデータとオリジナルデータの比較
console.log(copiedArray[2][0] === originalArray[2][0]); // true

const deepCopy = obj => JSON.parse(JSON.stringify(obj));

/**
 * ディープコピーの作成
 *
 * @param Object source //  コピー元のオブジェクト。
 * @param WeakMap　alreadyCopy // 既にコピーしたオブジェクトの追跡
 * @returns Object // コピーされたオブジェクト。
 */
function deepCopy(source, alreadyCopy = new WeakMap()) {
    // プリミティブな値（文字列、数値、真偽値など）、null、またはオブジェクトでない場合、そのまま返す
    if (source === null || typeof source !== 'object') return source;

    // 既にコピーしたオブジェクトの場合、そのコピーを返す
    if (alreadyCopy.has(source)) return alreadyCopy.get(source);

    // 特定のオブジェクト型の場合の処理
    // 正規表現オブジェクト
    if (source instanceof RegExp) return new RegExp(source);
    // 日付のオブジェクト
    if (source instanceof Date) return new Date(source);

    // 新しいオブジェクトのインスタンスを作成
    const copy = new source.constructor();
    // コピーの追跡
    alreadyCopy.set(source, copy);

    // すべてのプロパティを再帰的にコピー
    for (const key in source) {
        if (source.hasOwnProperty(key)) {
            copy[key] = deepCopy(source[key], alreadyCopy);
        }
    }
    
    return copy;
}

const original = {
    a: 1,
    b: "hello",
    c: [1, 2, 3]
};

const copied = deepCopy(original);

console.log(copied);  // {"a": 1, "b": "hello", "c": [1, 2, 3]}
console.log(original);  // {"a": 1, "b": "hello", "c": [1, 2, 3]}

/**
 * コピーしたデータのcの値を変更した場合
 */
copied.c.[0] = 3;

// コピーデータの出力結果
console.log(copied);  // {"a": 1, "b": "hello", "c": [3, 2, 3]}

// オリジナルデータの出力結果
console.log(original); // {"a": 1, "b": "hello", "c": [1, 2, 3]}

// コピーデータとオリジナルデータの比較
console.log(original.c.[0] === copied.c.[0]); // false

const _ = require('lodash');
const copied = _.cloneDeep(original);