코어 자바스크립트 1강 데이터 타입

1강 데이터 타입

1. 데이터 타입의 종류

자바스크립트의 데이터 타입에는 크게 두 가지가 있습니다.

데이터 타입 종류

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

1-2-1 메모리와 데이터

컴퓨터는 모든 데이터를 0 또는 1로 바꿔 기억합니다. 0 또는 1만 표현할 수 있는 하나의 메모리 조각을 비트라고 합니다. 메모리는 매우 작은 비트들로 구성되어 있습니다. 매우 많은 비트를 한 단위로 묶으면 이번에는 검색 시간은 줄일 수도 있고 표현할 수 있는 데이터의 개수도 늘어나겠지만 동시에 낭비되는 비트가 생기기도 합니다. 자주 사용하지 않을 데이터를 표현하기 위해 빈 공간을 남겨놓기보다는 표현 가능한 개수에 어느 정도 제약이 따르더라도 크게 문제가 되지 않을 적정한 공간을 묶는 편이 낫습니다. 이런 고민의 결과로  바이트(dyte)라는 단위가 생겼습니다. 1바이트는 8개의 비트로 구성돼 있습니다.

 

현재 메모리 용량이 월등히 커진 상황에서 등장한 자바스크립트는 상대적으로 메모리 관리에 대한 압박에서 자유로워졌습니다. 그래서 메모리 공간을 좀 더 넉넉하게 할당했습니다. 숫자의 경우 정수형인지 부동소수형인지를 구분하지 않고 64비트, 즉 8바이트를 확보합니다. 덕분에 개발자가 위와 같은 형변환을 걱정해야 하는 상황이 훨씬 덜 발생하게 되었습니다.

 

1-2-2 식별자와 변수

보통 변수와 식별자를 혼용하는 경우가 많습니다. 식별자라고 해야 할 곳에 변수를, 변수라고 해야 할 곳에 식별자를 쓰는 식으로 말입니다. 혼용이 가능한 이유는 대부분의 경우에 문맥에 따라 무엇을 말하고자 하는지를 유추할 수 있기 때문이지만 둘의 차이를 모른다면 혼란스러울 수 있습니다.

 

변수 - '변할 수 있는 수'입니다. 형용사이지만 컴퓨터용어로 쓸 때는 '변할 수 있는 무언가'라는 명사로 확장시켰습니다. 여기서 무언가란 데이터를 말합니다.

식별자 - 어떤 데이터를 식별하는 데 사용하는 이름, 즉 변수명입니다.

 

3.  변수 선언과 데이터 할당

1-3-1 변수 선언

var a;

'변할 수 있는 데이터를 만든다. 이 데이터의 식별자는 a로 한다.'가 됩니다.

변수란 변경이 가능한 데이터가 담길 수 있는 공간 또는 그릇이라고 생각할 수 있습니다.

 

1-3-2 데이터 할당

 

var a;
a = "abc";

// 한 문장으로 표현
var a = "abc";

데이터를 저장하기 위한 별도의 메모리 공간을 다시 확보해서 문자열 'abc'를 저장하고, 그 주소를 변수 영역에 저장하는 식으로 이뤄집니다.

 

데이터 할당의 전체 흐름

출처 코어 자바스크립트

1. 변수 영역에서 빈공간(@1003)을 확보한다.
2. 확보한 공간의 식별자를 a로 지정한다.
3. 데이터 영역의 빈 공간(@5004)문자열 'abc'를 저장한다.
4. 변수 영역에서 a라는 식별자를 검색한다(@1003).
5. 앞서 저장한 문자열의 주소(@5004)를 @1003의 공간에 대입한다.

왜 변수 영역에 값을 직접 대입하지 않고 굳이 한 단계를 더 거치는 걸까요? 이는 데이터 변환을 자유롭게 할 수 있게 함과 동시에 메모리를 더욱 효율적으로 관리하기 위한 고민의 결과입니다.

