[Deep Dive] 데이터 타입

---

자바스크립트의 데이터 타입은 총 8가지를 가진다. (ES11 에서 새로운 원시값 BigInt 가 추가되었다. 기존 숫자값의 최대치보다 더 큰 숫자를 표현할때 사용된다.)

 

구분	데이터타입	설명
원시 타입	숫자 타입(number)	숫자, 정수와 실수 구분 없이 하나의 숫자 타입
	문자 타입(string)	문자열
	불리언 타입(boolean)	논리적 참(true)과 거짓(false)
	undefined	var 키워드로 선언된 변수에 암묵적으로 할당되는 값
	null	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
	심벌 타입	ES6에서 추가된 7번째 타입
	bigint 타입	ES11에서 추가된 8번째 타입
객체 타입		객체, 함수, 배열 등

 

6-1. 숫자타입

자바스크립트는 독특하게 하나의 숫자 타입만 존재한다. 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입은 따로 존재하지 않는다.

var integer = 10;
var double = 10.12;
var negative = -20;

또한 자바스크립트는 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않기 때문에 이들 값을 참조하면 모두 10진수로 나오게 된다.

var binary = 0b0100001;
var octal = 0o101;
var hex = 0x41;

// 표기법만 다를 뿐 모두 같은 값이다.
console.log(binary); // 65
console.log(octal); // 65
console.log(hex); // 65

숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있다.

console.log(10 / 0); // Infinity
console.log(10 / -0); // -Infinity
console.log(1 * 'String') // NaN

여기서 NaN 은 산술 연산 불가(not-a-number) 를 나타내는 표현인데, 꼭 NaN 이라 해주어야 한다. nan, NAN 등등은 모두 식별자로 판단한다.

---

6-2. 문자열 타입

문자열 타입은 텍스트 데이터를 나타내는데 사용한다. 문자열은 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합으로 전 세계 대부분의 문자를 표현할 수 있다.

var string;
string = 'hello'; // 작은 따옴표
string = "hello"; // 큰 따옴표
string = `hello`; // 백틱(ES6)

따옴표로 감싸는 이유는 식별자나 키워드로 인식하지 않게 하기 위함이다.

var string = hello; // ReferenceError: hello is not defined

---

6-3. 템플릿 리터럴

일반적인 따옴표로 표현하는 것이 아니라 백틱을 사용해서 표현하는 방법. (ES6부터 도입)

 

특징이라면 우선, 멀티라인 문자열을 허용한다. 일반 문자열의 경우 줄바꿈 등의 공백을 표현하려면 백슬래시로 시작하는 이스케이프 시퀀스를 사용해야 하는데, 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않더라도 줄바꿈이 허용된다. 공백 역시 그대로 표현된다.

//일반 문자열
var template = '<ul>\n\t<li>HOME</li>\n</ul>';

//템플릿 리터럴
var template = `<ul>
	<li>HOME</li>
    </ul>`;

그리고 문자열은 문자열 연산자 + 를 통해 연결할 수 있다. 

var first = 'ung-mo';
var last = 'Lee';

//ES5: 문자열 연결
console.log('My name is' + first + ' ' + last + '.'); // my name is ung-mo Lee.

템플릿 리터럴 내에서는 표현식 삽입을 통해 간단히 문자열을 삽입할 수 있다. 더 심플하고 간단해졌다.

var first = 'ung-mo';
var last = 'Lee';

//ES6: 표현식 삽입
console.log(`my name is ${fisrt} ${last}.`);

---

6-4. 불리언 타입

var foo = true;
console.log(foo); // true;

foo = false;
console.log(foo); // false;

불리언 타입은 0과 1, 참과 거짓 등으로 구분되는 조건에 의해 프로그램의 흐름을 제어하는 조건문에 자주 사용한다. 

---

6-5. undefined 타입

undefined 타입의 값은 undefinend 가 유일하다.

 

이전 글에서 얘기하였듯이, 변수가 선언된 다음 초기화 과정에서 엔진은 메모리 공간에 undefined 를 할당하게 된다. 

var foo;
console.log(foo); // undefined;

그러니깐 undefined 는 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값이다. 변수를 참조했을 때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 할당된 적이 없는, 즉 초기화되지 않은 변수라는 것을 같파할 수 있다.

 

그래서 개발자가 의도적으로 undefined 를 사용하는것은 권장하지 않는다. 왜냐하면 엔진이 undefined 를 부여한것인지, 개발자가 의도하여 부여한 것인지 알기 어렵기 떄문이다. 이때 개발자가 사용할 수 있는 방법이 null 을 사용하는 것이다.

