프론트엔드-코드/Javascript

Symbol

sdafdq 2023. 9. 14. 16:10

고유한 값을 가지고 싶을 때? 사용한다고 한다.

UUID 같은 건가?

 

예를 들면 DB에 id(로그인 아이디 말고)를 0, 1, 2 이런 거 대신 Symbol로 저장해주는 뭐 그렇게도 사용하기도 하나 봄.

 

 

 


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

console.log( id.description );

생성할 때 안에 넣는 건 description, 설명임. id라고 나옴.

Symbol이 생성한 임의의 값좀 볼려고 했더니toString해도 숨겨져 있다. 보안때문에 보지 못하도록 막아놨다.

 

 

같은 심볼을 공유하게끔도 할 수 있다.

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

console.log(id1 === id2);

같다고 나온다.

id가 식별자가 되는 느낌인가?

 

전역변수 느낌이라고 하던데,  Symbol.for('id') 하면 id라는 어떤 식별자를 가진 심볼을 불러오거나, 없으면 전역으로 등록한다.

 

그냥 Symbol('id') 이거는 인자로 설명을 넣는거다.

 

 

 

 

const id1 = Symbol.for('id');
const id2 = Symbol.for('w');
const id3 = Symbol.for('q');
const id4 = Symbol.for('a');
const id5 = Symbol.for('z');

console.log(Symbol.keyFor(id1));

넣었던 키를 조회할 수 있다.

id라고 나온다.

 

 

keyFor()는 key를 문자열로 반환해준다.

 

 

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

console.log(obj);

console.log(Object.getOwnPropertySymbols(obj));

Object.getOwnPropertySymbols(obj) 하면 저 오브젝트의 symbol객체를 가져온다.

 

 

 

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

console.log(obj);
 
console.log(Reflect.ownKeys(obj));

모든 키 반환. 

근데 이거는 symbol도 같이 반환해줌.

 

 

 

 

const user = {
  name : 'Jone',
  age : 65
}

const showName = Symbol('show name');
user[showName] = function(){
  console.log(this.name);
}

console.log(user[showName]);

이렇게도 쓴..다고 한다.

아니.. 이렇게 쓰나..? 굳이..?

 

이렇게 되면 showName이 고유한 값이 되기 때문에, 뭐랄까 고유한 키가 될 수 있다.

정말 중요한.. 그런 걸 이런 식으로 해 놓는건가..?

근데 굳이..? 솔직히 말해서 고유한 키로 만들기 위해 이렇게 쓴다는 것은..

너무 번거롭다.

 

협업용인가.>?

 

 

 

일단 장점은 있다.

 

const showName 이렇게 상수에다가 심볼을 넣어줬다.

만약, 

 

const user = {
  name : 'Jone',
  age : 65,
  showName : 'hi'
}

const showName = Symbol('show name');
user[showName] = function(){
  console.log(this.name);
}

console.log(user[showName]);
console.log(user.showName);

이렇게 있을 경우,

이미 showName이라는 key가 있다.

user.showName은 user의 showName이라는 키를 찾는 것이고,

user[showName] 은 내가 정의한 showName을 인덱스로 넣어서 가져오는 느낌이다.

 

그래서 기존 user의 showName을 전혀 파괴시키지 않고 내 것을 등록할 수 있다.

 

 

아 근데 나는 이렇게 안 쓸것 같다.

너무 복잡하다. 차라리 클래스를 정의하고, 거기에 맞춰 쓸 것 같다. 

'프론트엔드-코드 > Javascript' 카테고리의 다른 글

Math클래스 소수  (0) 2023.09.14
toString()으로 여러 진법으로 변환  (0) 2023.09.14
객체 메소드 (객체 <-> 배열 변환 등등등)  (0) 2023.09.13
자바스크립트로 enum 구현  (0) 2023.09.13
LocalStorage  (0) 2023.09.12