데이터 타입

자바스크립트의 데이터 타입

자바스크립트의 데이터 타입은 크게 원시형(기본형)과 참조형 두 가지로 분류됩니다. 원시형 데이터 타입으로는 Number, String, Boolean, Undefined, Null과 ES6에서 추가된 Symbol이 있습니다. 참조형으로는 object가 있으며 Array, Function, Date 등이 Object의 하위 분류에 속합니다.

어떤 기준으로 원시형과 참조형을 구분할까?

할당이나 연산 시 원시형은 값이 담긴 주솟값을 바로 복제하고, 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다는 점이 다릅니다. 그래서 원시형과 참조형의 복사본을 각각 생성했을 때 참조형의 경우 원본이 바뀌면 복사본도 똑같이 따라 바뀌고 원시형은 변하지 않는다는 특징이 있습니다.

변수와 상수, 불변값의 차이점

변수(variable)와 상수(constant)를 구분하는 성질은 ‘변경 가능성’입니다. 바꿀 수 있으면 변수, 바꿀 수 없으면 상수입니다. 즉, 한 번 데이터 할당이 이루어진 변수 공간에 다른 데이터를 재할당할 수 있는지 여부가 관건입니다. 반면 불변성 여부를 구분할 때의 변경 가능성이 대상은 데이터 영역의 메모리입니다.

불변값이란?

한 번 만들어지면 영원히 변하지 않는 값입니다. 변경은 새로 만드는 동작을 통해서만 이뤄지고 가비지 컬렉팅을 당하지 않는 한 영원히 변하지 않습니다. 원시형 데이터는 모두 불변값이고 참조형 데이터는 일반적으로 가변값입니다. 다만 참조형 데이터가 ‘가변값’이라고 설명할 때의 ‘가변’은 참조형 데이터 자체를 변경할 경우가 아니라 내부 프로퍼티를 변경할 때만 성립합니다. 데이터 자체를 변경하고자 하면 원시형 데이터와 마찬가지로 기존 데이터는 변하지 않습니다.

객체가 가변하다는 의미

객체의 내부 프로퍼티를 변경했을 때 참조형이 가리키고 있는 주솟값들의 묶음은 변하지 않고 계속해서 같은 주소를 바라봅니다. 대신 주솟값들이 가리키고 있는 데이터 영역의 값에 새로운 변수가 대입됩니다. ‘새로운 객체’가 만들어지는 것이 아니라 기존의 객체 내부 값만 바뀌게 되는 것입니다. 바로 이 부분 때문에 참조형 데이터는 불변하지 않다(가변값이다)라고 합니다.

불변 객체가 필요한 이유

값으로 전달 받은 객체에 변경을 가하더라도 원본 객체가 변하지 않아야 할 경우 불변 객체가 필요합니다. 내부 프로퍼티를 변경할 때마다 매번 새로운 객체를 만들어 재할당한다면 객체 역시 불변성을 확보할 수 있습니다.

불변 객체를 만드는 방법

불변 객체를 만들기 위해서는 프로퍼티의 변경 전과 후에 서로 다른 객체를 바라보게 해야 합니다. 그래서 객체의 내부 프로퍼티를 변경할 필요가 있을 때마다 매번 새로운 객체를 만들어 재할당하기로 규칙을 정하거나 자동으로 새로운 객체를 만드는 도구를 활용한다면 객체 역시 불변성을 확보할 수 있습니다.

1. for in 문법을 이용해 프로퍼티를 복사하는 함수를 생성하는 방법(얕은 복사)

2. immutable.js, baobab.js 등의 라이브러리를 사용하는 방법(얕은 복사)

const로 선언된 객체를 불변하게 만들 수 있는 방법

const는 할당된 값이 상수가 되는 것이 아니라 바인딩된 값이 상수가 되기 때문에 객체의 속성을 변경할 수 있는 상태입니다. 이 때 Object.freeze() 메서드를 사용하면 객체의 속성을 변경 불가 상태로 만들 수 있습니다. Object.freeze()는 동결된 객체를 반환하지만 객체의 재할당은 가능하기 때문에 const와 함께 사용한다면 불변한 객체를 만들 수 있습니다.

얕은 복사와 깊은 복사의 차이점

얕은 복사는 객체 바로 아래 단계의 값만 복사하는 방법이고 깊은 복사는 객체 내부의 모든 값들을 찾아 전부 복사하는 방법입니다. 바로 아래 단계를 제외한 내부 중첩된 객체에서는 여전히 주솟값만 복사하는 상태입니다.

얕은 복사

• for in 문법을 이용해 프로퍼티를 복사하는 함수를 생성하는 방법

• immutable.js, baobab.js 등의 라이브러리를 사용하는 방법

깊은 복사

• for in 문법과 함께 재귀적으로 복사를 수행하는 함수를 이용하는 방법

• 객체를 JSON 문법으로 표현된 문자열로 전환했다가 다시 JSON 객체로 바꾸는 방법

자바스크립트 엔진이 Undefined를 자동으로 부여하는 경우

1. 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때

2. 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때

3. return 문이 없거나 호출되지 않는 함수의 실행 결과

Null과 Undefined의 차이점

undefined는 사용자가 명시적으로 ‘비어있음’을 나타내기 위해 값으로 지정할 수 있지만 자바스크립트 엔진이 자동으로 부여할 수도 있습니다. 이러한 혼란을 피하기 위해서 ‘비어있음’을 나타내고 싶을 땐 null을 사용하는 게 좋습니다. typeof null의 값은 object이며 이는 자바스크립트의 자체 버그입니다. 또한 null과 undefined를 동등 연산자(==)로 비교할 경우 서로 같다고 판단하기 때문에 일치 연산자(===)를 사용하여 비교해야 합니다.