모던 자바스크립트 Deep Dive - 6장 데이터 타입

이혜란·2022년 10월 24일

JavaScript

목록 보기

4/33

데이터 타입은 값의 종류를 말합니다. 자바스크립트는 원시 타입과 객체 타입의 데이터 타입을 제공합니다.
원시 타입에는 숫자, 문자열, 불리언, undefined, null, 심벌(symbol) 타입이 있고, 객체 타입에는 객체,함수, 배열 등이 있습니다.

원시 타입

📚 1. 숫자 타입

자바스크립트는 하나의 숫자 타입만 존재하며 ECMAScript 사양에 따르면 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따릅니다.
즉, 모든 수를 실수(소수점)로 처리합니다.

const binary = 0b01000001; //2진수
const octal = 0o101; // 8진수
const hex = 0x41; // 16진수

//표기법만 다를 뿐 모두 같은 값!
console.log(binary); //65
console.log(octal); //65
console.log(hex); //65
console.log(binary === octal); //true
console.log(octal === hex); //true

//숫자 타입은 모두 실수로 처리됨!
console.log(1 === 1.0); //true

숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있습니다.

Infinity : 양의 무한대
-Infinity: 음의 무한대
NaN : 산술 연산 불가(not-a-number) 대소문자 구별함

📚 2. 문자열 타입

문자열 타입은 텍스트 데이터를 나타내는 데 사용합니다.
문자열은 작은따옴표(' '), 큰따옴표(" ") 또는 백틱(``) 으로 텍스트를 감싸줍니다.
자바스크립트에서 가장 일반적인 표기법은 작은따옴표를 사용하는 것 입니다.

const string = hello; // ReferenceError: hello is no defined

만약 위와 같이 문자열을 따옴표로 감싸주지 않으면 자바스크립트 엔진은 키워드나 식별자 같은 토큰으로 인식해 오류가 발생할 수 있습니다.

2.1 템플릿 리터럴

ES6부터 템플릿 리터럴이라고 하는 새로운 문자열 표기법이 도입되었습니다.
템플릿 리터럴은 일반 문자열과 비슷해 보이지만 따옴표 대신 백틱(``)을 사용해 표현합니다.

멀티라인 문자열

//일반 문자열 내에서는 줄바꿈이 허용되지 않습니다.
//일반 문자열 내에서 줄바꿈 등의 공백을 표현하려면 백슬래시(\)로 시작하는
//이스케이프 시퀀스를 사용해야 합니다.

const template = '<ul>\n\t<li>home</li>\n</ul>';
console.log(template); ===
 <ul>
   <li>home</li>
 </ul>

//템플릿 리터럴 내에서는 이스케이프 시퀀스 없이 줄바꿈이 허용됩니다.

const template = `<ul>
   <li>home</li>
</ul>`;

//위의 값과 결과가 같습니다.

표현식 삽입

//문자열 연산자 +를 사용해 문자열을 연결할 수 있습니다.

const first = 'rani';
const last = 'lee';

console.log('my name is ' + first + ' ' + last + '.');
//my name is rani lee.

//템플릿 리터럴 내에서는 표현식 삽입을 통해 문자열을 삽입할 수 있습니다.
console.log(`my name is ${first} ${last}.`);
//my name is rani lee.

//문자열이 아니더라도 문자열로 타입이 강제로 변환되어 삽입할 수 있습니다.
console.log(`1 + 2 = ${1 + 2}`); // 1 + 2 = 3

📚 3. 불리언 타입

불리언 타입의 값은 논리적 참과 거짓을 나타내는 true, false 두 가지 뿐 입니다.
불리언 타입은 조건에 의해 프로그램의 흐름을 제어하는 조건문에서 자주 사용합니다.

📚 4. undefined 타입

선언된 변수는 암묵적으로 undefined로 초기화 되면서, 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환됩니다.
개발자가 의도적으로 undefined를 변수에 할당한다면 혼란을 줄 수 있으므로 권장하지 않습니다.
변수에 값이 없다는 것을 명시하고 싶을 때는 null을 할당해줍니다.

📚 5. null 타입

프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용합니다.
함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 합니다.

<body>
  <script>
    const element = document.querSelector('.myClass');
    console.log(element); // myClass 요소가 없다면 null 반환
  </script>
</body>

📚 6. 심벌 타입

심벌 타입은 변경 불가능한 원시 타입의 값으로 이름이 충동할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용합니다.
심벌은 리터럴 대신 Symbol 함수를 호출해 생성합니다.

const key = Symbol('key');
console.log(typeof key); // symbol

// 심벌을 호출할 땐 .description 을 붙여줘야 한다.

객체 타입

자바스크립트는 객체 기반의 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체입니다. 원시 타입 이외의 값은 모두 객체 타입입니다.

데이터 타입의 필요성

값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해 데이터 타입이 필요합니다.
값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해 데이터 타입이 필요합니다.
메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해 데이터 타입이 필요합니다.

동적 타이핑

대표적인 정적 타입 언어로 C, C++, JAVA, 코틀린, 고, 하스켈, 러스트, 스칼라 등이 있고, 대표적인 동적 타입 언어로는 자바스크립트, 파이썬, PHP, 루비, 리스프, 펄 등이 있습니다.

정적 타입 언어는 변수의 타입을 변경할 수 없으며 변수 선언에 맞는 값만 할당할 수 있습니다. 이러한 정적 타입 언어는 타입의 일관성을 강제함으로 더욱 안정적인 코드의 구현으로 에러를 줄일 수 있다는 장점이 있습니다.

동적 타입의 언어는 변수를 선언할 때 타입을 선언하지 않고 어떠한 타입의 값이라도 자유롭게 할당할 수 있습니다. 자바스크립트에서는 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고 변수의 타입을 언제든지 자유롭게 변경할 수 있습니다. (할당에 의해 타입 결정)

❗️결국 동적 타입 언어는 유연성은 높지만 신뢰성이 떨어질 수 있습니다. 따라서 아래의 변수를 사용할 때 주의 사항을 지켜주는 것이 좋습니다.