[JavaScript] 얕은복사 vs 깊은복사

JS에서의 깊은복사, 얕은 복사를 공부해보자 . 그 전에, 구조분해할당과 spread 연산자를 알아보자.

구조분해할당

구조화 되어있는 배열, 객체와 같은 데이터를 destructuring 시켜서 각각의 변수에 담는것을 의미한다.

//배열의 구조분해 할당.
let arr = [1,2]
let[one,two] = arr

console.log(one,two) // 1, 2

//객체의 구조분해 할당.
//key와 변수이름이 동일해야한다.
let obj= {name:"otter", gender:"male"};
let {name, gender} = obj;

console.log(name, gender) // otter, male

값을 단순히 복사해서 넣는것이기 때문에 원본 데이터에 영향을 주지 않는다.

let arr = [1,2]
let [one, two] = arr
one = 3;

console.log(arr) // 1, 2

spread 연산자

하나로 뭉쳐있는 값들의 집합을 전개해주는 연산자이다. ... 를 사용한다

let arr = [1,2,3,4,5]
console.log(arr) //[1,2,3,4,5]
console.log(...arr) // 1,2,3,4,5

let str = "Hello"
console.log(str) // hello
console.log(...str) // h,e,l,l,o

깊은복사 vs 얕은복사
얕은복사 : 주소값까지만 복사한다.(heap의 주소) 깊은복사 : 실제 데이터까지 복사한다. (heap공간에 메모리를 새로 부여함.)

구조분해할당과 spread 연산자를 이용해 복사를 할 수 있다.

    let obj = {name:"otter", gender:"male"}
    let copy = obj;
    copy.name = "rabbit"
    console.log(obj.name)  //rabbit

    let copyObj = {...obj}
    obj.name = "cat"
    console.log(copyObj.name) //cat

이 경우, 객체 속 참조변수는 깊은복사가 되는것 같지만, 객체속에 객체가 있을경우엔 얕은복사가 진행된다.

    let origin = {
        name : "otter",
        age:25,
        favoriteFood:{
            first:"sushi"
            second:"hanburger"
        }
    }

    let copy = {...origin}
    origin.age = 22;
    origin.favoriteFood.first:"noodle"

    console.log(copy.age) //22
    console.log(copy.favoriteFood.first) //noodle . 객체 속 객체는 얕은복사

완벽한 깊은복사 진짜 깊은복사를 하고싶으면 객체를 json string으로 변경 후, 이걸 다시 객체로 변경해야한다.

let json = JSON.stringfy(origin);
let copy = JSON.parse(json);

Rest 파라미터 spread 연산자를 이용해 복사를 진행할 때, 불필요한 데이터는 제거하고 복사하고 싶을 수 있음.

    let origin = {
        name:"otter".
        age:20,
        petName:"cherry"
        hobby:"playingGame"
    }
    //rest는 변수명이기 때문에 변경가능.
    let {petName, hobby, ...rest} = origin
    console.log(rest) //{name:"otter",age:20};