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

ES6는 7개의 데이터 타입을 제공한다. 그리고 이 데이터 타입들은 원시 타입(primitive type)과 객체 타입(object/reference type)으로 분류할 수 있다. 이를 자세히 알아보자.

 

원시 타입 : number, string, boolean, undefined, null ,symbol

객체 타입 : 객체, 함수, 배열

 

원시 타입

number

js의 숫자 타입으로 정수, 실수, n진수 모두 포함한 64비트 부동소수점 형식을 따른다.

추가로 Infinity(양의 무한대), -Infinity(음의 무한대), NaN(산술 연산 불가) 세가지 값을 제공한다.

※ NaN의 예시는 무한대, 허수, 숫자로 변환 실패한 식, NaN과 연산한 수, 유효하지 않은 값이 숫자로 나타남 등이 있다.

 

string

UTF-16 형식을 따르는 데이터이다.

'작은 따옴표', "큰 따옴표", `백틱` 으로 텍스트를 감싸서 사용한다. 이렇게 감싸는 이유는 식별자와 구분하기 위해서다.

JS에서 문자열은 변경 불가능한 값(Immutable value)이다.

 

※ 유니코드는 세계의 모든 문자를 다룰 수 있는 문자 전산 처리 방식이며, 이 때 유니코드 숫자를 저장하는 방식에 따라서 UTF-16 등으로 부른다.

 

template literal

ES6에서 도입된 새로운 문자열 표기법이다. `백틱`으로 표현할 수 있으면 아래 기능들을 제공한다.

- 멀티라인 문자열 : 여러행 문자열 가능

- 표현식 삽입 : 문자열과 변수형 문자열이 덧셈을 통해서 연결이 가능

- 태그드 템플릿 : ${}을 통해서 변수를 넣고, 문자열처럼 사용이 가능

 

boolean

논리로 true or false를 나타낸다.

 

undefined

변수 선언 시, JS  엔진이 쓰레기값은 undefined로 강제로 초기화한다.

그런데, 일반적인 프로그래밍 언어에서는 선언과 정의가 존재한다.

선언은 컴파일러에게 식별자의 존재를 알리는 것,

정의는 실제로 메모리 주소를 할당하는 것이다.

하지만, JS에서 변수를 선언 시, 암묵적으로 정의(undefined가 할당되므로)가 이루어지므로 선언과 정의가 애매하다.

이에 대해서, EMCAScript에서는 변수는 선언한다라고 표현하고 함수는 정의한다라고 표현한다.  

※ 13.3절과 14.1절의 제목이다. 아래 세부 내용은 혼합해서 사용하는 걸로 봐서 정말 애매한 듯 하다.

 

null

null이다. 값이 없는 변수를 의도적으로 명시하며, null을 사용한다는 것은 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미이다. 이에 따라 가비지 컬렉터가 참조하지 않는 메모리공간을 정리한다.

또한, 유효한 값을 반환하지 못할 경우 null을 반환하기도 한다. (ex. document.querysSelector에서 해당하는 요소를 못 찾으면 null이 반환된다.)

 

 Symbol

 ES6에서 추가된 7번째 타입이다. 변경 불가능한 원시 타입으로, 외부에 노출되지 않고 다른 값과 중복을 허용하지 않는 유일무이한 값이다. 따라서, 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.

자세한 설명은 33장에서 서술한다.

※ 프로퍼티나 객체의 키로 자주 사용하지만, 범용성은 떨어진다.

※  property : JavaScript 속성(property)은 객체의 멤버(member) 중 하나로 자바스크립트의 모든 값이 될 수 있다. 이 중 함수를 값으로 가지면, 메서드라한다. 실제로는 값이 없지만, getter와 setter 함수가 자동으로 호출되어서 자연스럽게 일반 데이터 속성처럼 접근된다.

const person = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    country: "USA"
  },
  sayHello: function() {
    console.log("Hello!");
  }
};

