자바스크립트 - 심볼 객체

안녕하세요, 자바스크립트 개발자 지망생 여러분! 오늘 우리는 자바스크립트 심볼(Symbols)의 세계로 흥미로운 여정을 떠납니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요; 저는 이 개념을 단계별로 안내해드릴 것입니다. 저는 수년 동안 수많은 학생들에게 가르쳐온 경험을 바탕으로 말이죠. 그럼 시작해봅시다!

JavaScript - Symbol

자바스크립트 심볼

상상해보세요, 고급 마스querade 볼에 가셨을 때 모두가 마스크를 쓰고 있고, 각 마스크는 고유합니다. 자바스크립트의 세계에서 심볼은 이러한 마스크와 같습니다 - 그들은 고유한 식별자로, 첫 눈에 비슷해 보일지라도 서로를 구분하는 데 도움을 줍니다.

심볼은 자바스크립트의 원시 데이터 타입으로, ECMAScript 2015(ES6)에서 도입되었습니다. 다른 원시 타입인 문자열이나 숫자와 달리, 각 심볼은 보장되어 고유합니다.

우리의 첫 번째 심볼을 만들어보겠습니다:

const mySymbol = Symbol();
console.log(mySymbol);  // 출력: Symbol()

여기서 우리는 mySymbol 변수에 심볼을 저장했습니다. 콘솔에 로그를 찍어보면 Symbol()이 나타납니다. 하지만 속지 마세요 - 각 심볼을 생성할 때마다 새로운, 고유한 식별자입니다.

문법

심볼을 생성하는 것은 간단합니다. 두 가지 방법으로 할 수 있습니다:

설명 없이:
```
const sym1 = Symbol();
```
설명과 함께:
```
const sym2 = Symbol('내 설명');
```

설명은 선택 사항이며, 주로 디버깅 목적으로 사용됩니다. 심볼의 고유성에는 영향을 미치지 않습니다.

이 흥미로운 사실을 알려드릴게요: 심볼에는 new 키워드를 사용할 수 없습니다. new Symbol()을 시도하면 자바스크립트가 오류를 발생시킵니다. 마스querade 볼에서 고유한 마스크를克隆하려는 것과 같아, 그냥 안 됩니다!

심볼 속성

심볼에는 몇 가지 흥미로운 속성이 있습니다. 그们을 탐구해보겠습니다:

Symbol.length

console.log(Symbol.length);  // 출력: 0

이 값은 항상 0을 반환합니다. 마스querade 볼에서 특정 고유한 마스크를 착용한 사람의 수를 묻는 것과 같아, 항상 한 명입니다!

Symbol.prototype

이는 심볼 생성자의 프로토타입입니다. 이 부분은 좀 더 고급이므로 다른 날에 다룰 예정입니다.

심볼 메서드

심볼에는 몇 가지 유용한 메서드가 있습니다. 몇 가지를 살펴보겠습니다:

메서드	설명
Symbol.for(key)	주어진 키로 기존 심볼을 검색하고 발견되면 반환하며, 그렇지 않으면 새로운 심볼을 생성하고 반환합니다.
Symbol.keyFor(sym)	주어진 심볼에 대해 글로벌 심볼 레지스트리에서 공유된 심볼 키를 검색합니다.
toString()	심볼의 문자열 표현을 반환합니다.

이제 이를 실제로 보겠습니다:

const globalSymbol = Symbol.for('myGlobalSymbol');
console.log(Symbol.keyFor(globalSymbol));  // 출력: "myGlobalSymbol"

const localSymbol = Symbol('myLocalSymbol');
console.log(Symbol.keyFor(localSymbol));  // 출력: undefined

console.log(localSymbol.toString());  // 출력: "Symbol(myLocalSymbol)"

이 예제에서 globalSymbol은 마스querade 볼 입구에서 등록된 마스크와 같습니다. 누구나 이름으로 요청할 수 있습니다. 반면에 localSymbol은 당신이 직접 만든 마스크와 같아, 그것은 당신만의 고유한 것으로, 다른 사람들은 모릅니다.

예제

심볼을 사용하는 몇 가지 실질적인 예제를 보겠습니다:

예제 1: 심볼을 고유한 프로퍼티 키로 사용

const NAME = Symbol('이름');
const AGE = Symbol('나이');

const person = {
[NAME]: 'Alice',
[AGE]: 30
};

console.log(person[NAME]);  // 출력: "Alice"
console.log(person[AGE]);   // 출력: 30

이 예제에서 우리는 심볼을 객체의 키로 사용하여, 같은 이름을 가진 다른 프로퍼티와 충돌하지 않도록 합니다.

예제 2: 심볼을 for...in 루프에서 사용

const VISIBLE = Symbol('보이는');
const HIDDEN = Symbol(' 숨겨진');

const obj = {
[VISIBLE]: '이것은 보입니다',
[HIDDEN]: '이것은 숨겨져 있습니다',
normalProperty: '이것은 일반입니다'
};

for (let prop in obj) {
console.log(prop);  // 출력: "normalProperty"
}

심볼 프로퍼티는 for...in 루프에 포함되지 않습니다. 마스querade 볼에서 무形的 cloak을 입은 것과 같아요!

심볼 사용의 장점

고유성: 심볼은 항상 고유합니다. 이는 객체에 프로퍼티를 추가할 때 기존 프로퍼티를 덮어쓰지 않으려고 할 때 완벽합니다.
비공개성: 심볼 키 프로퍼티는 기본적으로 열거할 수 없습니다. 이는 for...in 루프나 Object.keys()에 나타나지 않습니다.
충돌 방지: 대형 코드베이스나 제삼자 라이브러리와 함께 작업할 때 심볼은 이름 충돌을 방지하는 데 도움을 줍니다.
특별한 행동: 일부 내장 심볼은 객체 행동을 커스터마이즈하는 데 사용할 수 있습니다. 예를 들어, Symbol.iterator는 객체가 어떻게 순회되는지 정의합니다.

결론적으로, 심볼은 자바스크립트 세계의 비밀 손인사와 같습니다. 그들은 고유한 식별자를 만들어 코드의 기능과 유지보수성을 향상시키는 다양한 방법으로 사용될 수 있습니다.

기억하세요, 마스querade 볼에서 각 마스크는 고유하고 특별하다면, 자바스크립트의 심볼도 그렇습니다. 처음에는 수수께끼 같을 수 있지만, 연습을 통해 당신의 프로그래밍 도구箱에서 강력한 도구로 자리 잡게 될 것입니다.

계속 코딩하고, 배우고, 가장 중요한 것은 자바스크립트 여정에서 즐겁게 만들어가세요!

Credits: Image by storyset