자바스크립트의 모든 값은 데이터 타입을 가진다.
데이터 타입은 원시 타입과 객체 타입으로 나눌 수 있다.
|
원시 타입
(primitive type) |
숫자(number) 타입
|
정수+실수
|
|
문자열(string) 타입
|
문자열
|
|
|
불리언(boolean) 타입
|
논리적 참(true), 거짓(false)
|
|
|
undefined 타입
|
var 키워드로 선언된 변수에 암묵적으로 할당하는 값
|
|
|
null 타입
|
값이 없다는 것을 의도적 명시
|
|
|
심벌(symbol) 타입
|
중복 방지
|
|
|
객체 타입
(object/reference type) |
객체, 함수, 배열 등
|
|
유명한 예시로 1+1 =2/'1'+1'='11'를 보면 왜 데이터 타입이 중요한지 알 수 있다.
이렇게 문자열과 숫자 구별 말고도 다른 이유는 메모리 공간의 확보와 참조이다.
자바스크립트 타입은 데이터 타입에 따라 맞는 메모리 공간을 확보한다.
그리고 나중에 우리가 할당된 값을 참조할 때, 해당 메모리 공간(메모리 셀의 개수)의 크기를 알고 읽어들이기 때문에 데이터 타입을 잘못 쓰면 메모리의 크기가 달라 받은 값의 2진수를 해석할 때 다르게 해석될 가능성이 있기 때문이다.
따로따로 보자면
1. 값을 저장할 때 확보하는 메모리 공간의 크기 결정
2. 읽어들일 메모리 공간의 크기 결정
3. 메모리에서 읽어 들인 2진수의 해석 결정
때문이다.
암튼 다음은 데이터 타입
1. 숫자 타입
정수와 실수를 구별하지 않는다.
그냥 모든 수를 실수로 처리한다.
정수, 실수, 2진수, 8진수, 16진수 모두 메모리에 배정밀도 64비트 부동소수점 형식의 2진수로 저장된다.
2진수, 8진수, 16진수 모두 따로 표현하기 위한 데이터 타입이 없어 10진수로 해석된다.
다른 특별한 값은 세 개 정도가 있다.
console.log(10/0); //Infinity: 양의 무한대
console.log(10/-0); //-Infinity: 음의 무한대
console.log(1*'String'); //NaN: 산수 연산 불가(not-a-number)
2. 문자열 타입
텍스트 데이터를 나타내는 데이터 타입이다.
16비트 유니코드 문자(UTF-16)의 집합으로 전 세계 대부분의 문자를 표현할 수 있다.
문자열을 쓸 때는 작은따음표(''), 큰따음표(""), 백틱(``) 안에 넣는다.
일반적인 표기는 작은따음표를 쓰되, 특별한 경우 백틱을 사용하는 경우가 종종 있다.
ES6부터는 템플릿 리터럴(template literal)을 사용하여 문자열을 표기한다.
템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리된다.
이런 경우 백틱(``)을 쓰는거다.
var template = `Template leteral`요렇게 쓰는거임
2-1. 멀티라인 문자열
일반 문자열에서는 줄바꿈이 허용되지 않기 떄문에 백슬래시(\)로 시작하는 이스케이프 시퀀스(escape sequence)를 사용하여 표현한다.
| \0 | Null |
| \b | 백스페이스 |
| \f | 폼 피드(Form Feed, 프린터로 출력할 경우 다음 페이지의 시작 지점으로 이동) |
| \n | 개행(Line Feed, 다음 행으로 이동) |
| \r | 개행(Carriage Return, 커서를 처음으로 이동 |
| \t | 탭(수평) |
| \v | 탭(수직) |
| \uXXXX | 유니코드 |
| \' | 작은따음표 |
| \" | 큰따음표 |
| \\ | 백슬래시 |
난 맥OS이므로 내 기준으로 맥은 줄바꿈을 할 때 \n을 쓴다.
var template = `<ul>\n\t<li><a href="#">Home</a></li>\n\t<ul>`;
var template = `<ul>
<li><a href="#">Home</a></li>
<ul>`;따로 이스케이프 시퀀스 없이도 백틱을 사용하면 줄바꿈이 가능하다.
2-2. 표현식 삽입
문자열끼리 더할 때 사용한다.
var name = 'minsu';
console.log('My name is' + minsu);이렇게 + 연산자로 붙여주면 된다.
표현식 삽입은 다르게도 가능하다.
var name = 'minsu';
console.log(`My name is ${name}.`);이렇게 ${ } 안에 표현식을 넣어주면 된다.
안에 들어간 표현식은 문자열로 변환되어 삽입된다.
여기서는 꼭 템플릿 리터럴 내에서 사용(백틱 사용)하는 것을 잊지 말자.
3. 불리언 타입
참과 거짓.
var minsu = true;
console.log(minsu); //true
var minsu = false;
console.log(minsu); //false조건문에 쓰인다.
4. undefined 타입
이 타입의 값은 Undefined밖에 없다.
처음 변수를 선언할 때는 값을 할당하지 않으면 undefined로 초기화된다.
var minsu;
console.log(minsu); //undefined값을 할당 안했다고 표시하는거지, 일부러 값이 없다고 말하고 싶다면 null을 따로 할당하자.
5. null 타입
null 타입도 값이 null밖에 없다.
위에서도 말했듯 여긴 값 없다고 말할 때 쓴다.
기존 값에 대한 참조를 명시적으로 제거한다는 의미이다.
var minsu = 'his name';
misnu = null; //이전 참조 제거<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
<script>
var element = document.querySelector('.myclass')
console.log(element);
</script>
</body>
</html>함수가 유효한 값을 반환할 수 없을 때도 null을 반환한다.
위에 쓴 document.querySelector 메서드의 경우도 조건에 부합하는 HTML 요소를 검색할 수 없는 경우 null을 반환한다.
6. 심벌 타입
변경 불가능한 값.
다른 값과 중복되지 않기 때문에 객체의 유일한 프로퍼티 키를 만들 때 사용한다.
symbol함수를 호출해 생성.
//심벌 값 생성
var minsu = symbol('minsu');
console.log(typeof minsu); //symbol
//객체 생성
var obj = {};
//이름이 충돌할 위험이 없는 심벌을 프로퍼티 키로 사용
obj[minsu] = 'name';
console.log(obj[minsu]); //name
'Web development > Modern JavaScript Deep Dive' 카테고리의 다른 글
| 모던 자바스크립트 Deep Dive(변수, 식별자) (0) | 2023.03.14 |
|---|---|
| 모던 자바스크립트 Deep Dive(제어문 - 블록문, 조건문, 반복문) (0) | 2023.03.13 |
| 모던 자바스크립트 Deep Dive(그 외 연산자들, 연산자 우선 순위, 연산자 결합 순서) (1) | 2023.03.11 |
| 모던 자바스크립트 Deep Dive(연산자, 산술 연산자) (0) | 2023.03.10 |
| 모던 자바스크립트 Deep Dive (동적 타이핑) (0) | 2023.03.10 |