여기서 ` name: "John" `이 propery이고, name이 property의 key이다. 이 중 sahHello처럼 function일 경우 메서드라 부른다.

 

객체 타입은 추후 다시 다루기로 한다. 명심할 점은 위에 6개의 원시 타입을 제외하고, 자바스크립트의 모든 것은 객체 타입이다.

 

데이터 타입이 필요한 이유

데이터 타입이 필요한 이유는 메모리 공간의 확보와 참조하기 위해서이다.

- 값을 저장하려면, 메모리 크기를 결정해야한다. 데이터 타입에 따라서 이 크기가 달라지므로 필요하다.

- 값을 읽으려면, 선두 메모리셀의 주소를 찾아간 뒤 몇 개나 읽을 지 정해야한다. 즉, 메모리 공간의 크기를 알아야한다. 이를 데이터 타입을 이용하여 결정할 수 있다.

- 이 때, 읽은 후 메모리에서 읽어 들인 2진수를 원하는 값으로 치환해야한다. 이 때, 이를 문자열로 읽으면 'A'가 될 수도 있고, 숫자로 읽으면 '65'가 될 수도 있다. 해석할 때, 어떻게 해석할 것인지 정하는 요소가 된다. 
※  컴파일러는 심벌 테이블이라고 부르는 자료 구조를 통해서 식별자를 키로 바인딩된 값의 메모리 주소, 데이터 타입, 스코프 등을 관리한다.

 

동적타이핑

데이터 타입과 관련하여서 두 가지 형식의 언어가 존재한다.

- 정적 타입(static/strong type) 언어 : 변수를 선언할 때, 변수에 할당할 수 있는 데이터 타입을 사전에 선언해야한다. 그리고 컴파일 시점에 타입 체크를 수행하여 통과하지 못했다면 에러를 발생시켜서 프로그램의 실행을 막는다. 이런 방법은 일관성을 강제하여 더욱 안정적인 코드를 구현한다.

 

- 동적 타입 언어(dynamic/weak type) : 타입을 사전에 선언하지 않고 할당에 의해 타입을 결정한다. 이를 타입 추론(type inference)라 한다.그래서 재할당에 따라서 변수의 타입은 언제든지 변할 수 있게 된다. 

 

동적 타입 언어는 매우 편리하지만, 그만큼 신뢰성이 낮다.

1. 변수 값이 언제든 변하기 때문에 복잡한 프로그램에서는 추적이 어렵고 타입을 확신하기 어렵다.

2. JS엔진에 의해서 암묵적으로 타입이 변하기도 하며 이는 에러를 발생시킨다.

 

이런 단점 때문에 변수를 사용할 때는 항상 아래 주의사항을 기억해야한다.

1. 변수는 꼭 필요할 때만 사용한다. 변수가 많아질수록 에러가 발생할 확률이 높아지기 때문이다.

2. 전역 변수는 최대한 자제한다. 전역 변수는 어디서든 변수가 변할 수 있어서 에러가 발생할 확률이 높아지고, 에러를 추적하기 어렵게 만든다.

3. 최대한 유효한 범위(스코프)에서 사용한다. 이유는 위와 동일하다.

4. 변수는 목적과 의미를 알 수 있도록 네이밍한다. 이는 협업에서 굉장히 중요하고, 생산성과 직결된다.

 

코드는 동작하는 것만이 아니라 가독성이 좋아야한다.

 

컴퓨터가 이해하는 코드는 어떤 바보도 쓸 수 있다. 하지만 훌륭한 프로그래머는 사람이 이해할 수 있는 코드를 쓴다. - 마틴 파울러 <리팩토링>의 저자

 

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN

NaN - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals - JavaScript | MDN

https://262.ecma-international.org/11.0/

ECMAScript® 2020 Language Specification

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol

Symbol - JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Glossary/property/JavaScript

Property (JavaScript) - MDN Web Docs Glossary: Definitions of Web-related terms | MDN