모던 자바스크립트 6장 - 데이터 타입

목차

• 데이터 타입이란?
• 숫자 타입
• 문자열 타입
• 불리언 타입
• undefined 타입
• null 타입
• 심벌 타입
• 객체 타입
• 데이터 타입의 필요성

데이터 타입이란?

자바스크립트의 모든 '값'은 데이터 타입을 갖는다.

아래 표는 자바스크립트(ES6)의 7개의 데이터 타입이다.

구분	데이터 타입	설명
원시 타입	숫자 타입	숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재
	문자열 타입	문자열
	불리언 타입	논리적 참과 거짓
	undefined 타입	var 키워드로 선언된 변수에 암묵적으로 할당되는 값
	null 타입	값이 없다는 것을 의도적으로 명시할 때 사용하는값
	심벌 타입	충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용
객체 타입		객체, 함수, 배열 등

처음보면 헷갈릴 수 있다, 천천히 하나씩 살펴보자.

 

숫자 타입

숫자 타입은 숫자 데이터를 나타내는 데 사용한다.

자바스크립트에서 숫자 타입은 모든 수를 실수로 처리한다.

(정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다)

var interger = 10;  // 정수
var double = 10.12; // 실수
var negative = -20; // 음의 정수

console.log(1 === 1.0) // true (숫자 타입은 모두 실수로 처리된다.)

정수, 실수, 2진수, 8진수, 16진수 리터럴은 모두 메모리에 64비트 부동소수점 형식의 2진수로 저장되고, 자바스크립트는 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입이 없기 때문에 값을 참조하면 모두 10진수로 해석된다.

var binary = 0b1000001; // 2진수
var octal = 0o101;      // 8진수
var hex = 0x41;         // 16진수

console.log(binary); // 65
console.log(octal);  // 65
console.log(hex);    // 65
console.log(binary == octal); // true
console.log(octla == hex);    // true

 

추가로, 세 가지 특별한 값도 표현할 수 있다

• Infinity : 양의 무한대
• -Infinity : 음의 무한대
• NaN : 산술 연산 불가 (not-a-number)

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

 

문자열 타입

문자열 타입은 텍스트 데이터를 나타내는 데 사용한다.

문자열은 0개 이상의 16비트 유니코드 자의 집합으로 전 세계 대부분의 문자를 표현할 수 있다.

문자열은 작은따옴표(' '), 큰따옴표(" ") 또는 백틱(` `)으로 텍스트를 감싼다.

가장 일반적인 표기법은 작은따옴표를 사용하는 것이다.

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

ES6부터 템플릿 리터럴이라고 하는 새로운 문자열 표기법이 도입되었는데, 이는 위 코드에서 보았던 백틱(` `)을 사용해 표현한다.

 

템플릿 리터럴 기능 - 1

멀티라인 문자열

 

<ul>

    <li><a href="#">Home</a></li>

</ul>

이와 같은 문자열을 기존 방법으로 표현하려면 이스케이프 시퀀스를 사용하여 표현해야 한다.

var template = '<ul>\n\t<li><a href="#">Home</a></li>\n</ul>';

console.log(template);

일반 문자열과 달리 템플릿 리터럴 내에서는 줄바꿈이 허용되며 모든 공백도 있는 그대로 적용된다.

var template = `<ul>
	<li><a href="#">Home</a></li>
</ul>`;

console.log(template);

 

템플릿 리터럴 기능 - 2

표현식 삽입

var first = 'Hong-cheon';
var last = 'Jeong';

위 코드와 같은 변수가 주어졌을 때

My name is Hong-cheon Jeong.

이와 같은 문자열을 기존 방법으로 표현하려면 문자열 연산자 + 를 이용해 연결해야 한다.

var first = 'Hong-cheon';
var last = 'Jeong';

console.log('My name is ' + first + ' ' + last + '.');

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

표현식을 삽입하려면 ${}으로 표현식을 감싼다.

var first = 'Hong-cheon';
var last = 'Jeong';

console.log(`My name is ${first} ${last}.`);

이때, ${} 내부의 값이 문자열이 아니더라도 문자열로 타입이 강제로 변환되어 삽입된다.

console.log(`1 + 2 + ${1 + 2}`); // 1 + 2 = 3

 

불리언 타입

불리언 타입은 논리적 참, 거짓을 나타내는 true와 false뿐이다.

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

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

불리언 타임은 프로그램의 흐름을 제어하는 조건문에서 자주 사용된다.

 

undefined 타입

undefined 타입은 undefined가 유일하다.

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

var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다.

즉, 변수를 참조했을 때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 할당된 적이 없다는 것을 알 수 있다.

null 타입

null 타입 또한 null이 유일하다.

var blabla = null;
console.log(blabla); // null

null 값은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다.

null을 할당하는 것은 변수가 이전에 참조하는 값을 더 이상 참조하지 않겠다는 의미이다.

또한 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다.

예를 들어, document.querySelector 메서드는 조건에 부합하는 HTML 요소를 검색할 수 없는 경우 null을 반환한다.

심벌 타입

심벌 타입은 변경 불가능한 원시 타입의 값이다.

심벌 값은 다른 값과 중복되지 않는 유일무이한 값이므로 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.

var key = Symbol('key');
console.log(typeof key); // symbol

var obj = {}; // 객체 생성
obj[key] = 'value';
console.log(obj[key]); // value

심볼에 대한 자세한 내용은 33장에서 살펴 볼 예정이다.

객체 타입

// 11장 원시 값과 객체의 비교 보고난 후 추가 예정

 

데이터 타입의 필요성

1. 메모리의 효율적인 사용과 정확한 참조

값은 메모리에 저장하고 참조할 수 있어야 한다.

메모리에 값을 저장하려면 먼저 값의 크기에 맞는 메모리 공간의 크기를 결정하고 그 후 값을 2진수로 저장한다.

var score = 100;

score이란 변수에 숫자 100을 할당하면 8바이트의 메모리 공간을 확보한 다음에 그 공간에 값을 넣는다.

아래는 메모리상에 100이 저장된 예시이다.

(자바스크립트는 숫자 타입의 값을 생성할 때 배정밀도 64비트 부동소수점 형식을 사용하기 때문에 실제로 저장되는 2진수 값은 아래의 표와 다르다.)

	~
score	00000000
	00000000
	00000000
	00000000
	00000000
	00000000
	00000000
	01100100
	~

또한 값을 참조할 때는 식별자 score를 통해 숫자 타입의 값 100이 저장되어 있는 메모리의 첫번째 공간의 주소를 찾아간 뒤, 숫자 타입이므로 8칸을 확인하여 참조한다.

 

2. 타입에 따라 다른 값의 해석

이제 저장과 참조를 통해 메모리에 저장되어 있던 2진수를 읽어 들였다.

2진수를 그대로 출력할 수 없으니 이 값을 타입에 따라 다르게 해석하여 출력한다.

예를 들어서 메모리에 저장되어 있던 값 01000001은

숫자로 해석하면 65지만

문자열로 해석하면 'A'이다. 

 

 

오탈자, 오류 지적, 보완할 점 등 언제나 환영합니다.

메일이나 댓글로  남겨주시면 확인 후 수정하겠습니다.