[JavaScript] 얕은복사(Shallow Copy)와 깊은복사(Deep Copy)

깊은 복사 얕은 복사

코언즈 풀다가 제일 많이 막힌 곳

-핵심개념 : 객체(object)
1. 얕은 복사 : 데이터 같음, 주소 다음
2. 깊은 복사 : 데이터 다름, 주소 다름

-원시값 : 값을 복사할 때 복사된 값을 다른 메모리에 할당 => 원래 값과 복사된 값 영향x
-참조값 : 변수가 객체의 주소를 가치키는 값 => 같은 주소를 공유, 값 영향 o

이러한 특징 때문에 객체를 복사하는 방법은 크게 두가지로 나뉜다.

얕은 복사 Shallow Copy

객체 안의 객체가 있을 경우, 한개의 객체라도 원본 객체를 참고하고 있다면 ? 얕은 복사
1) Object.assign()
2) ...obj

깊은 복사 Deep Copy

객체 안에 객체가 있을 경우에도, 원본을 참조하지 않은 객체라면? 깊은 복사

위의 예제 같은 경우에는

변수 assignObj가 obj를 참조하고 있고, 객체 안의 객체{twins:}가 있으므로 얕은 복사이다.

따라서 객체 안의 데이터는 영향을 받지 않지만, 객체 안의 객체 데이터는 영향을 미친다!!!!

 it('Object를 함수의 전달인자로 전달할 경우, reference가 전달됩니다.', function () {
    const obj = {
      mastermind: 'Joker', //5. copiedObj의 속성 'James Wood'으로 변경
      // 1. 'Adam West'으로 변경
      // 6. 'Harley'으로 변경
      henchwoman: 'Harley', 
      relations: ['Anarky', 'Duela Dent', 'Lucy'],
      twins: {
        //7. 'Jared Leto'삭제
        'Jared Leto': 'Suicide Squad', 
        'Joaquin Phoenix': 'Joker',
        'Heath Ledger': 'The Dark Knight',
        'Jack Nicholson': 'Tim Burton Batman',
       
      },
    };

    function passedByReference(refObj) {
      refObj.henchwoman = 'Adam West';
    }
    //1. 함수 실행
    passedByReference(obj);
    expect(obj.henchwoman).to.equal('Adam West');
    //2. 변수 assignedObj 선언 : obj와 주소 공유
    const assignedObj = obj;
    //3. assignedObj의 속성을 변경=> obj의 속성도 변경
    assignedObj['relations'] = [1, 2, 3];
    expect(obj['relations']).to.deep.equal([1, 2, 3]);
    //4. 변수 copiedObj에 assign으로 할당!
    const copiedObj = Object.assign({}, obj);
    //5. copiedObj의 속성을 변경=> obj는 변경x
    copiedObj.mastermind = 'James Wood';
    expect(obj.mastermind).to.equal('Joker'); 
    //6. obj의 속성 변경 => obj는 변경x
    obj.henchwoman = 'Harley';
    expect(copiedObj.henchwoman).to.equal('Adam West' );
    //7. obj의 twins속성 중 'Jared Leto' 삭제 =>obj는 변경!
    // 왜 변경되느냐? 얕은 복사, 객체 안의 객체가 있을 경우 한개의 객체라도 원본 객체를 참조하고 있다면 데이터에 영향을 준다.
    delete obj.twins['Jared Leto'];
    expect('Jared Leto' in copiedObj.twins).to.equal(false); //