[JS] 자바스크립트 Symbol ? : 새로운 원시 데이터형, 심볼 (ES6)

ES6에서 새롭게 추가된 자바스크립트의 7번째 자료형!

Symbol type에 대해서 알아보자앙

🤨

---

 

Symbol  ?

Symbol은 자바스크립트의 Primitive data type으로

ES6에서 새롭게 추가된 자료형이다.

 

 

Symbol 생성

 

심볼 또한 다른 내장 객체처럼 new Symbol()과 같이 new 생성자를 사용할 것 같지만,

Symbol() 함수로 생성하게 된다.

 

const lets = Symbol();
const make = Symbol.for('target');
const symbol = Symbol.iterator();

//1. Symbol() 
//심볼은 String type의 ** optional ** parameter를 받는데,
//해당 심볼 자체에 접근하거나, 자체의 고유한 값에 영향을 미치지않는다! 디버깅용!

const recipe = Symbol('howToMake');
const manual = Symbol('howToMake');
console.log(recipe === manual);		//false

//+) 만약 해당 심볼의 description을 확인하고싶다?!!!
recipe.description;			//'howToMake'

 

그렇다면 왜,

그리고 어떤 때에 Symbol 타입을 사용하게 될깡?

 

//공부하며 강의에서 들었던 예시를 보면,,,
//배열은 length라는 속성을 이미 가지고 있다!
const sample = [1, 2, 3, 4, 5];
console.log(sample.length);	//5

//여기서 length 속성은 mutable하다!
//고로 해당 속성값은 누구나 직접 접근할 수 있고, 값을 수정할 수 있다!
sample.length = 10;
console.log(sample.length);	//10 
console.log(sample);		//[1, 2, 3, 4, 5, empty × 5]


//해당 배열에 일반적인 방식으로다른 속성을 추가해보자 (물론 접근 가능하고, 수정 가능하당)
sample.since = '2022';
console.log(sample.since);	//2022

sample.since = '1999';
console.log(sample.since);	//1999

//for in으로 반복문을 돌려보면, 해당 속성까지 콘솔창에 출력되는 결과를 확인할 수 있다.
for(const i in sample){
    console.log(`${i} : ${sample[i]}`);
}

 

만약 프라이빗한? 숨겨진? 속성으로 만들어

다른 누군가가 쉽게 접근을 하거나 바꾸는 것을 어렵도록 하려면,,,

자바처럼 private로 선언할 수 없는 자바스크립트에서는 심볼을 사용하면 유사하게 사용할 수 있다!

 

다른 어떠한 프로퍼티와 충돌하지 않으며, 은닉성을 가진! 유일한 식별자가 되어지게된다.

외부 코드에서 접근이 불가능하며, 값을 덮어쓸 수도 없다!

 

//하지만, Symbol type으로 속성을 추가하게 되면,
const type = Symbol();
sample[type] = type;
sample[type] = 'my private props';

//for in을 돌려보면 심볼로 추가된 속성을 출력되지않는 것을 확인할 수 있다앙~
for(const i in sample){
    console.log(`${i} : ${sample[i]}`);
}

//만약, 같은 이름의 속성을 심볼이 아닌 방식으로 추가하면 어떻게 될까?
sample.type = 'im public props';

console.log(sample.type);	//'im public props'
console.log(sample[type]);	//'my private props'

 

 

//예를 들어,
//yuri라는 객체는 name, email, id, pw 속성을 가진다.
let yuri = {
    name : 'yuri Choi',
    email : 'private@MyMail.com'
    id : 'sampleid01',
    password : 'password',
}

console.log(yuri);

//여기서 password 속성을 외부에서 접근하거나 수정을 막고싶다면?

 

//배열은 length라는 속성을 이미 가지고 있다!
const sample = [1, 2, 3, 4, 5];
console.log(sample.length);	//5

//만약 여기서 length라는 속성을 immutable한 고유의 값으로 고정하고싶다고 가정했을 때
//해당 속성값은 누구나 직접 접근해 값을 수정할 수 있다!
sample.length = 10;
console.log(sample.length);	//10 
console.log(sample);		//[1, 2, 3, 4, 5, empty × 5]

 

 

 

Object.keys(), for .. in 과 같은 

결과에서 배제된다!

const symbol1 = Symbol('');

---

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️
***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***