문자열 'abc'의 마지막에 'def'를 추가하려고 하면 컴퓨터는 앞서 'abc'가 저장된 공간에 'abcdef'라는 문자열을 새로 만들어 별도의 공간에 저장하고, 그 주소를 변수 공간에 연결합니다.

 

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

1-4-1 불변값

변수와 상수를 구분하는 성질은 '변경 가능성'입니다. 바꿀 수 있으면 변수, 바꿀 수 없으면 상수입니다. 불변값과 상수를 같은 개념으로 오해하기 쉬운데, 이 둘을 명확히 구분할 필요가 있습니다. 변수와 상수를 구분 짓는 변경 가능성의 대상은 변수 영역 메모리입니다. 한 번 데이터할당이 이뤄진 변수 공간에 다른 데이터를 재할당할 수 있는지 여부가 관건입니다. 반면 불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역 메모리입니다.

기본형 데이터인 숫자, 문자열, boolean, null, undefined, Sybol은 모두 불변성의 값입니다.

 

1-4-2 가변값

기본형의 데이터는 모두 불변값이라고 했습니다. 그렇다면 참조형 데이터는 모두 가변값일까요? 기본적으로 성질은 가변값인 경우가 많지만 설정에 따라 변경이 불가능한 경우도 있고, 아예 불변값으로 활용하는 방안도 있습니다.

 

5. 불변 객체

1-5-1 불변 객체를 만드는 간단한 방법

불변객체는 최근 React, Vue.js, Angular 등의 라이브러리나 프레임워크에서뿐만 아니라 함수형 프로그래밍. 디자인 패턴 등에서도 매우 중요한 기초가 되는 개념입니다. 불변객체는 어떤 상황에서 필요할까요? 값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우가 종종 발생합니다. 바로 이럴 때 불변 객체가 필요합니다.

1. 객체의 가변성에 따른 문제점 2. 가변성에 따른 문제점 해결방법 (출처 코어 자바스크립트)

첫 번째 그림은 객체의 가변성으로 인한 문제점을 보여주는 예시입니다. 14번째 줄에서 user변수와 user2 변수가 서로 같지 않다는 조건이 성립하면 15번째 줄의 내용이 출력되겠지만 실제로는 출력 없이 통과합니다. 17번째 줄에서 두 변수의 name 프로퍼티 모두 'Jung'으로 출력되고, 18번째 줄에서는 두 변수가 서로 동일하다고 합니다. 만약 14번째 줄처럼 정보가 바뀐 시점에 알림을 보내야 한다거나, 바뀌기 전의 정보와 바뀐 후의 정보의 차이를 가시적으로 보여줘야 하는 등의 기능을 구현하려면 이대로는 안됩니다. 그렇게 해서 고친 코드가 오른쪽의 코드입니다. ChangeName 함수가 새로운 객체를 반환하도록 수정했습니다. 이제 user와 user2는 서로 다른 객체이므로 안전하게 변경 전과 후를 비교할 수 있습니다.

 

1-5-2 얕은 복사와 깊은 복사

얕은 복사는 바로 아래 단계의 값만 복사하는 방법이고, 깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법입니다. 

 

6. undefined와 null

자바스크립트에는 '없음'을 나타내는 값이 두 가지 있습니다. 바로 undefined와 null입니다. 두 값의 의미는 같은 것 같지만 미세하게 다르고, 사용하는 목적 또한 다릅니다.

 

undefined- 사용자가 명시적으로 지정할 수도 있지만 값이 존재하지 않을 때 자바스크립트 엔진이 자동으로 부여하는 경우도 있습니다. 사용자가 명시적으로 undefined를 지정하는 경우는 달리 덧붙일 내용이 없어 넘어갑니다.

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

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

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

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

 

null- '비어있음'을 명시적으로 나타내고 싶을 때는 undefined가 아닌 null을 사용하면 됩니다. null은 애초부터 이런 용도로 만든 데이터 타입입니다. 추가로 주의할 점은 typeof null이 object라는 점입니다.