데이터 타입은 값의 종류를 말한다.
자바스크립트는 7개의 데이터 타입(크게 원시 타입과 객체 타입으로 나눌 수 있다)을 제공하는데, 자바스크립트의 모든 값은 데이터 타입을 갖는다. 그리고 자바스크립트 엔진은 타입을 구별해서 값을 취급한다.
숫자 타입
자바스크립트에는 하나의 숫자 타입만 존재한다.
C나 자바와는 다르게도 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않기 때문에, 모두 10진수로 해석된다.
또한, 다음의 특별한 값도 표현할 수 있다.
- Infinity: 양의 무한대
- -Infinity: 음의 무한대
- NaN(not a number): 산술 연산 불가
// 다음 값들은 모두 65로 같은 값들이다.
var binary = 0b01000001; // 2진수
var octal = 0o010; // 8진수
var hex = 0x41; // 16진수// 숫자 타입은 모두 실수로 처리된다.
console.log(1 === 1.0): // true
console.log(3 / 2); // 1.5문자열 타입
문자열 타입은 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합으로 텍스트 데이터를 나타내는 데 사용한다.
키워드나 식별자 같은 토큰과 구분하기 위해서 작은따옴표('')(일반적으로 가장 많이 사용한다), 큰따옴표(""), 백틱(``)으로 문자열을 감싸서 표현한다.
자바스크립트의 문자열은 원시 타입이며, 변경 불가능한 값이다. 그렇기 떄문에 문자열이 생성되면 그 문자열을 변경할 수 없다는 특징이 있다.
템플릿 리터럴
ES6부터 도입된 새로운 문자열 표기법으로, 편리한 문자열 처리 기능을 제공한다. 런타임에 일반 문자열로 변환되어 처리된다.
템플릿 리터럴이 제공하는 편리한 문자열 처리 기능은 다음과 같다.
멀티라인 문자열
var template = '<ul>\n\t<li><a href="#">Home</al></li>\n<ul>';
var template = `<ul>
<li><a href="#">Home</a></li>
</ul>`;
// 다음 값들은 동일한 값을 갖는다.표현식 삽입
var first = 'Hee-young';
var last = 'Yoon';
// ES5: 문자열 연결
console.log('My name is ' + first + ' ' + last + '.');
// ES6: 표현식 삽입
console.log(`My name is ${first} ${last}.`);
// 다음 코드들은 모두 My name is Hee-young Yoon.를 출력한다.표현식 삽입 시에는 ${}으로 표현식을 감싸는데, 표현식의 평과 결과가 문자열이 아니더라도 문자열로 타입이 강제로 변환되어 삽입된다. 또, 반드시 템플릿 리터럴 내에서만 가능하다.
불리언 타입
불리언 타입은 논리적 참, 거짓을 타나내는 true와 false뿐이다.
undefined 타입
var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화 되는데, 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 자바스크립트 엔진이 undefined로 초기화 한다. 그러므로 변수 선언 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다.
var foo;
console.log(foo); // undefined다음과 같이 undefined는 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값이다. 그러므로 의도적으로 변수에 할당한다면 undefined의 본래 취지와 어긋나고 혼란을 줄 수 있으므로, 변수에 값이 없다는 것을 명시하고 싶을 때는 null을 할당한다.
null 타입
변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다. 변수에 null을 할당하는 것은 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 의미하며, 자바스크립트 엔진은 누구도 참조하지 않는 메모리 공간에 대해 가비지 콜렉션을 수행한다. 또한 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다.
<!DOCTYPE html>
<html>
<body>
<script>
var element = document.querySelector('.myClass');
console.log(element); // null
</script>
</body>
</html>심벌 타입
ES6에서 추가된 7번째 타입으로, 변경 불가능한 원시 타입의 값이다.
심벌 값은 다른 값과 중복되지 않는 유일무이한 값인데, 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.
리터럴을 통해 생성하는 다른 원시 값과 달리 심벌은 Symbol 함수를 호출해 생성한다.
// 심벌 값 생성
var key = Symbol('key');
console.log(typeof key); // symbol
// 객체 생성
var obj = {};
// 유일무이한 값인 심벌을 프로퍼티 키로 사용한다.
obj[key] = 'value';
console.log(obj[key]); // value객체 타입
자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체다. 위의 6가지 데이터 타입 이외의 값은 모두 객체 타입이다.
데이터 타입의 필요성
var score = 100;이와 같이 변수를 선언하고 값을 할당하는 경우 자바스크립트 엔진은 데이터 타입에 따라 정해진 크기의 메모리 공간을 확보 후 2진수로 저장한다. 즉, 데이터 타입에 따라 메모리 공간의 크기를 결정하는 것이다.
반대로 식별자 score를 통해 값을 참조하는 경우 한 번에 읽어 들여야 할 메모리 공간의 크기를 알아야 한다. score 변수에 저장되어 있는 값이 숫자 타입이므로 8바이트 단위로 메모리 공간에 2진수로 저장된 값을 읽는다.
메모리에서 읽어 들인 2진수는 데이터 타입에 따라 다르게 해석될 수 있다.
하지만 score 변수에 숫자 타입의 값이 할당되었으므로 숫자로 해석한다.
이러한 이유로 인해 데이터 타입이 필요하다.
동적 타이핑
자바스크립트는 C, C++, Java 등의 정적 타입 언어와는 달리 변수 선언 시 별도의 타입을 지정하지 않는다. var, let, const 키워드를 사용해 변수를 선언할 뿐인데, 어떠한 데이터 타입의 값이라도 자유롭게 할당할 수 있다 (할당에 의해 타입이 추론된다).
또한 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고, 변수의 타입을 자유롭게 변경할 수 있다. 이러한 특징을 가진 자바스크립트, 파이썬, PHP 등의 언어를 동적 타입 언어라고 한다.
자바스크립트 변수의 타입은 현재 변수에 할당되어 있는 값에 의해 동적으로 결정된다.
양날의 검
동적 타입 언어는 데이터 타입에 대해 무감각해질 정도로 편리하다는 장점이 있다.
하지만 이런 장점과 더불어 단점도 함께 따라오게 된다.
복잡한 프로그램에서는 변화하는 변수 값을 추적하기 어려울 수 있다. 또한 값의 변경에 의해 타입도 언제든지 변경될 수 있으므로 값을 직접 확인하기 전에는 타입을 확신할 수 없다.
자바스크립트 엔진에 의해 개발자의 의도와는 상관없이 타입이 자동으로 변환되기도 한다.
유연성은 높지만 신뢰성은 떨어지는 것이다.
그러므로 자바스크립트에서 변수 사용 시에는 주의해야 할 사항은 다음과 같다.
- 변수는 필요한 경우에 한해 필요한 만큼 최소한으로 유지한다.
- 변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제한다.
- 전역 변수는 최대한 사용하지 않도록 한다.
- 상수 const를 사용해 값의 변경을 억제한다.
- 변수명은 변수의 목적이나 의미를 파악할 수 있도록 네이밍한다.
해당 원칙들을 지켜 가독성이 좋은 코드를 작성하도록 노력해야 한다.
