코어 자바스크립트 정리 - 1. 데이터 타입
01.데이터 타입의 종류
자바스크립트 데이터 타입에는 크게 두 가지, 기본형(primitve type), 참조형(reference type)이 있다.
- 기본형: 값이 담긴 주솟값을 바로 복제함. 불변성을 띈다.
- 참조형: 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다.
02. 데이터 타입에 관한 배경지식
- 컴퓨터는 모든 데이터를 0또는 1로 바꿔 기억하는 비트(bit)로 기억한다.
- 모든 데이터는 비트의 묶음인 바이트(byte)단위의 식별자, 정확하게는 메모리의 주솟값을 통해 서로 연결하고 구분할 수 있다. 참고로 1바이트는 8비트이다.
03.변수 선언과 데이터 할당
- 식별자는 어떤 데이터를 식별하는 데 사용하는 이름, 즉 변수명이고, 변수는 변할 수 있는 수이다. 값이 반드시 '숫자'여야 하는 건 아니다. 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇이라고 생각하면 되겠다.
변수 선언:
var a; // 변할 수 있는 데이터를 만든다. 이 데이터의 식별자는 a로 한다.
데이터 할당:
var a; 변수 a 선언
a = 'abc'; 변수 에 데이터 할당
var a = 'abc'; 변수 선언과 할당을 한 문장으로 표현변수 영역
| 주소 | .. | 1002 | 1003 | 1004 | 1005 | ... |
|---|---|---|---|---|---|---|
| 데이터 | 이름: a / 값: @5004 |
데이터 영역
| 주소 | .. | 5002 | 5003 | 5004 | 5005 | ... |
|---|---|---|---|---|---|---|
| 데이터 | ‘abc’ |
변수를 선언하는 과정은 메모리에서 비어있는 공간을 확보하고, 해당 공간의 이름을 a로 지정한다.
변수에 데이터를 할당하는 과정은 데이터를 지정하기 위한 별도의 메모리 공간을 확보하고 문자열을 저장한다.
그리고 해당 주소를 변수 영역의 데이터 값에 저장한다.
값에 직접 지정하지 않고 한단계를 더 거치는 이유는 데이터 변환을 자유롭게 할 수 있게함과 동시에 메모리를 더욱 효율적으로 사용하기 위함이다. 변수 영역과 데이터 영역의 분리로 중복된 데이터에 대한 처리 효율이 높아진다.
변경은 새로 만드는 동작을 통해서만 이루어지는데 이는 불변값의 성질이다.
04.기본형 데이터와 참조형 데이터
var a = 10;
var b = a;
var obj1 = {c: 10, d: 'ddd'};
var obj2 = obj1;
변수 복사
메모리에서 비어있는 공간을 확보한 후 공간의 이름을 변수명으로 지정한다. 이후 복사하려는 변수의 이름을 검색해 저장되어 있는 주소를 찾아온 뒤 해당 값을 저장한다.
기본형과 참조형의 차이: 불변성&가변셩
변수의 선언과 할당을 메모리 영역에서 살펴보았을 때 기본형 데이터는 변수에 새로운 기본형 데이터를 할당했을 때 변수 내부에 저장하고 있던 주소값이 변한다. 기본형 데이터는 메모리 상에 한 번 올라가면 변경되지 않기 때문에 새로운 데이터를 할당할 경우 새로운 데이터를 메모리 공간에 새롭게 올리고 이 주소를 변수에 저장하기 때문이다. 그래서 기본형 데이터는 변경되지 않는다해서 불변성을 띈다고도 한다.
참조형 데이터는 프로퍼티의 값을 변경하더라도 참조형 데이터의 프로퍼티 주소를 저장하고 변수의 값은 변경되지 않는다. 그래서 참조형 데이터는 기본형과 반대로 가변성을 띈다고 한다. 하지만 이 가변성은 참조형 데이터의 내부 프로퍼티를 변경할 때만 성립하고, 참조형 데이터 자체를 변경할 경우에는 성립하지 않는다.
05. 불변 객체
참조형 데이터는 내부 프로퍼티를 변경할 때 가변성을 띈다. 그래서 참조형 데이터가 담긴 변수의 값을 복사해 새로운 변수에 저장한 뒤 내부 프로퍼티를 변경하면 원본 참조형 데이터의 내부 프로퍼티의 값 또한 바뀌어 버린다. 하지만 이럴 때 원본 참조형 데이터가 바뀌질 않길 바란다면 참조형 데이터를 복사하면서 새로운 객체를 불변 객체로 만들어야 한다.
불변 객체를 만드는 방법
새로운 객체에 원본 객체 속 바꾸고자 하는 값과 변경하지 않는 기존 값을 넣으면 된다. 이때 기존 값이 기본형 데이터일 경우에는 그대로 복사하고, 참조형 데이터일 경우에는 다시 그 내부 프로퍼티를 복사하면 된다. 이렇게 중첩된 프로퍼티를 모두 복사하는 것을 깊은 복사라고 한다.
얕은 복사와 깊은 복사
-
얕은 복사(shallow copy): 바로 아래 단계의 값만 복사.
ex) 중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사
즉, 원본과 사본이 동일한 참조형 데이터 주소를 가리키므로 사본을 바꾸면 원본도 변경됨 -
깊은 복사(deep copy): 내부의 모든 값들을 하나하나 찾아서 전부 복사.
ex) 중첩된 객체에서 프로퍼티 내부의 값들까지 전부 복사. 재귀로 구현 가능
06. undfinde와 null
undefined와 null은 자바스크립트에서 모두 ‘없음'을 나타낸다. 하지만 미세하게 차이점이 있다.
- undefined
자바스크립트 엔딘은 사용자가 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제로 그렇게 하지 않았을 때 undefined를 반환한다.
- 값을 대입하지 않은 변수. 즉, 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
- 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때
- return 문이 없거나 호출되지 않는 함수의 실행 결과
- null
- null은 ‘비어있음'을 명시적으로 나타내고 싶을 때 사용한다.
- typeof null은 object라고 반환되는데, 이는 자바스크립트 자체 버그이다.
- 따라서 변수의 값이 null인지 확인하려면 일치 연산자로 확인을 해줘야 한다.
- undefined와 null을 구분하기 위해서는 동등 연산자 대신, 일치 연산자(===)를 사용해야 한다.
