자바스크립트의 데이터타입은 크게 2가지(+1)로 구분된다.
- primitive type : 더이상 나눠질 수 없는 single item
- object type (참조형 데이터): 여러 item. box container에 담은 것
- function : first-class function이야라는 말은 function도 다른 데이터 타입처럼 변수에 할당이 가능 함을 의미함 (함수의 parameter로 지정 가능하고, return type으로도 가능함)
기본형 데이터(Primitive Type) : 값을 할당
Primitive Type은 더이상 _값을 그대로 할당 함
-> 값을 할당할 때 값 그 자체를 다른 메모리에 할당하기 때문에, 원래의 값과 복사된 값이 서로 영향을 미치지 않음
immutable value (변경 불가능한 값)
메모리 내에 고정된 크기로 저장되면서, primitive data 값 자체를 보관
Primitive Type의 종류
- Number
- String
- Boolean
- null
- undefined
- Symbol (New in ECMAScript 6)
(예시)
const a = 1;
let b = a;
b = 2
console.log(a); //1
console.log(b); //2참조형 데이터(Reference Type) : 값이 저장된 주소 값을 할당(참조)
Reference Type 데이터는 '값이 지정된 주소값'을 할당한다/
-> 참조값은 '해당 변수가 객체의 주소를 가르키는 값'이다
Reference Type은 기본형 데이터의 집합
mmutable Value (변경 가능한 값)
Reference Type 종류
- Object : array, function, map,
(예시)
const a = {number: 1};
let b = a;
b.number = 2
console.log(a); // {number: 2}
console.log(b); // {number: 2}Deep Copy(깊은 복사), Shallow Copy(얕은 복사)
Shallow Copy(얕은 복사)
Shallow Copy는 참조(주소)값의 복사하는 것이다.
const stu = { vaule: 1 }
const newStu = obj;
newStu.vaule = 2;
console.log(stu.vaule); // 2
console.log(stu === newStu); // truestu 객체를 새로운 newStu 객체에 할당하였으며 이를 참조 할당이라 부른다.
복사 후 newStu 객체의 value값을 변경하였더니 기존의 obj.value값도 같이 변경된다.
두 객체를 비교해도 true로 나온다.
▶ 이는 얕은 복사로, 데이터가 생성되는 것이 아니라
해당 데이터의 참조 값(메모리 주소)를 전달하여 한 데이터를 공유하는 것이다.
Deep Copy(깊은 복사)
값 자체의 복사를 나타낸다
let a = 1;
let b = a;
b = 2;
console.log(a); // 1
console.log(b); // 2
console.log(a === b); // false
변수 a를 새로운 b에 할당하였고 b 값을 변경하여도 기존의 a의 값은 변경되지 않는다.
두 값을 비교하면 false가 출력되며 서로의 값은 단독으로 존재하다는 것을 알 수 있다.
▶ 이렇게 Primitive Type은 Deep copy가 되며,
이는 독립적인 메모리에 값 자체를 할당하여 생성하는 것이라 볼 수 있다.
Deep Copy와 Shallow Copy로 나눠지는 이유는 어떤것일까?
효율성을 위한 것이다.
예를 들어 객체 내에 개체가 1000개 있는 경우, 개체를 생성하고 할당하는데 시간이 1초 걸린다고 가정하면, Deep Copy를 하게 되면 최소 1000초가 소요되고, Shallow Copy를 하면 메모리를 가르키는데 필요한 시간만 소요하게 된다.
따라서 Shallow Copy만 해도 되는 경우에는, Shallow Copy를 하는 것이 효율적이다.
객체의 Deep Copy
예시1) Object.assign
Syntax
Object.assign(target, ...sources)const obj={a:1};
const copy = Object.assign({}, obj);예시2) 전개연산자
const student={
name : 'ksj',
age : 20,
type : intj
};
let studentCopy = { ...student};
studentCopy.age = 30;
console.log (student, studentCopy); // age가 20, 30으로 바뀜불변 객체를 만드는 방법
왜 immutable data pattern을 만들어야 할까?
의도하지 않은 객체의 변경이 발생하여 오류를 발생하기 때문이다. 변경 원인의 대다수는 “레퍼런스를 참조한 다른 객체에서 객체를 변경”하기 때문이다.
이 문제를 해결할 수 있는 방법은?
Cost는 들지만 객체를 immutable data pattern으로 만들어 프로퍼티의 변경을 방지하며
객체의 변경이 필요한 경우에는 참조가 아닌 Defensive copy (객체의 방어적 복사)를 통해 새로운 객체를 생성한 후 변경한다.
① 객체의 방어적 복사(defensive copy) : Object.assign, 전개연산자 (위 내용 참조)
② 불변객체화를 통한 객체 변경 방지 : Object.freeze
객체의 방어적 복사(defensive copy)
Deep Copy를 진행함
Object.freeze
Object.freeze()를 하면 객체에 다른 값을 할당해도 무시되고 변하지 않는다.
Immutable.js
Reference
