자바스크립트에서 값의 타입은 크게 기본형(Primitive Type)과 참조형(Reference Type)으로 구분됩니다. 기본형과 참조형의 구분 기준은 값의 저장 방식과, 불변성 여부입니다.
복제의 방식 기본형 : 값이 담긴 주소값을 바로 복제 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제
불변성의 여부(일반적인 불변의 의미가 아닌 데이터의 불변) 기본형 : 불변성을 띔 참조형 : 불변성을 띄지 않음
💫메모리와 데이터
비트 -> 바이트 -> 메모리
비트 - 컴퓨터가 이해할 수 있는 가장 작은 단위 - 0과 1을 가지고 있는 메모리를 구성하기 위한 작은 조각을 의미
바이트 0과 1만 표현하는 비트를 모두 찾기는 부담 - 1개 → 2개 → … → 8개(새로운 단위 : byte) 메모리(memo + ry) : byte 단위로 구성 - 모든 데이터는 byte 단위의 식별자인 메모리 주소값을 통해서 서로 구분
64비트(8바이트) 정수는 메모리에 64비트를 8개의 바이트로 분할하고, 각 바이트를 메모리에 저장하며, 각 바이트는 8개의 비트를 가므로 64비트 정수는 메모리에서 8개의 연속된 바이트에 저장한다.
var testValue = 3 식별자, 변수명 = 변수, 데이터
변수 선언과 데이터 할당
/** 선언과 할당을 풀어 쓴 방식 */
var str;
str = 'test!';
/** 선언과 할당을 붙여 쓴 방식 */
var str = 'test!';
이런식으로 값을 저장하고 부여받는데 이때 값을 바로 변수에 대입하지 않는 이유(새로만드는 이유)
자유로운 데이터 변환
숫자는 항상 8byte로 고정이지만, 문자는 고정이 아니다.(영문 : 1byte, 한글 : 2byte). 그래서, 이미 1003 주소에 할당된 데이터를 변환하려 할 때 훨씬 더 큰 데이터를 저장하려 한다면 → 1004 이후부터 저장되어있는 모든 데이터를 오른쪽으로 다 밀어주어야 함
메모리의 효율적 관리
1만개의 변수를 생성해서 모든 변수에 숫자 1을 할당(즉, 똑같은 데이터를 여러번 저장해야)하는 경우, 모든 변수를 별개로 인식한다고 한다면, 1만개의 변수 공간을 확보해야 한다.
바로 대입하는 case) 숫자형은 8 바이트 고정 1만개 * 8byte = 8만 byte
변수 영역에 별도 저장 case) 변수 영역 : 2바이트 1만개 = ****2만바이트 <aside>
ℹ️ 이해를 돕고자, 변수 영역에 저장되는 데이터는 2바이트로 가정
데이터 영역 : 8바이트 1개 = 8바이트 총 : 2만 8바이트
기본형 데이터와 참조형 데이터
변수 vs 상수
변수 : 변수 영역 메모리를 변경할 수 있음
상수 : 변수 영역 메모리를 변경할 수 없음
불변하다 vs 불변하지 않다
불변하다 : 데이터 영역 메모리를 변경할 수 없음
불변하지 않다 : 데이터 영역 메모리를 변경할 수 있음
불변값과 불변성(with 기본형 데이터)
// a라는 변수가 8에서 9가 되는 과정을 통해 불변성을 유추해봅시다!
// '8'라는 값이 데이터영역의 @5003라는 주소에 들어갔다고 가정할게요.
var a = '8';
// '9'라는 값이 @5003라는 주소에 추가되는 것이 아니죠!
// @5004에 별도로 '9'라는 값이 생기고 a라는 변수는 @5003 -> @5004
// 즉, "변수 a는 불변하다." 라고 할 수 있습니다.
// 이 때, @5003는 더 이상 사용되지 않기 때문에 가비지컬렉터의 수거 대상이 됩니다.
가변값과 가변성(with 참조형 데이터)
참조형 데이터의 변수 할당 과정
기본형 데이터의 변수 할당 과정과 차이점 : 객체의 변수(프로퍼티) 영역의 별도 존재 여부
불변하지 않다(가변하다)라고 하는 이유
변경할 값인 숫자 2를 데이터 영역에서 검색 2를 새로 추가하고, 해당 주소(ex : @5003)를 obj1을 위한 별도 영역에 갈아껴줍니다.
데이터 영역에 저장된 값은 여전히 계속 불변값이지만, obj1을 위한 별도 영역은 얼마든지 변경이 가능하다. 이것 때문에 참조형 데이터를 흔히, ‘불변하지 않다(=가변하다)’라고 합니다.
중첩객체의 할당
자바스크립트에서 중첩객체란, 객체 안에 또 다른 객체가 들어가는 것을 말한다. 객체는 배열, 함수 등을 모두 포함하는 상위개념이기 때문에 배열을 포함하는 객체도 중첩객체라고 할 수 있다.
참조카운트 객체를 참조하는 변수나 다른 객체의 수를 나타내는 값, 참조 카운트가 0인 객체는 더 이상 사용되지 않으므로,가비지 컬렉터에 의해 메모리에서 제거된다.
가비지컬렉터(GC, Garbage Collector) 더 이상 사용되지 않는 객체를 자동으로 메모리에서 제거하는 역할을 한다. 자바스크립트는 가비지 컬렉션을 수행함으로써 개발자가 명시적으로 메모리 관리를 하지 않아도 되도록 지원한다. 자바스크립트 엔진에서 내부적으로 수행되며, 개발자는 가비지 컬렉션에 대한 직접적인 제어를 할 수 없다.
변수 복사의 비교
기본형과 참조형의 변수 복사
기본형과 참조형의 변수 복사 시 주요한 절차의 차이점은 다음과 같아요!
기본형
숫자 15라는 값을 데이터 영역에서 검색 후 없다면 생성
검색한 결과주소 또는 생성한 주소를 변수 영역 b에 갈아끼움
a와 b는 서로 다른 데이터 영역의 주소를 바라보고 있기 때문에 영향 없음
참조형
숫자 20이라는 값을 데이터 영역에서 검색 후 없다면 생성
검색한 결과주소 또는 생성한 주소 obj2에게 지정되어 있는 별도 영역(7103~)에 갈아끼움
obj1도 똑같은 주소를 바라보고 있기 때문에 obj1까지 변경이 됨
바로 아래와 같은 현상이 생기는 것이죠!
객체의 프로퍼티(=속성)에 접근해서 값을 변경하는 것이 아니라 객체 자체를 변경하는 방식으로 값을 변경
obj2 변수는 참조형 데이터이고, 참조형 데이터의 값을 변경한 것임에도 불고하고 이전 케이스와는 다르게 obj1과는 바라보는 데이터 메모리 영역의 값이 달라졌다
참조형 데이터가 ‘가변값’이라고 할 때의 ‘가변’은 참조형 데이터 자체를 변경할 경우가 아니라, 그 내부의 프로퍼티를 변경할 때 성립한다고 할 수 있다.
undefined와 null
둘 다 없음을 나타내는 값이지만 미세하게 다르고, 그 목적 또한 다르다.
undefined
일반적으로는 자바스크립트 엔진에서 값이 있어야 할 것 같은데 없는 경우, 자동으로 부여한다.
var a;
console.log(a); // (1) 값을 대입하지 않은 변수에 접근
var obj = { a: 1 };
console.log(obj.a); // 1
console.log(obj.b); // (2) 존재하지 않는 property에 접근
// console.log(b); // 오류 발생
var func = function() { };
var c = func(); // (3) 반환 값이 없는 function
console.log(c); // undefined
변수에 값이 지정되지 않은 경우, 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
객체나, 배열에서 .이나 [ ]로 속성에 접근하려 할 때, 해당 데이터가 존재하지 않는 경우
return 문이 없거나 호출되지 않는 함수의 실행 결과
지금 undefined로 나오는 이 변수가, 필요에 의해 할당한건지 자바스크립트 엔진이 반환한건지 구분할 수 없다. ‘없다’를 명시적으로 표현할 때는 undefined를 사용하지 말 것_null
null
‘없다’를 명시적으로 표현할 때(typeof null이 object인 것은 유명한 javascript 자체 버그입니다. 조심)
