오늘은 스파르타 코딩 클럽 부트캠프에서 제공된 JavaScript문법 강의 얕은 복사와 깊은 복사에대한 강의 내용을 정리해보며 복습하려고 한다.
일단 얕은 복사를 해보았다.
결과는
나는 changeName함수를 이용하여 user2의 이름을 바꾸었는데
결과화면을 보면 user의 이름까지 바뀐것을 확인할 수 있다.
newUser.name = newName; 처럼
객체의 프로퍼티(속성)에 접근해서 이름을 변경했기 때문에 가변이다.
자 그러면 user는 그대로 둔 채 user2만 바꾸고 싶다면?
새로운 객체를 리턴시킨다.
결과는
user의 name은 그대로 있고 user2의 이름만 변경된것을 확인할 수 있다.
하지만 이 방법도 문제점이 있다.
만약에 속성이 많아지면 return 해야하는 속성도 많아지기때문에
유지보수 면에서 좋지 않다.
그래서 아래의 방법을 활용하면
하드코딩을 하지 않아도 되는 장점이 있다.
결과를 보면
user의 이름은 그대로 있고 user2는 변경된 것을 확인할 수 있다.
또한 user과 user2는 같지 않다는것도 확인이 된다.
하디만 이 패턴도 중첩된 객체에 대해서는 완벽한 복사를 할 수 없다.
객체 안의 객체는 완벽한 복사를 할 수 없다.
객체 안의 객체는 여전히 주소를 복사해올 수 밖에 없다.
이유는 for in을 이용하여 한 뎁스만 돌면서 복사해오기 때문이다.
지금까지 얕은 복사에 대한 내용이였고
중첩에 대한 깊은 복사를 실습해보며 이해해보려고 한다.
위의 방식을 해결할 수 있는 방법은 재귀적 수행을 이용하여 완벽히 다른 객체를 반환하는 방법이다.
객체의 프로퍼티 중, 기본형 데이터는 그대로 복사 + 참조형 데이터는 다시 그 내부의 프로퍼티를 복사 => 재귀적 수행!
재귀적으로 수행한다?
함수나 알고리즘이 자기 자신을 호출하여 반복적으로 실행되는 것
이렇게 실행을 해보면,
obj2의 값을 변경하더라도 obj1의 값은 그대로 유지되는것을 확인할 수 있다.
마지막으로 JSON(JavaScript Object Notation)을 이용하는 방법도 존재한다. 하지만 단점이 좀 있어서 추천은 하지 않는다.
이렇게 얕은 복사와 깊은 복사에 대해 실습하며 내용을 정리해보았다.
