📍 데이터 타입
자바스크립트의 데이터 타입은 크게 기본(원시) 타입과 참조 타입으로 나뉜다.
- 기본형 : String, Number, Boolean, Null, Undefined, Symbol(es6) ···
- 참조형 : Object, Array, Function, Date ···
기본형과 참조형은 데이터를 할당하는 과정에서 차이가 있으며,
이 둘을 구분할 때 기본형 : 불변값 / 참조형 : 가변값 이라고 할 수 있다.
💡 데이터 할당 : 우리가 원하는 값을 메모리 공간에 저장하고, 해당 값을 변수에 할당하는 과정을 말한다.
데이터가 메모리에 저장되는 방식
1. 변수 a에 문자열 'abc' 할당
2. 변수 영역과 데이터 영역 각각 확보
3. 데이터 영역에 문자열 'abc' 저장 / 변수 영역에 해당 주소 대입
⭐️ 변수와 데이터 영역을 나누어 관리함으로써 데이터 변환을 자유롭게 하고 메모리를 효율적으로 관리 가능
javascript에서 number타입은 8바이트 공간을 할당하는 반면 문자열은 정해진 규격이 없으므로 글자수에 따라 메모리 가변적일텐데
만약에 미리 확보된 공간 내에서만 데이터 변환할 수 있다면 데이터 재저장을 위해서 확보된 공간을 변환할 데이터의 크기에 맞게 늘리는 작업을 수행해야 할 것이다.
📍 데이터 할당과 불변성
변수와 상수를 구분할 때의 변경 가능성의 대상 : 변수 영역 메모리
불변성의 여부를 구분할 때의 변경 가능성의 대상 : 데이터 영역 메모리
기본형
- 기본형
스택 영역에 저장
불변값
var a = 'abc;
a = 'abcde;// 데이터 할당
1. javascript 엔진은 스택 메모리 영역에 'abc'값이 있는지 검색
2. 없다면 'abc'값을 저장할 공간을 확보한다.
3. 해당 공간의 주솟값을 식별자 a와 연결한다.
=> 즉, 식별자 a는 'abc'이라는 데이터가 저장된 스택 영역의 주솟값을 참조한다.
// 데이터 재할당
1. javascript 엔진은 스택 메모리 영역에 'abcde'값이 있는지 확인
2. 없다면 'abcde'값을 저장할 공간을 확보한다.
3. 식별자 a 의 주솟값을 'abcde'를 저장한 주솟값으로 변경한다.
**=> 즉, 'abc'값 자체가 'abcde'로 변경된 것이 아니라 식별자 a 가 참조하는 주솟값만 달라졌다.**식별자 a에 'abcde'값을 재할당할때 'abc'가 'abcde'로 변하는 것이 아니다.
따라서, 기본형은 불변하다.
💡 불변성이란? 한번 메모리 공간에 저장된 데이터의 값이 변할 수 없는 성질을 의미한다.
불변성을 가지는 데이터는 값이 변하지 않아서 크기가 고정적이므로
정적인 데이터를 다루는 스택 영역에 저장되는 것이 유리하다.
참조형
- 참조형
힙 영역에 저장
가변값
var obj = {
name: 'JY',
age: 26
};
var copyObj = obj;
copyObj.age = 20;
console.log(obj === copyObj); // truecopyObj 는 obj 와 같은 주솟값을 참조한다.
그리고, copyObj 객체의 age 프로퍼티 값을 수정할 때 자바스크립트는 obj 가 참조하는 힙 메모리에서 age 프로퍼티의 값만 수정한다.
이때 스택 메모리에 저장된 obj가 참조하고 있던 주솟값은 변하지 않았다.
참조형의 변수는 값이 직접 대입되는 것이 아닌
데이터가 저장된 주소를 참조하기에 참조(reference)형이라고 불리는 것이다.
참조형 데이터는 내부의 프로퍼티를 변경하는 경우 가변적이다.
그렇기에 변수의 복사나 수정 시 참조 여부를 잘 고려해야 한다.
만일 이러한 특성을 고려하지 않은 채 중요한 정보를 담고있는 객체나 배열에 수정 및 복사를 하게되면 원본 데이터가 예상치 못한 방향으로 변경될 수 있다.
아예 새로운 객체를 할당하면 복사된 원본 객체가 변하지 않는다.
서로 다른 주솟값을 바라보기 때문이다.
var obj1 = {
name: 'JY',
age: 26
};
var obj2 = obj1;
obj2 = {
name: 'KJ',
name: 31
}
console.log(obj === obj2); // false참조형 데이터를 불변성을 유지하며 사용하려면 새로운 객체로 반환하는 것이 중요하다.
함수의 프로퍼티 내부까지 완전히 새로운 객체로 복제하는 깊은 복사의 예제 코드
var copyObjDeep = function(target){
var newObj = {};
if(typeof target === 'object' && target !== null){
for(var prop in target){
newObj[prop] = copyObjDeep(target[prop]);
}
} else {
newObj = target;
}
return newObj;
};💡 javascript는 콜 스택과 메모리 힙이라는 메모리 구조를 통해 데이터 및 코드 실행을 관리한다.
콜 스택 : 기본형 값과 함수 호출의 실행 컨텍스트를 저장하는 곳
힙 : 객체, 배열, 함수와 같이 크기가 동적으로 변할 수 있는 참조형 값을 저장하는 곳
📍 undefined / null
자바스크립트에서 "없음"을 나타내는 두 가지 값.
'undefined'는 어떤 변수에 값이 존재하지 않음을 의미하고 'null'은 사용자가 명시적으로 '없음'을 표현하기 위해 대입한 값.
본래의 의미에 따라 사용자가 없음을 표현하기 위해 명시적으로 undefined 대입하는 것은 지양해야함.
- undefined
: 사용자가 명시적으로 지정할 수도 있지만 값이 존재하지 않을 때 자바스크립트 엔진이 자동으로 부여하는 경우도 있음
: 자바스크립트 엔진이 사용자가 응당 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제로는 그렇게 하지 않았을 때 undefined 반환
: 자바스크립트 엔진이 사용자가 응당 어떤 값을 지정할 것이라고 예상되는 상황
1) 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때(변수 선언시 자동으로 undefined 할당하는 것이 아니라 이후 해당 변수에 접근하고자 할 때 비로소 undefined를 반환하는 것)
2) 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때
3) return 문이 없거나 호출되지 않는 함수의 실행 결과: '비어있는 요소'와 'undefined를 할당한 요소'는 출력 결과부터 다름. '비어있는 요소'는 순회와 관련된 많은 배열 메서드들의 순회대상에서 제외됨. undefined는 비록 비어있음을 의미하긴 하지만 하나의 값으로 동작하기 때문에 이때의 프로퍼티나 배열의 요소는 고유의 키값(프로퍼티 이름)이 실존하게 되고, 따라서 순회의 대상이 될 수 있음.
: 값으로써 어딘가에 할당된 undefined는 실존하는 데이터인 반면, 자바스크립트 엔진이 반환해주는 undefined는 문자 그대로 값이 없음을 의미.
- null
: '비어있음'을 명시적으로 나타내고 싶을 때는 undefined가 아닌 null을 사용.
⭐️ 정리 ⭐️
- javascript의 데이터 타입에는 크게 기본형과 참조형 존재
- 기본적으로 기본형은 불변값, 참조형은 가변값
- javascript는 콜 스택과 메모리 힙이라는 메모리 구조
- 콜 스택은 기본형 값과 실행 컨텍스트를 저장하는 곳
- 힙은 객체, 배열, 함수와 같이 크기가 동적으로 변할 수 있는 참조형 값을 저앙하는 곳
- 변수와 데이터 영역을 나누어 관리함으로써 데이터 변환을 효율적으로 처리 가능
- 불변성의 여부를 구분 할 때 변경 가능성의 대상은 데이터 영역의 메모리
- 참조형 데이터가 기본형과 메모리 할당과정에서 차이가 있는 이유는 참조형 데이터가 여러개의 프로퍼티(변수)를 모은 그룹이기 때문
- 객체를 참조하는 여러 곳에서 객체를 변경하면 모든 참조가 영향을 받게되는데 값으로 전달받은 객체에 변경을 가해도 원본 객체는 변하지 않아야 할 경우, 불변 객체를 사용
- 참조형 데이터를 불변값으로 사용하기 위해서는 깊은 복사를 하거나 라이브러리를 사용
- 얕은 복사와 깊은 복사는 참조값만 복사하거나 내부의 모든 값을 복사하는 방식
- 없음을 나타내는 값은 null, undefined 두 가지
- undefined : 어떤 변수에 값이 존재하지 않을 경우
- null : 사용자가 명시적으로 '없음'을 표현하기 위해 대입한 값. 순회 건너뜀
