자바스크립트 변수와 식별자
- 변수 : 변할 수 있는 데이터를 담는 공간
- 식별자 : 데이터를 식별하는 데 사용하는 이름 -> 변수명, 메모리 주솟값
자바스크립트 데이터 타입
primitive type
- number, string, boolean, null, undefined
- 값이 담긴 주솟값을 변수에 저장
- 값이 달라지면 무조건 새로운 메모리 공간에 새로운 값을 저장하고 해당 새로운 메모리 공간의 주솟값을 변수에 할당한다.
=> 한 번 만든 값은 바꿀 수 없고 값의 변경은 새로 만드는 동작을 통해서만 이루어진다. 한 번 만들어진 가비지컬렉팅을 당하지 않는 한 영원히 변하지 않는다 : 불변성의 성질!
var a = 1;
var b = a; // a 와 b는 1이 담긴 같은 메모리 주소를 저장하고 있다
b = 2; // b는 2를 담고 있는 새로운 메모리 주소를 저장
console.log(a); // 1 -> a는 불변!
reference type
- Object, Array, Function, Date, RegExp, ...
- 프로퍼티들의 주소값 묶음을 저장하는 메모리의 주솟값을 변수에 저장
- 프로퍼티의 값이 달라지면 해당 프로퍼티변수는 달라진 값의 메모리주소를 저장하지만, 프로퍼티들의 주소값을 묶음을 저장하는 메모리의 주솟값은 변하지 않는다 : 가변성!
var obj1 = { a:1, b:2 }; // obj1은 프로퍼티들의 주솟값 묶음을 저장하는 메모리의 주솟값 저장
var obj2 = obj1; // obj2와 obj1은 같은 메모리의 주솟값 저장
obj2.b = 3; // 프로퍼티 b는 3을 저장하고 있는 새로운 메모리 주솟값을 저장
console.log(obj1); // { a:1, b:3 } -> 가변!
// obj1은 obj2와 같은 프로퍼티들의 주솟값 묶음의 메모리의 주솟값 저장하고 있기 떄문!
불변객체, immutable object
불변객체란?
- 값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하는 않는 객체
- 객체의 내부 프로퍼티를 변경할 필요가 있을 때 새로운 객체를 만들어서 재할당하여 불변성을 확보한다
약은 복사
- 프로퍼티들의 주솟값들의 묶음 저장하고 있는 새로운 메모리 공간을 할당하여 해당 메모리의 주솟값을 변수에 저장
- 한계 : 원본과 사본이 서로 다른 객체의 주소를 가지고 있지만 해당 객체들의 프로퍼티 메모리 주소는 동일하다. 프로퍼티가 참조형 데이터인 경우 사본을 바꾸면 원본도 바뀐다.
function shallowCopy(obj) {
var res = {};
for (var prop in obj) {
res[prop] = obj[prop];
}
return res;
}
var obj1 = { a: 1, b: 2 };
var obj2 = shallowCopy(obj1);
obj2.a = 7;
console.log(obj1); // { a: 1, b: 2 }
console.log(obj2); // { a: 7, b: 2 }
var obj3 = { a:1, b: { c: 2, d:3} };
var obj4 = shallowCopy(obj3);
obj4.b.c = 7;
console.log(obj3); // { a:1, b: { c: 7, d:3} } : 얕은복사
console.log(obj4); // { a:1, b: { c: 7, d:3} } : 얕은복사
깊은 복사
- 내부 프로퍼티 값 하나하나 찾아서 전부 복사하는 방법
- 프로퍼티 타입이 object인 경우 해당 프로퍼티를 인자로 깊은복사함수를 계속 재귀적으로 실행하여 불변객체를 만든다!
function deepCopy(obj) {
var res = {};
if (typeof obj === 'object' && obj !== null) {
for (var prop in obj) {
res[prop] = deepCopy(obj[prop]);
}
} else {
res = obj;
}
return res;
}
var obj1 = { a:1, b:{ c:2, d:3 } };
var obj2 = deepCopy(obj1);
obj2.b.c = 7;
console.log(obj1); // { a:1, b:{ c:2, d:3 } } -> 불변객체!
console.log(obj2); // { a:1, b:{ c:7, d:3 } }
- 깊은 복사 함수를 직접 구현하는 대신, 객체를 JSON 문법으로 표현된 문자열로 변환했다가 다시 JSON객체로 변환하면 깊은복사를 간단하게 구현할 수 있다.
undefined 와 null
undefined
- 값을 대입하지 않은 변수,
- 데이터의 메모리 주소를 지정하지 않은 식별자에 접근하는 경우, 객체 내부에 존재하지 않는 프로퍼티에 접근하는 경우, return문이 없는 함수의 실행 결과
null
- 명시적으로 '없음, 비어있음'을 나타내기 위해 대입한 값
- 없음을 표현하기 위해서 undefined를 직접 대입하는 하지 않는다
'Frontend' 카테고리의 다른 글
JS this (0) | 2020.11.07 |
---|---|
JS 실행 컨텍스트 (0) | 2020.11.07 |
14. Redux-middleware (0) | 2020.11.06 |
13. React-Redux (0) | 2020.11.06 |
12. Redux (0) | 2020.11.06 |