#33가지 Javascript 필수 개념 - 2. Primitive Types

본 내용은 아래의 글을 참조하여 작성하였습니다.

(https://github.com/leonardomso/33-js-concepts)

 

 

* 데이터 타입

모든 프로그래밍 언어가 그렇듯,

어떤 언어를 배움에 있어서 초반에 항상 배우는 내용 중 하나가 "데이터 타입"이다.

 

ECMAScript 표준에 따른 JS 의 데이터 타입은 7개로 규정되어 있다.

 

- Number

- Boolean

- String

- Null

- Undefined

- Symbol

- Object 

 

로 규정되어 있으며, 이중에서 Primitive Types (기본 자료형) 으로 규정된 것은

Object 를 제외한 나머지 자료형이다.

(Symbol 은 ECMAScript 6 부터 등장했다)

 

 

 

 

* 변수의 선언

JS 에서 변수를 선언 할 때는, 타입을 별도로 지정하지 않고 선언 할 수 있다.

아래와 같이 literal value 를 지정해서 선언하는게 가능하며,

var x = 7;
let y = false;
const z = "good";
var a = null;
var b = undefined;

 

 

또는 아래와 같이 wrapper object 를 통해서 선언하는 것도 가능하다.

var x = Number(7);
let y = Boolean(false);
const z = String("good");
 
var a = new Number(7);
var b = new Boolean(false);
var c = new String("good");

 

 

보통은 literal value 방식을 사용해서 정의할 때가 더 많다.

변수를 선언할 때 붙는 예약어인

var, let 은 변수이지만, const 는 변하지 않는 값 상수이다.

 

wrapper object 로 선언시에 new 를 붙이고 안붙이고의 차이점은

new 를 붙이면 "객체"로 취급되는 것이고, 그렇지 않으면 객체로 취급되지 않는 다는 것이 다르다.

 

 

 

* Symbol Type

 

ECMAScript 6 이후 부터 새롭게 추가된 데이터 타입인 Symbol 에 대해서 알아본다.

 

Symbol Type 은 이런 식으로 정의가 가능하다.

var kim = {
    age: 20,
    height: 180,
};
 
var money = Symbol("money");
 
kim[money] = 100000;
kim["isMovable"] = true;
 
for (var key in kim) {
    console.log(key);
}

 

 

위와 같이 코드를 쓰고 출력을 직접해보면,

Symbol 이 아닌 대상으로 설정한 key 값만 출력 되는 것을 알 수 있다.

위에서 선언한 kim 객체를 출력해 보면

 

money 값만 Symbol 이라는 별도의 key 값으로 선언되었으며,

나머지는 본래 선언한 그 모습 그대로 key, value 가 들어 감을 알 수 있다.

 

 

이러한 데이터 타입의 장점은 무엇일까?

중복해서 Property 를 선언하지 않기 때문에 이름이 겹쳐서 충돌하는 것을 방지한다.

위의 kim 객체 출력 그림을 보면 Symbol 로 선언한 money 의 경우 property 가 Symbol(money) 로 선언되어 있기 때문에, 본래 kim 객체에 money 라는 property 가 있었더라도 충돌하지 않는다.

 

일반 property 와 Symbol property

 

추가적으로 Symbol 은 new 예약어를 사용하여 선언이 불가능하다

 

 

 

* Well-Known Symbol

 

위와 같이 직접 객체를 생성해서 Symbol 을 넣는것 말고도

이미 JS 에 선언된 Symbol 들이 존재한다.

 

Symbol.match, Symbol.search, Symbol.iterator, Symbol.split 등 과 같은 global Symbol 이 그 대상이다.

 

이에 대한 자세한 목록은 아래 주소를 참조하기 바란다

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

Symbol

 

또한 global Symbols 은 customizing 이 가능하다.

이에 대한 방법은 아래 주소를 참조하기 바란다.

https://2ality.com/2015/09/well-known-symbols-es6.html

Customizing ES6 via well-known symbols

 

 

 

- 그 외 참조

 

https://poiemaweb.com/es6-symbol

 

https://medium.com/@hyunwoojo/javascript-symbol-%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-6aa5903fb6f1