06장 데이터 타입
- 자바스크립트의 모든 값은 데이터 타입을 갖는다.
- 예시로 1과 '1'은 비슷해 보이지만 목적과 용도가 다르며, 확보해야 할 메모리 공간의 크기도 다르고 메모리에 저장되는 2진수도 다르며 읽어 들여 해석하는 방식도 다르다.
- 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다.
- 7개의 데이터 타입은 원시 타입(primitive type)과 객체 타입(object/reference type)으로 분류할 수 있다.
| 구분 | 데이터 타입 | 설명 |
|---|---|---|
| 원시타입 | 숫자(number) 타입 | 숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재 |
| 문자열(string) 타입 | 문자열 | |
| 불리언(boolean) 타입 | 논리적 참(true)과 거짓(false) | |
| undefined 타입 | var 키워드로 선언된 변수에 암묵적으로 할당되는 값 | |
| null 타입 | 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 | |
| 심벌(symbol) 타입 | ES6에서 추가된 7번째 타입 | |
| 객체타입 | 원시 타입을 제외한 모든 것 |
1. 숫자 타입
- 자바스크립트는 하나의 숫자 타입만 존재한다.
- ECMAScript 사양에 따르면 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따른다. 즉, 모든 수를 실수(float)로 처리한다.
- 이는 정수로 표시된다 해도 사실은 실수라는 것을 의미한다.
- 숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있다.
- Infinity: 양의 무한대
- -Infinity: 음의 무한대
- NaN: 산술 연산 불가(not a number)
2. 문자열 타입
- 문자열은 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합이다.
- 문자열은
큰따옴표(""), 작은따옴표(''), 백틱(``)으로 텍스트를 감싼다.
3. 템플릿 리터럴
- 템플릿 리터럴은 ES6부터 새로운 문자열 표기법으로 도입되었다.
- 템플릿 리터럴은 멀티라인 문자열(multi-line string), 표현식 삽입(expression interpolation), 태그드 템플릿(tagged template) 등 편리한 문자열 처리 가능을 제공한다.
- 템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리된다.
var template = "Template literal";
console.log(template);3-1. 멀티라인 문자열
- 일반 문자열 내에서는 줄바꿈(개행)이 허용되지 않는다.
- 줄바꿈 등의 공백을 표현하려면 백슬래시
(\)로 시작하는 이스케이프 시퀸스를 사용해야 한다. - 일반 문자열과 달리 템플릿 리터럴 내에서는 이프케이프 시퀸스를 사용하지 않고도 줄바꿈이 허용되며, 공백도 있는 그대로 적용된다.
3-2. 표현식 삽입
- 문자열은 연산자 + 를 사용하여 연결할 수 있다.
- 템플릿 리터럴 안에서는 표현식 삽입(expression interpolation)을 통해 간단히 문자열을 삽입할 수 있다.
var first = "Bokyeong";
var last = "Kim";
// ES5: 문자열 연결
console.log("My name is " + first + " " + last + "."); // My name is Bokyeong Kim.
// ES6: 표현식 삽입
console.log(`My name is ${first} ${last}.`); // My name is Bokyeong Kim.4. 불리언 타입
불리언 타입의 값은 논리적 참, 거짓을 나타내는 true와 false뿐이다.
5. undefined 타입
undefined 타입은 undefined가 유일하다.
- var 키워드로 선언한 변수는
undefined로 초기화된다. - 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이루어질 때까지 빈 상태로 두지 않고 자바스크립트 엔진이 undefined로 초기화한다.
- 따라서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면
undefined가 반환된다.
이처럼 undefined는 개발자가 의도적으로 할당하는 값이 아닌 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값이다.
의도적으로 할당한다면 null을 할당해라.
6. null 타입
null 타입의 값은 null이 유일하다.
- 프로그래밍 언어에서
null은 변수에 값이 없다는 것을 의도적으로 명시 할 때 사용한다. - 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 의미한다.
- 함수가 유효한 값을 반환할 수 없는 경우 명시적으로
null을 반환하기도 한다.
<!DOCTYPE html>
<html>
<body>
<script>
var element = document.querySelector(".myClass");
// HTML 문서에 myObj 클래스를 갖는 요소가 없다면 null을 반환
console.log(element); // null
</script>
</body>
</html>7. 심벌 타입
- 심벌(symbol)은 ES6에서 추가된 7번째 타입으로, 변경 불가능한 원시 타입의 값이다.
- 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.
// 심벌 값 생성
var key = Symbol("key");
console.log(typeof key); // symbol
// 객체 생성
var obj = {};
// 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 "프로퍼티 키"로 사용
obj[key] = "value";
console.log(obj[key]); // value8. 객체 타입
자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체이다.
지금까지 살펴본 6가지 데이터 타입 이외의 값은 모두 객체 타입이다.
9. 데이터 타입의 필요성
9-1. 데이터 타입에 의한 메모리 공간의 확보와 참조
- 메모리에 값을 저장하려면 먼저 확보애햐 할 메모리 공간의 크기를 결정해야 한다.
- 자바스크립트 엔진은 데이터 타입에 따라 정해진 크기의 메모리 공간을 확보한다.
- 메모리 셀 크기를 알아야 값을 참조할 수 있다
9-2. 데이터 타입에 의한 값의 해석
- 메모리에 2진수로 들어오는 값을 어떻게 해석할 지 결정하기 위해 데이터 타입이 필요하다 (ex. 'A'와 65는 2진수 값이 동일하므로 데이터 타입으로 판단한다.)
10. 동적 타이핑
10-1. 동적 타입 언어와 정적 타입 언어
- 자바스크립트는 변수를 선언할 때 타입을 선언하지 않는다.
- 다만 var, let, const 키워드를 사용해 변수를 선언할 뿐이다.
- 자바스크립트에서는 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고 변수의 타입을 언제든지 자유롭게 변경할 수 있다.
자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론 type inference)된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다.
이러한 특징을 동적 타이핑(dynamic typing)이라 한다.
- 기본적으로 변수는 타입을 갖지 않는다.
- 하지만 값은 타입을 갖는다.
10-2. 동적 타입 언어와 변수
- 동적 타입 언어는 변수에 어떤 데이터 타입의 값이라도 자유롭게 할당할 수 있다.
- 동적 타입 언어는 유연성(flexibillity)은 높지만 신뢰성(reliabillity)은 떨어진다.
10-2-1. 변수를 사용할 때 주의할 사항들
- 변수는 꼭 필요한 경우에 한해 제한적으로 사용한다. => 변수의 개수가 많으면 많을수록 오류가 발생할 확률도 높아진다. 따라서 무분별한 남발은 지양하고 필요한 만큼 최소한으로 유지하도록 주의해야 한다.
- 변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제해야 한다. => 변수의 유효 범위가 넓을수록 변수로 인해 오류가 발생할 확률이 높아진다.
- 전역 변수는 최대한 사용하지 않도록 한다. => 어디서든지 참조 / 변경 가능한 전역 변수는 의도치 않게 값이 변경될 가능성이 높고 다른 코드에 영향을 줄 가능성도 높다.
- 변수보다는 상수를 사용해 값의 변경을 억제한다
- 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍한다.
QnA 진행 내용
1. typeof null 의 결과는 무엇인가요?
- object
2. 데이터 타입의 필요성에 대해 이야기해주세요
-
- 값을 저장하기 위해서 필요한 메모리 공간을 계산하기 위해서
-
- 값을 참조하기 위해서 읽어들어야 할 메모리 공간을 계산하기 위해서
-
- 값을 참조하면 2진수 값인데 이걸 어떻게 해석하냐를 확인하기 위해서
- 메모리 크기를 먼저 정해야 하기 때문에 필요합니다.
3. undefined와 null의 차이는 무엇인가요?
- 개발자가 의도함 = null, 의도하지 않았지만 암묵적으로 할당되는 빈 값 = undefined
- undefined는 선언하고 값을 할당하지 않은 변수에 자동할당, null은 값이 의도적으로 비어있음을 나타냄
- undefined는 메모리 값이 할당되지 않은 것
- null은 빈 값이 할당 된 것
- undefined는 의도하지 않은 값으로 자바스크립트 엔진에 의해 암묵적으로 할당되는 값이다. null은 의도적으로 값이 없음을 표현하기 위해 할당하는 값이다.
