🚀 오늘의 학습 목표
- 자료형 이해 (원시 타입, 객체 타입)
- typeof 연산자 이해
2. 자료형 (data type)
자바스크립트의 데이터 타입은 크게 원시 타입, 객체 타입으로 또 나뉜다.
| 구분 | 데이터 타입 | 설명 |
|---|---|---|
| 원시 타입 | string | 문자열 |
| number | 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존해 | |
| boolean | 논리적 참(true), 거짓(false) | |
| null | 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 | |
| undefined | var키워드로 선언된 변수에 암묵적으로 할당되는 값 | |
| symbol | ES6에서 추가된 7번째 타입 | |
| 객체 타입 | 객체 함수, 배열 등 |
2-1. 문자형(string)
텍스트 데이터를 나타내는 데 사용한다.
문자열은 작은 따옴표(''), 큰따폼표(""), 백틱(``) 으로 텍스트를 감싼다.
가장 일반적인 표기법은 작은 따옴표를 사용하는 것이다.
const name = "yeon";
const age = 30;
const msg = `My name is ${name}`;
const msg1 = `제 나이는 ${age + 1}입니다.`
console.log(msg); // "My name is yeon"
console.log(msg1); //"제 나이는 31입니다."❓ 문자열은 왜 따옴표로 감쌀까?
키워드나 식별가 같은 토큰과 구분하기 위해서다.
만약 문자열을 따옴표로 감싸지 않으면 자바스크립트 엔진은 키워드나 식별 같은 토큰으로 인식한다.
만약 따옴표로 문자열을 감싸지 않는다면 스페이스와 같은 공백 문자도 포함시킬 수 없다.
2-2 템플릿 리터럴 (template literal)
ES6 부터 새로운 문자열 표기법이 도입되었다.
일반 문자열과 차이점은 일반적인 따옴표 ('', "") 대신 백틱(``) 을 사용해 표현한다.
1. 멀티라인 문자열 (multi-line string)
일반 문자열에서는 줄바꿈이 허용되지 않기 때문에 줄바꿈 등의 공백 (white space) 를 표현하려면 백슬래시(\)로 시작하는 이스케이프 시퀀스 (escape sequence) 를 사용해야 했다.
- 일반
string줄바꿈을 해 보자.
let name = "my name is
uoah"; // Uncaught SyntaxError: Unexpected end of input - 일반
string이스케이프 시퀀스를 사용해 보자.
let name = "my name is\
uoah";
console.log(name); //"my name is uoah"템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용되며, 모든 공백도 있는 그대로 적용된다.
let name = `my name is
uoah`;
console.log(name); //"my name is uoah"2. 표현식 삽입 (expression interpolation)
string 은 문자열 연산자 + 를 사용해 연결할 수 있다.
+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자 로 동작한다. (그 외 덧셈 연산자로 동작)
- ES5 문자열 연결 방법으로 해 보자.
let name = "uoah";
console.log('안녕하세요. 제 이름은 ' + name + ' 입니다.');
// "안녕하세요. 제 이름은 uoah 입니다."템플릿 리터럴 내에서는 표현식 삽입 을 통해 보다 가독성 좋고 간단하게 문자열을 삽입할 수 있다.
let name = "uoah";
let address = "seoul";
console.log(`안녕하세요. 제 이름은 ${name} 입니다.
저는 ${address} 에 삽니다.`);
// "안녕하세요. 제 이름은 uoah 입니다.
// 저는 seoul 에 삽니다."표현시을 삽입하려면 ${ } 으로 표현식을 감싼다. 이때 표현식의 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제 변환되어 삽입된다.
console.log(`1 + 2 = ${1 + 2}`); // "1 + 2 = 3"표현식 삽입은 반드시 템플릿 리터럴 내에서 사용 해야 한다. 일반 문자열에서 사용시 문자열로 취급된다.
console.log('1 + 2 = ${1 + 2}'); // "1 + 2 = ${1 + 2}"
2-3. 숫자(number)
자바스크립트의 숫자 타입은 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입은 별도로 존재하지 않는다.
즉, 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않기 때문에 이들 값을 참조하면 모두 10진수로 해석된다.
숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있다.
- Infinity : 양의 무한대
- -Infinity : 음의 무한대
- NaN : 산술 연산 불가 (not-a-number)
const age = 30; // 숫자형 Number
const PI = 3.14;
console.log(1 + 2); // 더하기 3
console.log(10 - 3); // 빼기 7
console.log(3 * 2); // * 곱하기 6
console.log(6 / 3); // / 나누기 2
console.log(6 % 4); // 나머지 2
const x = 1/0;
console.log(x); //Infinity
const name = 'yeon';
const y = name/2;
console.log(y);
// NaN = Not a number
// NaN은 숫자가 아니라는 뜻으로 숫자와 관련된 작업시 NaN이 아닌지 항상 염두하여야 한다.2-4. Boolean (true/false)
불리언 타입의 참과 거짓으로 구분되는 조건에 의해 프로그램의 흐름을 제어하는 조건문에서 자주 사용한다.
const a = true; // 참
const b = false; // 거짓
const name = "yeon";
const age = 30;
console.log(name === "yeon"); // true
console.log(age > 40); // false추후 조건문에서 더 자세히 살펴보자.
2-5. null, undefined
- null : 존재하지 않는 값
변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미이다. 이는 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 의미한다.
- undefinded : 값이 할당되지 않음
변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다.
개발자의 의도가 아닌 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값이다.
변수를 참조했을 때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 할당된 적이 없는, 초기화되지 않은 변수라는 것을 간파할 수 있다.
let age;
console.log (age); // 변수를 선언만 하고 아무것도 할당하지 않으면 undefined
let user = null; // 값이 존재하지 않음그 외 객체형과 심볼형은 나중에 자세히 보자.
✅ string 의 더하기, number + string 의 더하기
- 문자형도 더하기를 사용할 수 있다.
- 숫자형을 문자형과 더할 경우 문자형으로 변환된다.
const name = "yeon";
const a = "저는";
const b = "입니다";
console.log(a + name + b); // "저는yeon입니다"
const age = 30; // 숫자형
console.log(a + age + b); // "저는30입니다"typeof 연산자
다른 개발자가 작성한 변수의 타입을 알아야 하거나 api 통신 등을 통해 받아온 데이터를 타입에 따라 다르게 처리 해야 할 때 많이 사용한다.
연산자 뒤에 위치한 피연산자의 데이터 타입을 문자열로 반환환다.
아래의 예시 중 typeof null; // "object" 객체형으로 나오지만 null 은 객체가 아님 (!) 초기 자바스크립트의 오류이나 하위 호환성 유지를 위해 수정하지 않고 있다고 한다.
const name = "yeon";
console.log(typeof 3); // number
console.log(typeof name); // string
console.log(typeof true); // boolean
console.log(typeof "xxx"); // string
console.log(typeof null); // object
console.log(typeof undefined); // undefined