숫자(Number type)
C나 Java의 경우 정수와 실수를 구분해서 다양한 타입이 존재하지만 Javascript는 하나의 숫자(Number) 타입만 존재한다. 숫자 타입의 값은 배정밀도 64bit 부동소수점 형식을 따르므로 모든 수를 실수로 처리한다.
// Number Type
var integer = 5;
var double = 5.24;
var negative = -20;// Number type은 모두 실수로 처리됨
console.log(1 === 1.0);
console.log(3 / 2);
[실행결과]
true
1.5위와 같이 정수끼리 나누더라도 실수가 나올 수 있다.
추가로 세 가지 특별한 값도 표현할 수 있다.
// Number type의 세 가지 특별한 값
console.log(10 / 0);
console.log(10 / -0);
console.log(1 * 'String');
[실행결과]
Infinity
-Infinity
NaNInfinity: 양의 무한대
-Infinity: 음의 무한대
NaN(not-a-number): 산술 연산 불가
📌 javascript는 대소문자를 구분한다.
문자열(String type)
문자열(string) 타입은 텍스트 데이터를 나타내는 데 사용한다. 작은따옴표('), 큰따옴표("), 백틱()`으로 텍스트를 감싼다. 가장 일반적인 표기법은 작은따옴표를 사용하는 것이다.
// String Type
var str1, str2, str3;
str1 = 'single quote str';
str2 = "double quote str";
str3 = `backtick str`;
console.log(str1);
console.log(str2);
console.log(str3);
[실행결과]
single quote str
double quote str
backtick str
'작은따옴표 내의 "큰따옴표"'와 "큰따옴표 내의 '작은따옴표'"는 문자열로 인식된다.
str4 = '당근은 "carrot"입니다.';
str5 = "좋아하는 향수는 'Jomalone'이다.";
console.log(str4);
console.log(str5);
[실행결과]
당근은 "carrot"입니다.
좋아하는 향수는 'Jomalone'이다.📌 javascript의 문자열은 변경 불가능한 값이다.
템플릿 리터럴(template literal)
템플릿 리터럴(template literal)은 멀티라인 문자열(multi-line string), 표현식 삽입(expression interpolation), 태그드 템플릿(tagged template) 등 편리한 문자열 처리 기능을 제공한다. 따옴표 대신 백틱( ` )을 사용해 표현한다.
멀티라인 문자열(multi-line string)
일반 문자열 내에서는 개행이 허용되지 않아 공백을 표현하려면 백슬래시(＼)로 시작하는 escape sequence를 사용해야 한다.
| escape sequence | 의미 |
|---|---|
| ＼0 | Null |
| ＼b | Backspace |
| ＼f | Form Feed; 프린터로 출력할 경우 다음 페이지의 시작 지점으로 이동 |
| ＼n | LF(Line Feed); 다음 행으로 이동 |
| ＼r | CR(Carriage Return); 커서를 처음으로 이동 |
| ＼t | Tab(horizontal) |
| ＼v | Tab(vertical) |
| ＼uXXXX | Unicode |
| ＼' | Single quote |
| ＼" | Double quote |
| ＼＼ | Backslash |
// escape sequence
var escapeSeq = '<ul>\n\t<li><a href="#">Home</a></li>\n</ul>';
console.log(escapeSeq);
[실행결과]
<ul>
<li><a href="#">Home</a></li>
</ul>
템플릿 리터럴 내에서는 escape sequence를 사용하지 않고도 줄바꿈이 허용되며 모든 공백도 있는 그대로 적용된다.
// multi-line string
var template = `<ul>
<li><a href="#">Home</a></li>
</ul>`;
console.log(template);
[실행결과]
<ul>
<li><a href="#">Home</a></li>
</ul>표현식 삽입(expression interpolation)
문자열은 +를 사용해 연결할 수 있다. + 연산자는 피연산자 중 하나 이상이 문자열일 경우 문자열 연결 연산자로 동작하며 그 외의 경우는 덧셈 연산자로 동작한다.
// + 연산자
var hobby = "playing futsal"
console.log('My hobby is ' + hobby + '.');
[실행결과]
My hobby is playing futsal.
템플릿 리터럴 내에서는 표현식 삽입을 통해 문자열 연산자보다 가독성 좋고 간편하게 문자열을 삽입할 수 있다. ${ }으로 표현식을 감싸면 되는데, 표현식의 결과가 문자열이 아니더라도 문자열로 타입이 강제 변환되어 삽입된다.
// expression interpolation
console.log(`My hobby is ${hobby}.`);
[실행결과]
My hobby is playing futsal.불린값(Boolean)
boolean 타입의 값은 true, false뿐이다.
// boolean type
var bool = true;
console.log(bool);
[실행결과]
trueundefined
undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값으로 변수를 참조했을 때 undefined가 반환된다면 선언 이후 값이 할당된 적이 없는, 즉 초기화되지 않은 변수라는 것을 간파할 수 있다.
// undefined
var apple;
console.log(apple);
[실행결과]
undefinednull
null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다. 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미로, 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거한다는 뜻이다.
함수가 유효한 값을 반환할 수 없는 경우에도 null을 반환하기도 한다.
<!DOCTYPE html>
<html>
<body>
<script>
var element = document.querySelector('.myClass');
console.log(element); // null
</script>
</body>
</html>심벌(Symbol)
심벌 타입은 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다. Symbol 함수를 호출해 생성하며, 이때 생성된 값은 외부에 노출되지 않고 다른 값과 절대 중복되지 않는다.
// symbol값 생성
var key = Symbol('key');
// 객체 생성
var obj = {};
// 충돌 위험이 없는 값을 프로퍼티 키로 사용
obj[key] = 'value';
console.log(obj[key]);
[실행결과]
value