---

6-6. null 타입

마찮가지로 null 타입의 값은 null 이 유일하다. 위에서 개발자가 의도적으로 변수에 값이 없다는 것을 명시하고 싶을 때 사용하게 된다.

 

이 말은 이전에 변수가 참조하고 있던 값을 참조하지 않겠다고 선언하는것과 같다. 이전의 참조를 명시적으로 제거하고 이후 새로운 메모리 공간에 null 을 할당하여 참조한다. 그렇기에 이전 참조했던 값은 쓰레기 값이 되어지고 이후 시간이 지나 가비지 컬렉터에 의해 사라지게 된다.

var foo = 'choi'


// 이전 참조를 제거. foo 변수는 더 이상 'choi'를 참조하지 않는다
// 유용해 보이지는 않는다. 변수의 스코프를 좁게 만들어 변수 자체를 재빨리 소멸시키는 편이 낫다.
foo = null;

변수의 스코프를 좁게 만든다는 것은 결국 변수를 전역변수가 아닌 지역변수로서 활용하는것이 더 좋다는 의미이다. 일일히 전역변수들 중 쓰지 않는 값은 null 처리 하는것보다 말이다.

 

함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다. 예를 들어 HTML 요소를 검색해 반환하는 document.querrySelector 메서드는 조건에 부합하는 HTML 요소를 검색할 수 없는 경우 에러대신 null 을 반환한다.

---

6-7. 데이터 타입의 필요성

너무 중요한 나머지 객체는 추후에 다룰 예정이지만, 어찌되었던 우리는 원시타입과 객체타입을 나누고, 원시타입들도 여러가지로 구별을 짓는다. 이렇게 타입을 나누는 이유는 무엇일까? 

 

미리 언급을 해보자면 크게 3가지로 나눌 수 있다.

 

• 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
• 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
• 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

메모리 크기라는 말이 가장 많이 나오는것 같다. 우리가 변수를 선언하면서 값을 할당할 때, 자바스크립트는 할당된 값에 대해 얼마나 많은 메모리 공간을 사용해야 할지 파악할 필요가 있다. 그래야 낭비와 손실이 없기 떄문이다. 

var score = 100;
// 이 값은 2진수로 메모리에 할당이 된다.
// 리터럴 100을 숫자타입으로 해석하고 8바이트의 메모리 공간을 확보

예를 들어 100이라는 값을 할당하였다면, 자바스크립트는 리터럴 100을 숫자타입으로 감지한다. 이후 타입과 값에 맞는 데이터 메모리 공간을 구축한다. 이후 2진수로 저장해놓는다.

 

변수는 메모리 공간의 주소를 가리킨다고 앞에서 설명하였다. 할당된값을 참조하기 위해서는 주소를 찾아가야 한다. 이때 참조를 하려면 한 번에 읽어들여야 하는 메모리 셀의 개수를 알아야 한다. score 변수의 경우 숫자타입이기에 8바이트 단위로 읽어 들이지 않는다면 값이 훼손되기 때문이다. 자바스크립트는 선언된 변수 score 에 값이 숫자타입이기에 score 변수를 숫자타입으로 인식한다. 그렇기에 score 를 참조할 시 8바이트 단위로 메모리 공간에 저장된 값을 읽어 들인다.

 

불러 들이는 것 까지는 했지만, 메모리에서 읽어들인 2진수를 어떻게 해석할 것인가. 값들은 메모리공간에서 2진수로 저장이 된다. 이러한 데이터는 타입에 따라 다르게 해석이 되는데, 0100 0001을 예를 들자면 숫자타입으로 변경시 '65' 지만, 문자열로 해석시 'A' 이다.

 

앞에서 살펴본 예제의 score 변수에 할당된 값은 숫자 타입의 값이기에, 이를 인식한 자바스크립트는 숫자로 해석하게 된다. 결론적으로 우리가 숫자타입으로 값을 할당하게 될 시 다시 참조하는데까지 이러한 결정타입은 계속 영향을 미치게 된다. 

---

6-10. 동적 타이핑

C나 자바 같은 언어를 정적 타입(static/strong type) 이라고 하는데, 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 데이터 타입을 사전에 선언하는 언어이다. 이를 명시적 타입 선언(explicit type declearation)이라 한다.

char c;

int num;

이런식을 변수 앞에 타입을 선정해주고, 이로 인해 이 변수에 할당하는 값의 타입이 결정된다. 이외의 타입의 값은 할당할 수 없다. 

 

