본문 바로가기
DEV/Javascript

[자바스크립트]스프레드 구분 ... (깊은 복사, 얕은 복사)

by 어쩌다개발 2023. 6. 7.
반응형

스프레드 구문은 ... 과 같이 점 세개를 연결해서 사용한다.
배열에 이용함으로써 내부 요소를 순차적으로 전개할 수 있다.

일반적인 함수 사용 방법

스프레드 구문 사용 방법

스프레드 구문은 요소를 모으는 데도 활용할 수 있다.

요소 모으기

요소 복사와 결합(깊은 복사)

얕은 복사는 주소의 참조값(주소값)을 복사하고, 깊은 복사는 객체의 실제 값만 복사한다.

새로운 배열 생성

두 개의 배열 결합

여러 객체 결합

여기서 객체의 속성이 같으면 어떻게 되는지 테스트 해보았다. 덮어씌어지는 걸 확인 할 수 있다.

등호를 사용해서 복사하면 안 되는 이유(얕은 복사)

등호를 이용하여 복사하면 배열이나 객체 등 '오브젝트 타입'이라 불리는 변수는 참조값 역시 상속되기 때문에 예상치 못 한 동작을 일으킬 수 있다.
즉, 복사 후 배열에 대한 조작이 복사 전 소스의 배열에도 영향을 주게 된다.

스프레드 구문을 사용하면 '완전히 새로운 배열'을 만들기 때문에 원래 배열에 영향을 주지 않는다.
(splice 등 다른 방법으로도 구현 가능하다.)

 

반응형

댓글