Symbol 자료형?
JavaScript 관련 글입니다.
- JS Event Loop, 자바스크립트 동작 원리
- 호이스팅이란 , var, let, const 차이
- Three.js에 대해
- script, script async, script defer의 차이
- AJAX가 무엇일까?
- 함수선언식과 함수표현식
- null과 undefined의 차이 간단정리
- setTimeout과 setInterval 요약
- this의 여러가지 의미
- Spread Operator(...)?
- JS class Constructor
- ES6 Destructuring Syntax
- default 파라미터 알아보기
- import / export 를 사용한 모듈식 개발방법
- Optional Chaining (?.)
- 프로미스(Promise)에 대해서
- ES8 - async / await
- Symbol 자료형?
- forEach, for in, for of 알아보기
- JSON형식 변환 방법 - JSON.parse(), JSON.stringify()
- 자바스크립트 가비지 컬렉션
- 화살표 함수와 일반함수의 차이
- JavaScript Array.reduce() 간단히 알아보기
이번 글에서는 Symbol이라는 자료형에 대해서 알아보겠습니다.
Symbol
ES6에서 Symbol이라는 자료형이 추가되었는데 이 자료형을 만드는 법을 알아보겠습니다.
const symbol = Symbol('Symbol 입니다.');
그냥 Symbol()을 사용하여 만들고 괄호안에 이 Symbol의 설명을 써주면 됩니다.
Symbol은 어디에 사용되나?
Symbol은 도대체 어디에 사용되는 걸까요?
Symbol은 Object에 숨기고 싶은 비밀의 key값을 주고싶을 때 사용합니다.
원래 Object의 key값은 문자만 입력할 수 있었습니다. 하지만 문자가 아닌 것을 입력하더라도 문자로 바뀌며, ES6부터 Symbol도 key값으로 할 수 있게 되었습니다.
const client1 = { name : 'kim', age : 26 };
let phoneNumber = Symbol('핸드폰 번호');
client1.[phoneNumber] = '010-0000-0000';
client1이라는 object가 있을 때 핸드폰 번호를 직접적으로 넣지않고 숨겨서 등록하고 싶습니다.
이럴 경우 Symbol을 이용할 수 있습니다. phoneNumber라는 변수에 Symbol을 생성하여 넣고, 위의 예시처럼 []를 이용하여 client1에 등록하면 Symbol의 형태로 Object에 등록할 수 있습니다.
실제로 client1을 출력해보면 Symbol의 형태로 등록이 되어있습니다.
Symbol은 for문에 등장하지 않습니다. 즉 Symbol로 등록한 것은 반복문을 돌릴 때 감지하지 못합니다.
Symbol을 직접적으로 등록하는 방법
const client1 = { name : 'kim', age : 26, [phoneNumber] : '010-0000-0000' };
Symbol은 그냥 Object안에서 직접 등록할 수도 있는데, 역시 []를 이용하여 등록하면 됩니다.
Symbol의 특징
const a = Symbol('심볼');
const b = Symbol('심볼');
console.log(a == b);
console.log(a === b);
Symbol을 만들 때 괄호안에 Symbol의 설명을 쓰는데, 이 설명이 같다고 하더라도 위와 같이 a와 b는 서로 같은 Symbol이 아닙니다.
실제로 출력해보면 false가 출력됩니다.
const a = Symbol.for('심볼');
const b = Symbol.for('심볼');
console.log(a == b);
console.log(a === b);
Symbol옆에 for()를 붙여서 Symbol을 만들 수도 있는데, 이 Symbol들은 전역 Symbol이 됩니다. 이러한 경우 a와 b는 서로 같은 Symbol이며, true가 출력됩니다.
End.