정적 타입의 언어는 컴파일 시점에 타입체크(선언한 데이터 타입에 맞는 값을 할당했는지 검사하는 처리)를 수행한다. 당연하게도 맞지 않는 타입의 값이 할당되어있다면 바로 에러를 발생시킨다. 개발자가 의도한 타입의 값만 할당할 수 있기 때문에, 타입의 일관성을 강제함으로써 더욱 안정적인 코드의 구현을 통해 런타임에서 발생하는 에러를 줄일 수 있게 된다. 

 

반면, 자바스크립트는 이와 달리 변수를 선언할 때 타입을 선언하지 않는다. 대신 let, const, var 키워드를 사용해 변수를 선언할 뿐이다. 초기 변수 선언 시 타입이 결정되지 않으니, 자바스크립트는 할당된 값의 데이터 타입에 의해 변수의 타입도 결정이된다. 

var foo;
console.log(typeof foo); // undefined

foo = 3;
console.log(typeof foo); // number

foo = 'hello'
console.log(typeof foo); // string

foo = true;
console.log(typeof foo); // boolean

foo = null;
console.log(typeof foo); // null

foo = symbol();
console.log(typeof foo); // symbol
....
....

위 코드처럼 하나의 변수에 여러가지 타입을 그때그때 자유롭게 할당할 수 있다.  콘솔에 찍힌 타입은 결국은 변수에 할당 된 값을의 데이터 타입이라고 생각하면 된다. 

 

위에서 정적 타입 언어와 위 자바스크립트이 차이는 무엇인가? 정적타입의 언어에서는 변수를 선언할 때 이미 데이터 타입이 결정이 되었다. 하지만 자바스크립트와 같은 경우 변수에 할당되는 값들에 의해 데이터 타입이 결정이 나게 된다.

다시 말해, 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이러한 특징을 동적 타이핑(dynamic typing) 이라고 하며, 자바스크립트를 정적 타입 언어와 구별하기 위해 동적 타입 언어(dynamic type)라 한다. 

 

변수는 타입을 가지진 않지만, 값은 타입을 가지니 현재 변수에 할당되어 있는 값에 의해 변수의 타입이 동적으로 결정된다고 표현하는 것이 적절하겠다.

 

항상 편리성에는 그에 대한 대가가 있을 것이다

 

처음부터 엄격하게 타입을 선언하는 것과 달리, 할당된 값에 따라 자유롭게 타입이 결정된다면, 개발자 입장에서 좀 더 편하게 사용할 수 있는 언어는 동적 타입 언어일 수 있다. 사람에게는 편리할 수 있다. 하지만 그것은 곧 양면성을 띄는 얘기이기도 하다. 

 

변수에 할당되는 값에 의해 타입이 지속적으로 변화하게 된다면, 결국 자바스크립트는 변수의 값을 확인하기 전에는 타입을 확신할 수 없다. 또한 자바스크립트는 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되기도 한다. 이러한 점들에 의해 잘못된 예측으로 작성된 프로그램들이 생성될 수 있고, 당연히 오류가 계속해서 생성될 것이다. 

 

동적 타입의 언어는 유연성(flexibilty)은 높지만 신뢰성(reliability)는 떨어진다.

 

사실 이러한 이유로서 현업에서도 자바스크립트 대신 타입스크립트가 점점더 선호되고, 실제로 거진 다 타입스크립트로서 프로그래밍 하는 상황이다. 유연성보다도 시스템이 안전성을 가지는 것이 더 중요하다 판단하기 때문이다. 아래는 변수를 사용할 때의 유의점이긴 하지만, 인간인 이상 완벽할 수 없어서 더욱이 타입스크립트의 도입을 생각하게 되는 것 같다.

 

• 변수는 꼭 필요한 경우에 한해 제한적으로 사용한다.
• 변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제해야 한다.
• 전역 변수는 최대한 사용하지 않도록 한다.
• 변수보다는 상수르 사용해 값의 변경을 억제한다
• 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍한다.

우리는 코드를 작성함과 동시에 다른 사용자들과 커뮤니케이션을 해야한다. 개발자들을 위한 문서이기도 하니 그에 맞는 사람이 이해할 수 있는 가독성 있는 코드가 좋은 코드일 것이다. 

---

사실 정말 중요한 객체 타입에 대해서는 지금 다루지 않았다. 

원시타입과 객체 타입을 나누는 것만큼 자바스크립트에서 객체 타입이 차지하는 비중은 상당히 크다. 아마도 저자도 이를 알기에 따로 더 자세하게 설명하겠다고 하였으니, 객체를 다룰떄 다시 얘기하도록 하겠다.