[현대이지웰 Java 풀스택 개발자 아카데미 6월] TIL 1주차 복습 - javascript 얕은 복사 & 깊은 복사
📚 요약
javascript 배열을 복사하는 방식에는 2가지가 있다.
- 배열의 참조 주소만 변수에 복사하는
얕은 복사 - 완전 별개의 배열로써 복사하는
깊은 복사
과거 회사에서 메뉴 편집 시스템을 만들 때 배열이 별개의 배열로써 복사가 되는 게 아니라 참조되어
수정하는 배열의 값과 원본 배열의 값이 자꾸 같이 바뀌는 것 때문에 고생했던 기억이 났다.😂
마침 이번에 배우게 된 김에 조금 더 파보기로 했다!
🎷 얕은 복사
얕은 복사는 원본 배열의 참조값을 변수에 복사해준다.
형태는 다음과 같다.
이제 참조값이 복사된다는 것이 어떤 뜻인지 보려면 newArr의 값을 바꿔본 다음,
newArr와 originArr가 각각 어떻게 바뀌었는지 보면 된다.
이처럼 console창으로 확인했을 때 분명 나는 newArr의 2번 인덱스만 9로 값을 바꿨는데
실제로는 newArr뿐 아니라 originArr도 값이 바뀐 걸 알 수 있다.
PHP 쓸 때는 위 방법으로 새로운 변수에 배열을 복제해서 썼기 때문에
이게 왜 원본 배열값이 같이 바뀌는지 알아내느라 고생했던 기억이 있다.😂😂
🎺 깊은 복사
깊은 복사는 말 그대로 원본 배열을 새로운 배열 변수명에 복제해주는 것이다.
완전히 별개의 배열로 복제해주기 때문에 직전의 얕은 복사처럼 원본 배열까지 값이 바뀌지는 않는다.
방법은 여러가지가 있는데 일단은 수업에서 배웠던 JSON 인코딩 => JSON 디코딩 방식을 써보기로 했다.
이제 동일하게 2번 인덱스 값만 9로 바꾼 뒤 newArr와 originArr를 비교해보자.
이번엔 originArr의 2번 인덱스값이 바뀌지 않았다!
newArr와 originArr가 완전히 다른 별개의 배열이기 때문이다!!! 😎
🔥 결론
자바스크립트에 깊은 복사와 얕은 복사가 왜 따로 있는 것일까 생각해봤는데, 난 이게 자바스크립트의 성격탓이 아닐까 싶다.
왜냐면 자바스크립트에서 주로 변수에 태그 요소를 참조한 다음
해당 변수에 style 메서드를 사용해 조작하는 방식을 쓰기 때문이다.
이처럼 box 태그를 새로운 변수 box에 참조한 다음 style메서드를 사용하면
배경색 뿐 아니라 여러가지 스타일을 변경할 수 있다!