객체와 배열의 복사를 하기 위해서는 어떻게 해야할까?
let profile1 ={
name:"철수",
age:8,
school:"다람쥐초등학교"
}
let profile2 = profile1
을 할 경우에는 두개의 객체는 같은 값들을 가지고 있다.
그래서 나는 profile2의 값을 바꾸고 싶어서
profile2.name = "영희" 를 입력했다.
그랬더니 profile1의 값 또한 바뀌었다.
그 이유는 객체와 배열은 참조자료형이기 때문에
선언과 동시에 메모리의 공간을 할당받아
거기서부터 속에 담겨져있는 데이터를 담아놓고 있는데
지금 우리가 바꾼 것은 할당받은 공간의 주소 를 바꿨기에 둘 다 값이 바뀌게 되는 것이다.
그럼 어떠한 방식을 사용해야 복사를 할 수 있을까?
js에서 복사에는 2가지 종류가 존재한다, 얕은 복사와 깊은 복사 그럼 한개씩 알아보도록 하자
얕은 복사(Shallow Copy)
name:"철수", age:8, school:"다람쥐초등학교" } let profile2 ={ name:profile1.name, age:profile1.age, school:profile1.school }```
위와 같은 방법으로 하면 서로 간섭을 받지 않는 상태가 된다.
하지만 이러한 방법은 내용이 많을수록 직접 타이핑하는 것이 빠를 수 있어서
(...변수 or 상수의 이름)의 형식으로 사용하고
스프레드(흩뿌리다)라고 읽고 뒤에 적힌 것의 모든 것을 전부 넣는 의미
를 가진 메소드를 사용할 수 있다.
name:"철수", age:8, school:"다람쥐초등학교" } let profile1 = { ...profile1 }
이러한 것을 얕은 복사(Shallow Copy) 라고 이야기를 한다.
하지만 조금만 더 생각을 해보면 불가능한 것이 나온다.
바로 객체는 메모리에 할당을 받은 구조로 이루어져있기 때문에 값의 수정이 불가능했는데, 객체 속에 객체가 있을 경우에는 다른 방법을 찾아봐야한다.
그래서 나온 방법이 깊은 복사 (Deep Copy)인데
그 자체를 완벽하게 복사를 하여, 원래의 값에 변화가 없는 복사를 이야기한다.
방법은 여러가지가 있지만, 두가지를 알려주셨는데
첫번째 방법 쓰는 방법은 간단하나, 상당히 무거워서 실무에서는 사용하지 않는다고 말씀을 해주셨다.
바로 JSON.stringify() 를 사용하면 속의 내부 값을 모두 문자열로 바꿔주고
JSON.parse()를 이용해서 문자열의 구문을 분석하여 객체와 배열로 생성해주는 방법을 통해서 아예 새로운 객체를 생성할 수 있다고 한다.
두번째 방법은 실무에서는 npm의 lodash라는 라이브러리를 통해서 한다고
이것은 따로 알아보는게 좋다고 이야기를 해주셨다.
REST 파라미터
이것은 다양한 용도로 사용하지만
오늘은 객체의 일부 데이터를 지우고 새로운 객체로 만들 경우에 활용하는 법을 알았다.
활용방법은 이와 같다.
const child = { name:"철수", age:8, school:"다람쥐초등학교" ,money:2000,hobby:"수영" } const {school , ...rest} = child
는 rest라고 작성하는 것은 관례같은 것이라 아무렇게나 적어도 상관없다.
하지만 이것 또한, 객체 속 객체의 구조로 되어있을 경우에는 기존 값을 변화시키므로 단순한 구조일 경우에만 사용이 가능할 것 같다.
만약 대입해서 복사를 할 경우, 왜 값이 바뀌는지 이해가 되지 않는다면
아래 글을 참고해보면 이해가 빠를 것이다.
