01_230504

📚 코어 자바스크립트, 정재남
데이터 타입

코어 자바스크립트

1. 데이터 타입 Data Type

데이터 타입의 종류

• 기본형(원시형) Primitive Type
  숫자 Number, 문자열 String, 불리언 boolean, NULL, Undefined
  ES6) 심볼 Symbol
• 참조형 Reference Type
  객체 Object, 배열 Array, 함수 Function, 날짜 Date, 정규표현식 RegExp
  ES6) Map, WeakMap, Set, WeakSet 등

기본형은 값이 담긴 주솟값을 바로 복제, 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제.

데이터 타입에 관한 배경지식

• 하나의 메모리 조각 비트 bit, 각 비트는 고유한 식별자 Unique identifier를 통해 위치 확인 가능
• 비트를 묶어 하나의 단위로 여겨 바이트 byte가 탄생. 1byte = 8bit
• C/C++, Java 등 정적 타입의 언어는 데이터 타입별로 메모리 영역을 2, 4byte로 나누어 정함
• Javascript의 경우 숫자는 정수형, 부동소수형 구분없이 64bit, 8byte를 확보
• 모든 데이터는 byte 단위의 식별자, 메모리 주솟값 Memory Address를 통해 서로 구분, 연결 가능
• 변수 Variable : 변할 수 있는 데이터
• 식별자 identifier : 변수명

변수 선언과 데이터 할당

// 변수 선언
var a;
// var는 안쓰는 것이 좋다. let을 권장한다. 추후에 업데이트 예정
// 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇

var a; // 변수 a 선언
a = 'abc'; // 변수 a에 데이터 할당

var a = 'abc'; // 변수 선언과 할당을 한 문장으로 표현

변수 a에 'abc'를 할당하면, 변수의 값에는 데이터 영역에 저장된 'abc'의 주솟값이 저장된다.
Why? 가변적이기에. 효율적으로 문자열 데이터의 변환을 처리하려면 변수와 데이터를 별도의 공간에 나누어 저장하는 것이 최적.
If a에 'abc'가 아닌 'abcdef'를 새로 할당할 경우, 'abc'가 수정되는 것이 아닌, 'abcdef'가 새로 별도의 공간에 저장되어 이 주솟값이 저장된다.
Example 500개의 변수를 생성하여 모든 변수에 숫자 5를 할당하는 상황을 생각해보자. 주솟값 참조가 아닌, 변수 공간마다 5가 대입될 경우 숫자형은 8byte가 필요하기에 총 4000(5008)byte를 사용한다. 하지만 5가 저장된 주소를 참조할 경우 1008(5002+8)byte만 사용하면 된다. (주솟값을 2byte로 계산)

• 기존 데이터는 자신의 주소를 저장하는 변수가 하나도 없게 되면 가비지 컬렉터(Garbage Collector)의 수거 대상이 된다

기본형 데이터와 참조형 데이터

불변값

• 변수 variable와 상수 constant를 구분하는 성질은 '변경가능성', 그것의 대상은 변수 영역의 메모리이다. 한 번 데이터 할당이 이뤄진 변수 공간에 다른 데이터를 재할당을 할 수 있는지 여부가 관건.
• 불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역 메모리이다.

// 불변성
var a = 'abc';
a = a + 'def';

var b = 5;
var c = 5;
b = 7;

// 5가 사라지는 것이 아닌, 숫자 7의 주솟값을 저장하는 것.
// 숫자, 문자열, Boolean, Null, Undefined, Symbol : 불변값
// 한 번 만들어진 값은 가비지 컬렉팅을 당하지 않는 한 영원히 변하지 않음.

가변값

• 참조형 데이터의 기본적인 성질은 가변값인 경우가 많지만 *설정에 따라 불가한 경우도 있고, 아예 불변값으로 사용하는 경우도 있음
• *Object.defineProperty, Object.freeze 등

// 참조형 데이터의 할당
var obj1 = {
	a: 1,
    b: 'bbb'
};
obj1.a = 2;

// 기본형 데이터와의 차이는 '객체의 변수(프로퍼티) 영역'이 별도로 존재.
// 객체가 별도 할애한 영역은 변수 영역, '데이터 영역'은 기존 메모리 공간 그대로 활용.
// 데이터 영역에 저장된 값은 모두 불변값, 변수 영역은 기존 객체 내부 값만 변경되는 것.

중첩 객체 Nested Object

// 중첩된 참조형 데이터(객체)의 프로퍼티 할당
var obj = {
	x: 3,
    arr: [3,4,5]
};
obj.arr = 'str';
// 배열의 경우 변수 공간 확보 & 각각 인덱스를 부여

• 어떤 데이터에 대해 자신의 주소를 참조하는 변수의 개수 : 참조카운트
• 참조 카운트가 0인 메모리 주소는 가비지 컬렉터의 수거 대상이 됨

변수 복사 비교

// 객체의 프로퍼티 변경 시
var a = "10"
var b = a;

var obj1 = {c: 10, d: 'ddd'};
var obj2 = obj1;

• 변수를 복사하는과정은 기본형 데이터와 참조형 데이터 모두 같은 주소를 바라보게 되는 점에서 동일
• 복사 과정은 동일하지만 데이터 할당 과정에서 차이가 있음. 변수 복사 이후 동작에서 큰 차이.

// 위 코드 실행 이후 적용 
b = 15;
obj.c = 20;

// 이 경우, 아래와 같이 표현할 수 있다. 

a !== b
obj1 === obj2

• 엄밀히 말하면 모든 데이터 타입은 참조형 데이터일 수 밖에 없다. 다만, 기본형은 주솟값을 복사하는 과정이 한 번만 이뤄지고, 참조형은 한 단계를 더 거치게 된다는 차이가 있음.

// 객체 자체를 변경했을 때

var a = 10;
var b = a;
var obj1 = {c: 10, d: 'ddd'};
var obj2 = obj1;

b = 15;
obj2 = {c: 20, d: 'ddd'};
// 이 경우 b와 같이 obj2도 새로운 객체가 할당되어 주솟값이 변경됨.

• 참조형 데이터가 '가변값'이라고 설명할 때의 '가변'은 참조형 데이터 자체를 변경할 경우가 아니라 그 내부의 프로퍼티를 변경할 때만 성립

불변 객체 Immutable Object

• 내부 프로퍼티를 변경할 필요가 있을 때마다 매번 새로운 객체를 만들어 재할당하기로 규칙을 정하거나, 자동으로 새로운 객체를 만드는 *도구를 활용
• *immutable.js, immer.js, immutability-helper 등의 라이브러리, ES6의 spread operator,Object.assign 메서드 등도 같은 목적으로 활용

var user = {
	name: 'Jaenam',
    gender: 'male'
};

var changeName = func