6장. 데이터 타입
JS의 데이터 타입 종류
1. 숫자 타입
- JS는 C, JAVA와 다르게 정수와 실수를 구분(→ int, double, long, float)하지 않고
number라는 하나의 숫자 타입만 존재var integer = 10; // 정수 var double = 10.12; // 실수 var negative = -20; // 음의 정수 - 모든 수를 실수로 처리 → 정수만 표현하기 위한 데이터 타입 존재 X
console.log(1 === 1.0); // true - 세 가지 특별한 값도 표현 가능 → Infinity(양의 무한대), -Infinity(음의 무한대), NaN(산술 연산 불가)
❗️ JS는 대소문자 구별하므로, NaN을 NAN, Nan, nan으로 표현하면 에러 발생함!console.log(10/0); // Infinity console.log(10/-0); // -Infinity console.log(1*'Stirng'); // NaN
2. 문자열 타입
- 텍스트 데이터 나타낼 때 사용 → 0개 이상의 16비트 유니코드 문자의 집합
- 작은 따옴표(’’), 큰 따옴표(””), 백틱(``)으로 텍스트 감싸 사용
- 문자열은 원시 타입으로, 변경 불가능한 값임!
3. 템플릿 리터럴
- 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능 제공
- 백틱(``) 사용해 표현
1) 멀티라인(multi-line) 문자열
- 일반 문자열 내에서는 줄바꿈(개행)이 허용 X
- 따라서, 일반 문자열 내에서 줄바꿈을 표현하려면 이스케이프 시퀀스 사용해야 함
이스케이프 시퀀스 의미 \0 Null \b 백스페이스 \f 폼 피드: 프린터로 출력할 경우 다음 페이지의 시작 지점으로 이동 \n 개행(LF): 다음 행으로 이동 \r 개행(CR): 커서를 처음으로 이동 \t 탭(수평) \v 탭(수직) \uXXXX 유니코드 \’ 작은따옴표 \” 큰따옴표 \ 백슬래시 - 템플릿 리터럴 사용하면 이스케이프 시퀀스 사용하지 않고 줄바꿈 허용
var template = `<ul> <li><a href="#">Home</a></li> </ul>`; console.log(template);
2) 표현식 삽입
- 문자열은 문자열 연산자
+를 통해 연결 가능 -
연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작, 나머지는 덧셈 연산자로 동작
var first = 'Minji'; var last = 'Lee'; console.log('My name is'+first+' '+last+'.'); // My name is Minji Lee.
-
-
연산자로 연결하지 않고도
${}으로 표현식을 감싸서 표현 가능 → 표현식의 평가 결과가 문자열이 아니더라도 문자열로 강제 변환됨var first = 'Minji'; var last = 'Lee'; console.log(`My name is ${first} ${last}.`); // My name is Minji Lee. console.log(`1 + 2 = ${1+2}`); // 1 + 2 = 3
-
4. 불리언 타입
- 값의 논리적 참, 거짓 나타내는 true와 false 두 종류 뿐
var foo = true; console.log(foo); // true foo = false; console.log(foo); // false - 조건문에서 자주 사용됨
5. undefined 타입
- 값으로 undefined가 유일
- var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화 됨
- 변수 선언으로 확보된 메모리 공간이 초기화되기 전에 쓰레기 값으로 비어있지 않고, JS 엔진이 스스로 undefined로 초기화해줌
- 이를 통해, 변수 참조 시 undefined인 경우 참조한 변수가 선언 이후 값이 할당되지 않음을 알 수 있음
6. null 타입
- 값으로 null이 유일
- JS는 대소문자 구별하므로 NULL, Null 등과 다름!
- 변수에 값이 없다는 것을 의도적으로 명시할 때 사용
- 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미 → JS 엔진은 null로 선언된 변수의 메모리 공간에 가비지 콜렉션 수행
var foo = 'Lee';
foo = null;⭐ undefined와 null의 차이
둘의 차이는 개발자의 의도 차이!
undefined는 자바스크립트 엔진이 변수 선언된 이후 스스로 초기화 해주는 값! 즉, 개발자가 의도하지 않은 값
null은 개발자가 의도적으로 변수의 값이 없다는 것을 명시!
7. 심벌 타입
- ES6에서 추가된 7번째 타입
- 변경 불가능한 원시 타입의 값
- 다른 값과 중복되지 않는 유일무이한 값
// 심벌 값 생성
var key = Symbol('key');
console.log(typeof key); // symbol
// 객체 생성
var obj = {};
// 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용
obj[key] = 'value';
console.log(obj[key]); // value8. 객체 타입
- JS는 객체 기반의 언어
- JS를 이루고 있는 거의 모든 것이 객체!
데이터 타입의 필요성
1. 메모리 공간의 크기 결정을 위해
- 값은 메모리에 저장하고 참조할 수 있어야 함
- 메모리에 값 저장하려면 먼저 확보해야 할 메모리 공간의 크기를 결정해야 함 → 몇 바이트의 메모리 공간을 사용해야 낭비와 손실 없이 값을 저장할 수 있는지 알아야 함
- JS 엔진은 데이터 타입(=값 종류)에 따라 정해진 크기의 메모리 공간을 확보
2. 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기 결정
- 변수를 통해 값이 저장되어 있는 메모리 공간의 선두 메모리 주소 셀을 찾아갈 수 있음
- 값을 참조할 때, 한 번에 읽어 들여야 할 메모리 공간의 크기(= 메모리 셀의 개수)를 알아야 함
- 이때, 해당 변수의 값의 데이터 타입으로 식별하여 참조할 메모리 공간의 크기 만큼 읽어 들임
3. 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정
- 메모리 공간에는 2진수, 즉 비트의 나열로 저장됨
- 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석됨
- ex) 메모리에 저장된 값 = 0100 0001일 때, 숫자로 해석하면 65, 문자열로 해석하면 ‘A’
- 변수에 할당되어 있는 값의 데이터 타입에 따라 메모리에 있는 2진수 해석
동적 타이핑
정적 타입 언어: 변수를 선언할 때, 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언해야 함 ex) C, 자바
- 변수의 타입 변경 X
- 변수에 선언한 타입에 맞는 값만 할당 가능
- 컴파일 시점에 타입 체크 수행 → 선언한 데이터 타입에 맞는 값을 할당 했는지 검사하는 처리
- 이를 통해, 타입의 일관성을 강제함으로써 런타임에 발생하는 에러 줄여 안정적인 코드 구현 가능
동적 타입 언어: 선언이 아닌 할당에 의해 타입이 결정됨(타입 추론), 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있음 ex) JS, python, 루비, php 등
- JS는 정적 타입 언어와 달리 변수를 선언할 때 타입 선언 하지 않고, 단순히 var, let, const 키워드 사용하여 변수 선언 → 어떠한 데이터 타입의 값이라도 자유롭게 할당 가능
| 타입 언어 | 특징 | 장점 | 단점 |
|---|---|---|---|
| 정적 타입 언어 | 변수 선언 시점에 변수 타입이 결정됨, 타입 변경 X | 런타임에 발생하는 에러 줄여줌 | 유연성이 떨어짐 |
| 동적 타입 언어 | 값을 할당하는 시점에 변수의 타입이 동적으로 결정, 타입 변경 O | 유연성이 높음 | 1. 개발자 의도와 상관없이 타입이 변경될 수 있음 |
| 2. 변화하는 변수 값 추적하기 어려움 → 신뢰성 떨어짐 |
⚠️ 변수 사용 시 주의할 점
- 변수는 꼭 필요한 경우에 한해 제한적으로 사용
- 변수의 유효 범위 최대한 좁게 만들어 변수의 부작용 억제
- 전역 변수는 최대한 사용하지 않기
- 변수보다는 상수 사용해 값 변경 억제 →
const키워드 사용 - 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍하기 → 즉, 가독성 좋은 코드가 좋은 코드임!
