[ModernJS_DeepDive] 6장 데이터 타입

책 제목: 모던 자바스크립트 Deep Dive
저자: 이웅모 저
출판사: 위키북스

기본적인 타입을 다 공부하기보다 ES6부터 추가된 데이터 타입과 데이터 타입의 필요성에 대해서 중심적으로 정리해보려고 한다. 사실 타입 정리하기도 귀찮았는데, 필요성을 설명해 봐라 하면 아무 말 못 하는 나를 발견하고 마음을 바로 잡았다. 

 

6.6 템플릿 리터럴

템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 런타임에 일반 문자열로 변환되어 처리된다. 이름만 거창하게 해 놓은 것 같은 기분이 든다. 그냥 작은따옴표 같이 생긴 백틱(``)을 사용한다고 보면 된다. 

멀티라인 문자열은 문자열 내에서 줄 바꿈을 허용하지 않는다은 의미이다. 

const str = `I want to leave 
the office.`;

 

줄 바꿈이나 공백을 표현하고 싶다면 백슬래시로 이스케이프 시퀀스를 사용해야 한다.

개인적으로 그나마 많이 썼던 것 위주로만 보았다. 

이스케이프 시퀀스	의미
\n	개행, Enter
\t	tab
\', \''	따옴표
\\	역슬래시

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 first = "ji young";
var last = "Jung";

// ES5: 문자열 연결
console.log("My name is " + first + " " + last + "."); // My name is jiyoung Jung.

// ES6: 표현식 삽입
console.log(`My name is ${first} ${last}.`); // My name is jiyoung Jung.

 

Tagged Template(태그드 탬플릿)

말 그대로 태그가 되어있는 템플릿 리터럴이다. ES6를 사용하면서 태그가 있는 태그드 탬플릿은 많이 사용해보지 않았다. 어쩌면 나도 모르게 사용하고 있었을지도 모르겠다. 잘 사용한다면 스마트한 문자열을 만들 수 있다는데 책에서도 자세히 설명하지 않은 이유가 있을 거라 생각한다..;)

https://velog.io/@kdo0129/Tagged-Template-Literal

 

선언과 정의

일반적으로 정의란 어떤 대상을 명확하게 규정하는 것이다. undefined는 정의되지 않은 이라는 뜻을 가지고 있는데 자바스크립트에서의 undefined는 변수에 값을 할당하여 변수의 실체를 명확히 하는 것이다.

다른 프로그래밍 언어에서는 선언과 정의를 엄격하게 구별하여 사용하는데 자바스크립틑 이와 다르다. 자바스크립트는 변수를 선언하면 정의가 암묵적으로 이루어지고 정하지 않았다면 undefinde가 암시적으로 적용된다. 그러나, C언어의 경우 컴파일러에게 식별자의 존재만 알리는 것은 선언이고, 컴파일러가 변수를 생성하여 식별자와 메모리 주소가 연결되는 것을 정의라 구분한다.  

그래서 이 책에서는 사용하는 용어를 ECMAScript 사양에서 하는 그대로 표현한다고 한다. 

ECMAScript 사양에서 변수는 ‘선언한다’6라고 표현하고, 함수는 ‘정의한다’라고 표현한다. 따라서 이 책에서도 ECMAScript 사 양에서 사용하는 용어를 최대한 반영하여 변수는 선언, 함수는 정의로 표현하겠다.

 

6.7 심벌 타입

ES6에서 추가된 7번째 타입으로 변경 불가능한 원시 타입 중 하나이다. 심벌은 고유한 식별자를 생성해 자바스크립트에서 이름 충돌을 방지하고 프로퍼티의 의미를 명확하게 해 준다. 

유일하고 변경할 수 없는 값을 나타내며 주로 객체의 프로퍼티 키로 사용된다. 

// 고유한 심벌
const sym1 = Symbol('description');
const sym2 = Symbol('description');
console.log(sym1 === sym2); // false

// 객체의 프로퍼티 키 
const obj = {
  [sym1]: 'value'
};
console.log(obj[sym1]); // 'value'

Symbol() 생성자 함수는 선택적으로 설명 매개변수를 받을 수 있다. 이는 디버깅 목적으로 사용되며 toString() 메서드를 호출하거나 문자열과 연결될 때 사용한다. 

 

자바스크립트 언어 자체에서 사용되는 내장된 심벌도 존재한다. 

Symbol.iterator > 이터레이터를 생성하기 위한 심벌

더 자세한 심벌은 33장에 있다. 

 

6.9 데이터 타입이 필요한 이유

난 생각도 안 하고 살았는데, 데이터 타입이 필요한 이유는 3가지로 정리할 수 있다.

1. 값을 저장할 때 확보해야 하는 "메모리 공간의 크기"를 결정하기 위해
2. 값을 참조할 때 한 번에 읽어 들어야 할 "메모리 공간의 크기"를 결정하기 위해
3. 메모리에서 읽어 들인 "2진수를 어떻게 해석"할지 결정하기 위해

const number = 10;

1.  값을 저장할 때

위의 코드를 실행하면 10을 저장하기 위해 메모리 공간을 확보하고 number라는 이름을 붙인다. 그리고 확보된 메모리에 10을 2진수로 저장한다. 이 과정에서 우리는 메모리 공간의 크기를 알고 있어야 한다.

여기서 자바스크립트 엔진은 10을 nubmer타입의 값으로 해석하고 숫자 타입의 10이라는 것을 저장하기 위해 8바이트의 메모리 공간을 확보한 후, 10을 2진수로 저장한다. 

즉, 자바스크립트 엔진이 메모리 공간의 크기를 확보하기 위해 데이터 타입이 필요한 것이다. 

 

2. 값을 참조할 때

위에서 저장한 10을 찾기 위해서는 number라는 변수를 통해 값이 저장된 공간을 찾을 수 있다. 찾기만 하면 끝인 게 아니라 불러오기 위해=참조)서는  메모리의 크기를 알아야 한다. 자바스크립트 엔진은 number가 숫자 타입인 10이 할당되어 있기에 number를 숫자 타입으로 읽고 8바이트 단위로 메모리를 읽을 수 있는 것이다. 이렇게 값을 참조하기 위해서도 데이터 타입이 필요하다.  

 

3.  데이터를 해석할 때 

1,2에서 저장하고 참조하는 과정에서 모두 데이터는 2진수의 형태로 저장되어 있다. 2진수를 숫자로 해석할 수도 있고 문자로 해석할 수도 있기에 데이터 타입이 필요하다.