심볼(Symbol)은 ES6에서 추가된 새로운 원시 타입 중 하나입니다. 심볼은 유일하고 변경 불가능한(primitive and immutable) 값을 나타내며, 다른 값과 중복되지 않는 고유한 식별자(identifier)를 생성하는 데 사용됩니다. 이러한 특성으로 인해 객체의 속성 이름으로 사용될 수 있습니다.
그리고 심볼은 유일한 키를 부여하기 유용하게 사용할 수 있습니다.
사용 시 장점
1. 속성 이름 충돌 방지: 객체의 속성 키로 사용될 때, 심볼은 다른 키와 구분되기 때문에 속성 이름 충돌을 방지할 수 있습니다. 이는 코드의 안정성을 높이고, 의도하지 않은 동작을 방지하는 데 도움이 됩니다.
2. 내부적인 속성 숨김: 심볼을 사용하여 객체의 내부적인 속성을 숨길 수 있습니다. 이는 객체를 사용하는 다른 코드에서 이 속성을 실수로 변경하는 것을 방지할 수 있습니다.
3. 내장 객체 확장: 심볼을 사용하여 내장 객체의 동작을 확장할 수 있습니다. 이는 기존 객체를 수정하지 않고, 새로운 동작을 추가할 수 있다는 것을 의미합니다. 이러한 방식으로 내장 객체를 확장하면, 라이브러리나 프레임워크에서 사용될 수 있는 기능을 구현할 수 있습니다.
4. 고유한 값: 심볼은 생성할 때마다 고유한 값이 할당되기 때문에, 다른 심볼과 절대 같을 수 없습니다. 이는 심볼을 사용하여 고유한 식별자를 생성하는 데 도움이 됩니다.
5. 디버깅 용이성: 심볼은 개발자 도구에서 객체의 속성을 쉽게 파악할 수 있도록 도와줍니다. 이는 객체의 속성 이름 충돌을 방지하면서도, 객체의 속성을 명확하게 파악할 수 있도록 돕습니다.
예를 들어, 실제 코드에서 심볼은 다음과 같은 방법으로 생성할 수 있습니다.
예시 코드
심볼은 기본적으로 아래 코드와 같이 사용
const mySymbol = Symbol(); // 매개변수를 생략하면 유일한 식별자 생성
const mySymbol2 = Symbol('mySymbol2'); // 심볼 이름 지정
- 심볼은 객체의 속성 키로 사용될 수 있으며, 다음과 같은 방법으로 객체의 속성에 접근할 수 있습니다.
const mySymbol = Symbol();
const obj = {
name: 'John',
[mySymbol]: 'my value'
};
console.log(obj.name); // 'John'
console.log(obj[mySymbol]); // 'my value'
- 심볼은 다른 키와 구분됩니다. 예를 들어, 객체의 속성을 열거할 때는 심볼을 제외한 다른 속성만 열거됩니다.
const mySymbol = Symbol();
const obj = {
name: 'John',
[mySymbol]: 'my value'
};
for (let key in obj) {
console.log(key); // 'name'
}
console.log(Object.keys(obj)); // ['name']
console.log(Object.getOwnPropertyNames(obj)); // ['name']
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol()]
- 심볼은 다른 심볼과 같은지 여부를 확인하는 메서드인 Symbol.for을 사용하여 전역 심볼 레지스트리(Global Symbol Registry)를 통해 공유할 수 있습니다.
const mySymbol = Symbol.for('mySymbol');
const mySymbol2 = Symbol.for('mySymbol');
console.log(mySymbol === mySymbol2); // true
'Programming > JavaScript' 카테고리의 다른 글
[JavaScript] 자바스크립트 특정 페이지 이동 | 민민의 하드디스크 - 티스토리 (1) | 2023.05.15 |
---|---|
[JavaScript] 자바스크립트 웹 출력하기 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.15 |
HTML, CSS 버튼 디자인 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.12 |
[JavaScript] JavaScript에서 그래프 그리기 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.11 |
[JavaScript] JavaScript에서 Map과 Object | 민민의 하드디스크 - 티스토리 (0) | 2023.05.09 |