-
[3주차 개인 S.A] 숙제 2 🐤 JavaScript 객체와 불변성이란 ?부트캠프 <항해99> 일지/3~5주차 - 리액트 입문~심화 교육 2022. 5. 20. 16:04
1. 기본형 데이터와 참조형 데이터
자바스크립트 데이터 타입은 크게 두가지인 원시형(Primitive Type)과 참조형(Reference Type)으로 분리된다.
■ 기본형데이터 (Primitive type)
숫자 (Number)
문자열 (String)
불린(Boolean)
Null
Undefined- ES6+ 추가 -
( Symbol )
( BigInt )- 기본형에는 바로 값을 할당한다.
- 기본형은 모두 “하나”의 정보, 즉, 데이터를 담고 있다
- let a = b 로 변수를 복사하게 되면, a의 값 전체가 복사되어 그대로 b에 담긴다.
- 즉, a와 b는 복사되었어도 여전히 독립적으로 존재하므로 서로 영향을 받지 않는다.
- 기본형은 메모리상에 고정된 크기로 저장된다
- 기본형 데이터에서 만든 값은 불변값(immutable)이다. 한 번 만든 값이 다른 값으로 변경되지 않으며,
- 가비지 컬렉팅을 당하지 않는 한 영원히 바뀌지 않는다.
■ 참조형 데이터 (Reference Type)
기본형이 아닌 모든 것들은 참조형이다.
객체 (Object)
ㄴ배열(Array)
ㄴ함수(Function)
ㄴ정규표현식(RegExp)
….- ES6+ 추가 -
(Map)
(WeakMap)
(Set)
(WeakSet)- 참조형에는 값이 저장된 주소값(reference)을 할당(참조)한다.
- let a = b 로 변수를 복사하게 되면, 주소값만 복사된다.
즉, 데이터로의 연결점만 확보하는 것이다. 따라서 a를 변경하면 b도 변경된다. - 참조형 데이터의 값은 가변값(mutable)이다. 변수안의 값은 변하지 않지만 (주소는 그대로)
내부 프로퍼티를 변경하는 것이 가능하다. - 참조 자료형은 기존에 고정된 크기의 보관함이 아니다.
왜 참조형은 주소 값만 복사하게 만들었을까?
간단하다! 참조형에는 뭐가 들어갈지 알 수 없기 때문에,
매번 주소값이 아닌 전체 값을 복사하게 되면
용량이 어마어마하게 커지고 성능이 떨어질 수 있기 때문이다.
2. 불변 객체를 만드는 방법
불변 객체란 객체 생성 이후 내부의 상태가 변하지 않는 객체이다.
참조형 데이터의 객체를 복사해서 내부 프로퍼티를 변경하고 싶을 때,
원본 객체는 변하면 안될 경우, '불변 객체'를 만들어서 사용해야한다.
■ Const 와 Object.freeze()의 조합
ES6+부터 const를 사용해 변수를 상수로 선언할 수 있다.
const는 할당된 값이 아닌 바인딩된 값을 상수로 만드는 것이기 때문에,
객체 재할당은 불가능 하지만 객체의 속성은 변경할 수 있다.
Object.freeze()는 객체를 동결하기 위한 JS 내장 메서드이다.
객체의 속성을 변경할 수 없게 만들지만, 객체 재할당은 가능하다.
그렇다면?
섞는다.const a = { 'name' : 'suhyun' } Object.freeze(a)
이제 a는 객체의 재할당도, 속성변경도 불가능한, 옴짝달싹 할 수 없는 불변객체가 되었다..
■ Object.assign() 메서드 사용해서 복사해 사용하기 (→ 얕은복사)
타깃 객체의 속성을 대상으로 새로운 객체로 복사해온다 (IE 지원하지 않음)
But! 객체 내부의 객체가 있다면 해당 객체는 주소만(참조만) 복사 된다.
즉 완전한 복제가 불가능 하다는 문제가 남아있다.
Object.assign({}, 복사할 객체)로 사용 할 수 있다.
■ 객체를 복사하는 함수 만들어서 사용하기 (→ 깊은복사)
1) 함수 첫줄에서 빈 객체를 새로 생성하고
2) for ... in 반복문을 활용해 객체의 요소들을 변수 a에 담아준다.3) 변수 a를 매개로 위에서 만든 객체 안에 차례차례 값을 복사해 담아준다.
직접 만들지 않아도 라이브러리를 사용할 수도 있다. (immutable.js, baobao.js 등)
그 외에도
Lodash의 cloneDeep 함수 사용
JSON.parse()와 JSON.stringify()함수 사용등의 방법이 있다고 한다.
3. 얕은 복사와 깊은 복사
참조형 데이터에는 두 가지 복사 방법이 있는데, 얕은 복사와 깊은 복사이다.
얕은 복사
연결된 메모리 주소 딱 한 번(한 단계 밑) 까지만 복사가 된다.
만약 Object를 복사했는데, Object의 한 프로퍼티 안에 또 다른 참조형 데이터 타입이 들어있다면
거기서부터는 복사되지 않는다. ( → Object.assign())
깊은 복사깊은 복사는 연결된 메모리 주소를 끝까지 쫓아가 복사한다.
재귀적 복사를 통해 내부에 존재하는 모든 단계의 객체들을 복사하는 것을 의미하며
얕은 복사에서 내부에 또 객체가 있는 경우에 발생하는 문제를 해결해준다.
'부트캠프 <항해99> 일지 > 3~5주차 - 리액트 입문~심화 교육' 카테고리의 다른 글
[3주차 개인 과제] 일주일 평점 내기 (0) 2022.05.27 [3주차] 항해톡 발표 : Process와 Thread (0) 2022.05.26 [3주차 개인 S.A] 숙제 4 🐤 실습 과제 (0) 2022.05.20 [3주차 개인 S.A] 숙제 3 🐤 호이스팅과 TDZ는 무엇일까 ? (0) 2022.05.20 [3주차 개인 S.A] 숙제 1 🐤 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? (0) 2022.05.20