데이터 타입 data type은 값의 종류를 말한다.
자바스크립트에는 총 7개의 데이터 타입이 있다. 먼저 크게 원시 타입과 객체 타입으로 구분된다.
원시타입 | 숫자 타입 number | 숫자, 정수와 실수 구분 없음 |
문자열 타입 string | 문자열 | |
불리언 타입 boolean | 논리적 참 true와 거짓 false | |
undefined 타입 | var 키워드로 선언된 변수에 암묵적으로 할당되는 값 | |
null 타입 | 값이 없다는 것을 의도적으로 명시할 때 사용 | |
심벌 타입 symbol | ES6에서 추가된 7번째 타입 | |
객체 타입 | 객체, 함수, 배열 등 |
1과 '1'은 값은 비슷해보이지만 전혀 다르다. 숫자 타입과 문자열 타입은 값을 생성한 목적과 용도가 다르다.
숫자 타입은 주로 산술 연산을 위해 생성하지만 문자열 타입은 주로 텍스트르르 활면에 출력하기 위해 생성한다. 또한 다른 데이터 타입이기에 확보해야할 메모리 공간도 다르고 저장되는 2진수도 다르며 해석하는 방식도 다르다.
따라서 데이터 타입을 잘 구별해서 활용해야 한다.
숫자 타입
다른 언어들의 경우 정수와 실수를 구별해서 int, float, double등과 같은 다양한 숫자 타입을 제공하는 경우도 있지만 자바스크립트는 하나의 숫자 타입만 존재한다.
숫자 타이브이 값은 64비트 부동소수점 형식을 따른다. 즉, 모든 수를 실수로 처리하며 정수만 표현이 위한 데이터 타입이 별도로 존재하지 않는다.
자바스크립트는 정수도 사실은 실수이기 때문에 정수로 표시되는 수끼리 나누어도 실수가 나올 수 있다.
console.log(1===1.0) // true
console.log(3/2) // 1.5
또한 숫자 타입에는 Infinity, -Infinity, NaN과 값은 특별한 값도 표현할 수 있다.
플러스 마이너스 무한대와 Not a number(산술 연산 불가)를 나타내는 것이다.
console.log(1*'string') // NaN
문자열 타입
문자열 타입은 텍스트 데이터를 나타내는데 사용한다. 0개의 이상의 16bit 유니코드 문자(UTF-16)의 집합으로 전세계 대부부느이 문자를 표현할 수 있다.
문자열은 따옴표로 감싸서 활용된다.(큰 따옴표, 작은 따옴표, 백틱 상관X , 섞어서만 안 쓰면 됨)
따옴표로 감싸야 키워드나 식별자와 같은 토근과 구별이 된다. 만약 따옴표를 감싸지 않으면 자바스크립트 엔진은 키워드나 식별자 같은 토큰으로 인식한다.
템플릿 리터럴
ES6부터 도입된 새로운 문자열 표기법이다.
멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능을 제공한다. 템플릿 리터럴은 런타임에 일반 문자열로 반환되어 처리된다.
템플릿은 따옴표 대신 백틱(``)을 사용해 표현한다.
(1) 멀티라인 문자열
일반 문자열에서는 줄바꿈이 허용되지 않는다. 줄바꿈 등의 공백을 표현하려면 백슬래시( \ )로 시작하는 이스케이프 시퀀스를 사용해야한다.
var template = '<ul>\n\t<li><a href="$">Home</a></li>\n</ul>';
console.log(template)
// <ul>
// <li><a href="#">Home</a></li>
// </ul>
하지만 템플릿 리터럴 내에서는 공백도 그대로 허용이 된다.
var template = `<ul>
<li><a href="#">Home</a></li>
</ul>`
(2) 표현식 삽입
문자열은 문자열 연산자 +를 사용해 연결할 수 있다.
+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한ㄷ.
var first = 'one'
var last = 'park'
console.log(`My name is ${first} ${last}`); // My name is one park
백틱 안에 ${}로 감싼 표현식을 삽입해주어 그 표현식의 평가 결과가 삽입된다. 결과가 문자열이 아니더라도 문자열로 타입이 강제로 변환되어 삽입된다.
불리언 타입
불리언 타입은 논리적 참, 거짓을 나타내는 true, false뿐이다.
이후에 조건문에서 자주 사용될 예정
undefined 타입
undefined 타입의 값은 undefined가 유일하다.
var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다.
변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 대까지 빈 상태로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화한다. 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다.
변수를 참조했을 때, undefined가 반환되면 참조된 변수가 선언 이후 값이 할당된 적이 없는, 즉 초기화되지 않은 변수라는 것을 간파할 수 있다.
null 타입
null 타입의 값은 null이 유일하다.
이전에 할당되어있던 값에 대한 참조를 명시적으로 제거하는 것을 의미하며, 자바스크립트 엔진은 누구도 참조하지 않는 메모리 공간에 대해 가비지 콜렉션을 수행한다.
심벌 타입
심벌은 ES6에서 추가된 타입으로 변경 불가능한 원시 타입의 값이다.
심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.
심벌은 Symbol 함수를 호출해 생성한다. 이 때 생성된 심벌값은 외부에 노출되지 않으며 다른 값과 절대 중복되지 않는 유일무이한 값이다.
객체 타입
자바스크립트를 이루고 있는 거의 모든 것이 객체이다. 뒤에서 자세히 살펴보자.
그럼 데이터 타입은 왜 필요한 것일까?
데이터 타입에 따라 메모리 공간의 확보와 참조가 달라진다.
자바스크립트 엔진은 데이터 타입, 즉 값의 종류에 따라 정해진 크기의 메모리 공간을 확보한다.
var score = 100
위의 score라는 변수를 선언하면 컴퓨터는 숫자 값 100을 저장하기 위해 메모리 공간을 확보한 다음, 확보된 메모리 공간 안에 숫자 값 100을 2진수로 저장한다. 따라서 100을 저장하기 위해 8바이트의 메모리 공간을 확보하고 100을 2진수로 저장하게 된다.
식별자 score를 통해 숫자 타입의 값 100이 저장되어잇는 메모리 공간의 주소를 찾아갈 수 있다. 정확히 말하면 100이 저장되어있는 메모리 공간의 선두 메모리셀의 주소를 찾아간다.
이 때 값을 참조하려면 한 번에 읽어 들여야 할 메모리 공간의크기, 즉 메모리 셀의 개수를 알아야한다. 컴퓨터는 이걸 어떻게 알 수 있을까?
자바스크립트 엔진은 score 변수를 숫자 타입으로 인식하고 숫자타입은 8바이트 단위로 저장되르모 score 변수를 참조하면 8바이트 단위로 메모리 공간에 저장된 값을 읽어들인다.
컴파일러나 인터프리터는 심벌 테이블이라고 하는 자료 구조를 통해 식별자를 키로 바인딩된 값의 메모리 주소, 데이터 타입, 스코프 등을 관리한다.
아직 문제가 있다. 메모리에서 읽어들인 2진수를 어떻게 해석하느냐.
0100 0001을 숫자로 해석하면 65이고 문자열로 해석하면 'A'이다. 이 해석 방법을 결정하는 것이 데이터 타입이다.
데이터 타입이 필요한 이유는 총 3가지로 정리된다.
1. 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
2. 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
3. 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해
동적 타이핑
C나 자바 같은 정적 타입 언어는 변수를 선언할 대 변수에 할당할 수 있는 값의 종류 즉, 데이터 타입을 선언해야 한다.
정적 타입 언어는 변수의 타입을 변경할 수 없고 타입에 맞는 값만 할당할 수 있다. 정적 타입 언어는 컴파일 시점에 타입 체크를 수행한다.
자바스크립트는 정적 타입 언어와 다르게 변수를 선언할 때 타입을 선언하지 않는다.(타입스크립트는 타입 선언해야됨)
자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입추론)된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이러한 특징을 동적 타이핑 dynamic typing이라고 하고 자바스크립트는 동적 타입 dynamic/weak type 언어 라고 한다.
동적 타입 언어는 유연성을 높지만 신뢰성은 떨어진다. 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 변환되어 예측과 다른 결과를 낼 수 있다. 그러면 당연히 프로그램은 오류를 뿜어낼 것이다. 그러니 변수를 사용할 때는 항상 주의해서 사용해야 한다.
이런 타입 오류를 방지하고 싶으면 타입스크립트 배우자.
'웹 > Javascript' 카테고리의 다른 글
자바스크립트 딥 다이브 스터디 5장 - 표현식과 문 (0) | 2023.06.29 |
---|---|
자바스크립트 딥 다이브 스터디 4장 - 변수 (0) | 2023.06.27 |
자바스크립트 딥 다이브 스터디 3장 - 자바스크립트 개발 환경과 실행 방법 (0) | 2023.06.22 |
자바스크립트 딥 다이브 스터디 2장 - 자바스크립트란? (0) | 2023.06.22 |
자바스크립트 딥 다이브 스터디 1장 - 프로그래밍 (0) | 2023.06.22 |