기본형 데이터와 참조형 데이터의 데이터 저장 방식의 특징과 차이는 이해가 쉬웠으나, 얕은 복사와 깊은 복사의 개념이 강의를 보고는 쉽게 와닿지 않았다. 따라서 유튜브와 여러 블로그들을 참조하며 결국! 이해에 성공하였다!
내가 해당 정보들을 모아 정리하고 최종적으로 정의한 얕은 복사와 깊은 복사, 그리고 기본형/참조형 데이터의 특징은 아래와 같다.
얕은 복사와 깊은 복사
1. 얕은 복사 : 객체의 참고값(주소값)만 복제
- 중첩된 객체가 있을 경우에 하나의 객체라도 기존의 주소값을 참고하고 있다면 이는 얕은 복사이다.
- 따라서 복제된 데이터에 변화가 일어날 경우 원본도 같은 주소값을 향하고 있기에 영향을 받음
2. 깊은 복사 : 객체의 실제값을 복제
- 중첩된 객체 내부 모두 기존 객체의 주소값을 참고하고 있지 않아야 함
- 복제된 데이터에 변화가 일어나도 원본과는 별개의 주소값을 가지기에 영향 받지 않음
기본형(원시값)데이터와 참조형 데이터
1. 기본형(원시값) 데이터 [불변성] / 깊은 복사의 형태
예) let a = 10
- 데이터를 복사 후 변경했을 때 기존의 원본은 영향을 받지 않는다.
따라서 원본과 복사본의 변경본은 다른 값을 지니게 된다.
2. 참조형 데이터 [가변성] / 얕은 복사의 형태
예) let user { name: 'yui', age: 25, };
- 데이터를 복사 후 변경했을 때 기존의 원본도 영향을 받아 변경된다. (데이터 저장 방식의 원리를 떠올리면 됨)
따라서 원본과 복사본의 변경본이 같은 값을 지니게 된다.
-> 따라서 가변은 위험하다! (복사본이 바뀌길 바랐을 뿐, 원본은 변치 않길 바랐는데 변경이 되어 버렸으니까!)
=> 이는 기존 객체의 프로퍼티에 직접 접근하여 변경하지 않는 방식(새로운 객체를 생성)으로 접근하여 불변성의 형태를 띄도록 만들 수 있다.
1) 가변성의 경우
var user = {
name: "yu2",
gender: "female",
};
var changeName = function (user, name) {
var newUser = user; //user의 데이터를 newUser에 복사하는 과정
newUser.name = newName;
// 객체의 프로퍼티에 직접 접근하여 name의 데이터를 변경한 형태
return newUser;
};
var user2 = changeName(user, "yu1"); // user, user2의 name값이 모두 yu1로 변경된다.
2) 불변성의 경우
var user = {
name: "yu2",
gender: "female",
};
var changeName = function (user, newName) {
// 기존 user 객체의 프로퍼티(속성)에 직접 접근하는 것이 아니라, user2{}라고 하는 아예 새로운 객체를 반환
return {
name: newName,
gender: user.gender,
};
};
// 불변이기 때문에 user1은 영향이 없으므로 user은 'yu2', user2은 'yu1'의 name값을 가지게 된다.
var user2 = changeName(user, "yu1");
하지만,
위처럼 불변성의 성질을 가지게 위해, 계속하여 새로운 객체를 생성하는 함수를 만들어내는 것은 유지보수 측면에서 효율성이 매우 떨어짐! (하드코딩한 값들이 너무 많아짐...ㅠㅠ)
그래서 for~in 구문을 이용하여 깊은 복사가 가능한 식을 만들어 해결하려고 시도 할 수 있는데, 이는 중첩된 객체까지는 깊은 복사를 해 줄 수 없어 중첩된 객체는 그대로 데이터의 주소값만 복사된다는 문제점이 있다.
=> 그럼 결국 또 다시 얕은 복사가 되는 것이나 마찬가지...
따라서 이를 해결하기 위해서는 중첩된 객체도 불변 객체로 만드는 과정이 필요하다.
(위에서 객체를 복사하여 깊은 복사화 한 것처럼 중첩된 객체의 수만큼 객체를 복사하는 과정이 필요하다는 뜻)
=> 이를 재귀적 수행이라 일컫는다.
재귀적 수행이란?
- 함수나 알고리즘이 자기자신을 호출하여 반복적으로 실행되는 것을 일컫는다.
-> 객체의 프로퍼티 중, 기본형 데이터는 그대로 복사 + 참조형 데이터는 다시 그 내부의 프로퍼티를 복사
복습을 위한 강의 판서
오늘도 잘 해냈다!
'TIL' 카테고리의 다른 글
230530) This, JS 셀렉터 (0) | 2023.05.30 |
---|---|
230526) JS 기초 복습 및 실행 컨텍스트 (0) | 2023.05.27 |
230524) JS(자바스크립트)와 함수, 그리고 GIT 특강 (0) | 2023.05.24 |
230523) TIL 특강, 자바스크립트 문법 기초 수강 (0) | 2023.05.23 |
230522) JavaScript 문법 종합반 (0) | 2023.05.22 |