Small Grey Outline Pointer JavaScript :: Symbol
본문 바로가기
Dev./JavaScript

JavaScript :: Symbol

by sso. 2022. 7. 15.

 

property key : 문자형

const obj={
    1: '1입니다.',
    false:'거짓'
}

Object.key(obj); //["1","false"]

obj['1'] //"1 입니다."
obj['false'] //"거짓"

 

 

 

Symbol 은 유일한 식별자를 만들 때 사용한다
Symbol : 유일성 보장

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

console.log(a)
console.log(b)
console.log(a===b) //일치연산자로 확인해보면 false가 나온다
console.log(a==b) //자료형은 달라도 내용만 일치하면 되는 동등연산자도 false가 나온다

 

 

property key : 심볼형

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

{name: 'Mike', age: 30, Symbol(id): 'myid'} //심볼로 만든 프로퍼티가 존재 함

 

 

 

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

console.log(Object.keys(user));

['name', 'age']

//symbol id가 안나옴

 

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

이런 메소드들은 key가 심볼형의 프로퍼티는 건너 뛴다

 

 

 

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

const id = Symbol('id');
user[id] = 'myid'

특정 개체에 원본데이터는 건드리지 않고 속성을 추가 할 수 있다

다른 사람이 만들어놓은 객체에 자신만의 속성을 추가해서 덮어 써버리면 안된다

 

 

Symbol.for() : 전역 심볼

-하나의 심볼만 보장 받을 수 있음

-없으면 만들고, 있으면 가져오기 때문

-심볼 함수는 매번 다른 Symbol 값을 생성하지만, Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유

-코드 어디에서든 사용할 수 있다

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

id1===id2; //true (for 없이 생성했던 것과는 다르다)

 

이름을 얻고 싶을 때 
Symbol.keyFor()

//이름을 얻고 싶을 때
Symbol.keyFor(id1) //"id"

 

description

(전역심볼이 아닌 심볼은 keyFor() 사용할 수 없다)

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

 

 

숨겨진 Symbol key 보는 법

Object.getOwnPropertySymbols()

Reflect.ownKeys() // 심볼형 키를 포함한 객체의 모든 키를 보여줌

const id = Symbol('id');
 
const user ={
    name : 'Mike',
    age : 30,
    [id] : 'myid'
}
Object.getOwnPropertySymbols(user); // [Symbol(id)]
Reflect.ownKeys(user); // ["name", "age", "Symbol(id)"]

 

 

 


 

 

 

//다른 개발자가 만들어놓은 객체
const id = Symbol('id');
 
const user ={
    name : 'Mike',
    age : 30,
}
//내가 작업
user.showName = function(){};


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

내가 작업한 영역에서 이상하게 출력 된다 이럴때 심볼을 사용하는게 좋다

 

 

 

 

 

//다른 개발자가 만들어놓은 객체
const id = Symbol('id');
 
const user ={
    name : 'Mike',
    age : 30,
}
//내가 작업
//user.showName = function(){};
const showName = Symbol('show name');
user[showName] = function(){
    console.log(this.name);
};

user[showName]();


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

 

 

 

 

이렇게 하면 원래 user에 같은 이름의 메서드가 있는지 고민 하지 않아도 되고,

다른 사람이 만들어놓은 프로퍼티를 덮어쓸 일도 없다는 것이 심볼의 장점이다

 

 

 

 

728x90

댓글