갈푸라떼
갈푸라떼는 개발중
갈푸라떼
전체 방문자
오늘
어제
  • 분류 전체보기 (232)
    • CS (0)
      • CSinfo (0)
    • Frontend (15)
      • HTML,CSS (1)
      • Javascript (2)
      • React (0)
      • React Hook (12)
    • Backend (0)
      • Python (0)
      • Node.js (0)
      • php (0)
    • DB (2)
      • MySQL (2)
      • BigQuery (0)
      • Mongodb (0)
    • Study (186)
      • JavaScript (72)
      • JavaScript(Clean code) (50)
      • Node.js (11)
      • HTML,CSS (13)
      • React (30)
      • TypeScript (10)
      • React-Native (0)
    • Error (2)
      • error (2)
    • Git (22)
      • Git (22)
    • Help Coding (4)
      • Useful websites (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • Github

공지사항

인기 글

태그

  • 컴파일러
  • symbol
  • 스코프 체인
  • structure
  • 심볼
  • 상속
  • 함수
  • SPREAD
  • 객체타입
  • ECMAScript
  • PM2
  • 렉시컬 환경
  • 정적 레벨
  • Arrow
  • 싱글스레드
  • class
  • 실행 컨텍스트
  • function
  • 인터프리터
  • 이터러블
  • nodemon
  • 호이스팅
  • 원시타입
  • prototype
  • this
  • 프로토타입
  • 오버라이딩
  • 자바스크립트엔진
  • Babel
  • 네이밍

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
갈푸라떼

갈푸라떼는 개발중

Study/JavaScript

[JavaScript_study] Symbol

2022. 3. 23. 00:19

* Symbol은 유일한 식별자를 만들때 사용한다. (유일성보장)

  • 특정객체에 원본데이터는 건들지않고 속성을 추가할 수 있다.

 

const a = Symbol(); // new를 붙이지 않는다.
const b = Symbol();

console.log(a) // Symbol()
console.log(b) // Symbol()

a === b; // false
a == b; // false

const id = Symbol('id');
const id = Symbol('id');

id // Symbol(id)
id2 // Symbol(id)

id === id2 // false
id == id2 // false
// 원본객체를 건들지 않고 객체를 추가가능하다.

const user = {
  name : 'Mike',
  age : 30
}

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

console.log(user) // {name : 'Mike', age : 30, Symbol(id) : 'myid'}
user[id] // 'myid'

// Key가 Symbol형일 경우는 건너뛴다. for in을 써도 건너뛴다
Object.keys(user); ["name", "age"]
Object.values(user); ["Mike", 30]
Object.entries(user); [Array(2), Array(2)]
for (let a in user) {}

 

* Symbol.for() : 전역 심볼

  • 하나의 심볼만 보장받을 수 있음
  • 없으면 만들고, 있으면 가져오기 때문
  • Symbol 함수는 매번 다른 Symbol 값을 생성하지만,
  • Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유
const id1 = Symbol.for('id');
const id2 = Symbol.for('id');

id1 === id2; //  true

// Symbol.for의 Symbol값을 확인하는 방법
Symbol.keyFor(id1) // "id"

// Symbol의 Symbol값을 확인하는 방법
const id = Symbol('id 입니다.');

id.description; // 'id 입니다.'

 

* 숨겨진 Symbol key보는법

 

const id = Symbol('id);

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

Object.getOwnPropertySymbols(user); // [Symbol(id)]
Reflect.ownKeys(user); // ["name", "age", Symbol(id)]

 

* Symbol을 활용하는 예시 코드

// 다른 개발자가 만들어 놓은 객체
const user = {
  name : 'Mike',
  age : 30,
};

// 내가 작업
const showName = Symbol("show name");
user[showName] = function() {
  console.log(this.name);
};

user[showName]() // Mike

// 사용자가 접속하면 보는 메세지
for (let key in user) {
  console.log(`His ${key} is ${user[key]}.`);
}

// His name is Mike.
// His age is 30.

'Study > JavaScript' 카테고리의 다른 글

[JavaScript_study] 배열 메소드2 (sort, reduce)  (0) 2022.03.23
[JavaScript_study] 배열 메소드1 (Array methods)  (0) 2022.03.23
[JavaScript_study] 문자열 메소드(String methods)  (0) 2022.03.23
[JavaScript_study] 숫자, 수학 method (Number, Math)  (0) 2022.03.23
[JavaScript_study] Object - methods / Computed property  (0) 2022.03.22
    'Study/JavaScript' 카테고리의 다른 글
    • [JavaScript_study] 배열 메소드1 (Array methods)
    • [JavaScript_study] 문자열 메소드(String methods)
    • [JavaScript_study] 숫자, 수학 method (Number, Math)
    • [JavaScript_study] Object - methods / Computed property
    갈푸라떼
    갈푸라떼

    티스토리툴바