[JavaScript] Symbol

2022. 9. 27. 12:18· Node.js/JS
목차
  1. Symbol.for() : 전역 심볼
  2. 숨겨진 Symbol key 확인
  3. Symbol을 사용하는 이유?

심볼

심볼은 유일한 식별자를 만들 때 사용합니다.

 

실제로 두 변수에 심볼을 저장하고, 서로 일치하는지 일치 연산자를 사용하면 false를 반환합니다.

const a = Symbol();
const b = Symbol();

console.log(a == b); // false
console.log(a === b); // false

심볼은 유일성을 보장합니다. 이 심볼은 같은 값을 인자로 변수에 넣더라도 둘은 개별적인 존재로 취급되기 때문입니다.

 

또한, 심볼은 프로퍼티 키로 넣을 수도 있습니다.

const id = Symbol('id');
const user = {
  name: 'Mike',
  age: 30,
  [id]: 'myid',
}

// { name: "Mike", age: 30, Symbol(id): "myid" }

계산된 프로퍼티를 사용하는 것입니다. 그런데 객체 머서드를 통해 키, 값, 키/값을 뽑아내고자 할 때, 정상적으로 반환되지 않는 것을 볼 수 있습니다. 심볼을 키로 사용하면 사용자에게 직접적으로 보이지 않게 할 수 있습니다.

Object.keys(user); // [ "name", "age" ]
Object.values(user); // [ "Mike", 30 ]
Object.entries(user); // [Array(2), Array(2)]

Symbol.for() : 전역 심볼

하나의 심볼만 보장받을 수 있습니다. Symbol.for 메서드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유합니다. 심볼을 전역으로 사용하는 것입니다.

const id1 = Symbol.for('id');
const id2 = Symbol.for('id');

id1 === id2; // true

 

 

또한, 변수를 통해 심볼에 사용된 키를 반환받을 수 있습니다. Symbol.keyFor() 메서드를 사용합니다.

Symbol.keyFor(id1) // "id"

keyFor로 생성한 Symbol이 아닐 경우에는 description을 통해 그 값을 찾아낼 수 있습니다.

const id = Symbol('id 입니다.');
id.description; // "id 입니다."

숨겨진 Symbol key 확인

  • Object.getOwnPropertySymbols() 를 사용하여 숨겨진 Symbol key를 확인할 수 있습니다.
const id = Symbol('id');

const user = {
  name: "Mike",
  age: 30,
  [id]: "myid",
}

Object.getOwnPropertySymbols(user); // [Symbol(id)]
  • 혹은, Reflect.ownKeys() 메서드를 통해서 심볼을 포함한 모든 키를 반환받을 수 있습니다.
Reflect.ownKeys(user); // ["name", "age", Symbol(id)]

 

Symbol을 사용하는 이유?

 

다른 사람이 만들어 놓은 객체가 있고, 내가 그 객체를 활용해야 하는 상황이 있다고 해봅시다. 그런데 나는 그 객체에 프로퍼티와 값을 넣어서 사용해야 하는 경우가 있습니다. 하지만, 원본 객체에는 그 프로퍼티가 추가가 되길 원치 않는 경우가 있을 수 있죠.

 

이럴때, 원본 객체에 프로퍼티 키를 보이지 않고 프로퍼티와 값을 저장하여 사용하고 싶을 때 사용하는 것이 Symbol입니다.

 

const myIdol = {
  name: "Le sserafim",
  member: 5,
}

const showName = Symbol("show Name");
myIdol[showName] = function () {
  console.log(this.name);
};

user[showName](); // "Le sserafim"

for (let key in myIdol) {
  console.log(`My Idol's ${key} is ${myIdol[key]}.`);
}
/*
My Idol's name is Le sserafim
My Idol's member is 5
*/
저작자표시 비영리 (새창열림)

'Node.js > JS' 카테고리의 다른 글

[JavaScript] 이터러블 프로토콜과 map, filter, reduce  (2) 2023.04.25
[JavaScript] Map 메서드와 함수형 프로그래밍, 다형성  (2) 2023.04.23
[JavaScript] ES6에서의 순회와 이터러블  (2) 2023.04.22
[JavaScript] Number, Math  (0) 2022.09.27
[JavaScript] 객체 메소드(Object methods), 계산된 프로퍼티(Computed property)  (0) 2022.09.26
  1. Symbol.for() : 전역 심볼
  2. 숨겨진 Symbol key 확인
  3. Symbol을 사용하는 이유?
'Node.js/JS' 카테고리의 다른 글
  • [JavaScript] Map 메서드와 함수형 프로그래밍, 다형성
  • [JavaScript] ES6에서의 순회와 이터러블
  • [JavaScript] Number, Math
  • [JavaScript] 객체 메소드(Object methods), 계산된 프로퍼티(Computed property)
턴태
턴태
import { Dream } from "future";
턴태
턴태의 밑바닥부터 시작하는 de-vlog
턴태
전체
오늘
어제
  • ROOT (187)
    • Node.js (37)
      • ES6 (1)
      • TypeScript (3)
      • Express.js (16)
      • NestJS (16)
      • JS (24)
    • 프론트엔드 (29)
      • CS (5)
    • 백엔드 (1)
      • 검색 (2)
      • Database (1)
    • 기타 툴 (1)
      • git (1)
    • 데브옵스 & 인프라 (19)
      • Kubernetes (15)
      • Docker (2)
      • Monitoring (1)
      • IaC (1)
    • Algorithm (90)
      • Implementation & simulation (5)
      • Math (4)
      • Brute Force (1)
      • String (0)
      • Graph (5)
      • Recursion & Backtracking (19)
      • Divide & Conquer (2)
      • Dynamic Programming (18)
      • Greedy (13)
      • Priority Queue (2)
      • Binary Search (6)
      • Data Structure (7)
      • Shortest Path (5)
      • Minimum Spanning Tree (1)
      • Sorting (1)
      • Prefix Sum (1)
    • Linux (1)
      • Ubuntu (1)
    • Diary (5)
      • Algorithm (1)
      • Conference (1)
      • Retrospective (3)
    • Book (0)
      • Self-Development (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 타입스크립트
  • Kubernetes
  • backtracking
  • dynamic programming
  • 쿠버네티스
  • 자바스크립트
  • Express
  • 디프만
  • 오먹
  • Omuk
  • TypeScript
  • k8s
  • 다이나믹 프로그래밍
  • Toy Project
  • python
  • N과 M
  • 백준
  • 인프런
  • node.js
  • 네스트
  • 토이프로젝트
  • 인프런X디프만
  • baekjoon
  • nestjs
  • 익스프레스
  • 백트래킹
  • 파이썬
  • 노드
  • 함수형 프로그래밍
  • GREEDY

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.1
턴태
[JavaScript] Symbol
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.