기호는 당신의 친구입니다 1부: 부드러운 소개

Symbol의 개념은 많은 개발자를 당황하게 할 수 있습니다. 이 기사에서 나는 그것들을 이해하고 그것들이 무엇인지 설명하려고 노력할 것입니다.

시작하려면: 기호는 JavaScript의 새로운 기본 데이터 유형입니다. JS의 6가지 기본 요소를 외우지 않았다면 BBUNSS 🍔의 약어 니모닉 장치를 사용합니다.

부울

BigInt

정의되지 않음

번호

문자열

심볼

Symbol 데이터 유형은 단순히 고유한 값입니다. 고유 값은 변수 및 개체 속성과 관련된 이름 충돌을 방지하는 데 유용합니다.

새로운 기호를 생성하기 위해 우리는 단순히 전역Symbol 함수를 호출하고 선택적으로 설명자 문자열을 전달합니다:

const s1 = Symbol();
console.log(s1); // logs Symbol()

const s2 = Symbol('abc');
console.log(s2); // logs Symbol(abc);

이러한 반환 값은 문자열이 아니라 기호입니다.

console.log(typeof s2); // Logs "symbol"

Symbol의 또 다른 문제점은 생성할 때마다 이전에 생성한 다른 어떤 심볼과도 완전히 독특하다는 것입니다. 이것은 함수에 전달한 문자열이 기호로 강제 변환되지 않는다는 것을 보여줍니다. 이는 명확성 또는 디버깅을 위해 사용할 수 있는 단순히 레이블입니다.

Symbol('abc') === Symbol('abc'); // false

Symbol('abc') 및 Symbol('abc')의 반환 값이 코드에서 정확히 동일하게 인쇄되지만 이것이 동일하다는 의미는 아닙니다. 이들은 고유한 엔터티입니다.

그렇다면 왜 이러한 고유한 가치를 만들고자 할까요? 주요 목적은 개체 속성에 대한 식별자 역할을 하는 것입니다.

하지만 기다려. 우리는 이미 객체 속성을 식별하기 위해 문자열 기반 키를 사용합니다. 기호는 어떤 이점을 제공합니까?

좋아하는 Dragon Ball Z 캐릭터의 문자열을 취하고 switch 문을 사용하여 종족을 반환하는 다음 함수getRace()를 고려하십시오.

const GOKU = 'Goku';
const PICCOLO = 'Piccolo';
const BULMA = 'Bulma';
const KRILLIN = 'Piccolo'; // <- Oops, someone messed up!

function getRace(character) {
  switch (character) {
    case GOKU:
      return 'Saiyan';
    case PICCOLO:
      return 'Namekian';
    case BULMA:
      return 'Human';
    default:
      console.log('No race found!');
  }
}

getRace(PICCOLO); // Returns 'Namekian'
getRace(KRILLIN); // Returns 'Namekian' (D'oh!)

여기서 우리는 하나의 고유한 "피콜로"캐릭터만 만들려고 했습니다. 하지만 변수KRILLIN도 생성되어 동일한 값으로 설정되었습니다. 따라서 getRace(KRILLIN)가 호출되면 이 충돌로 인해 함수가 'Namekian'를 반환합니다. 기호를 사용하여 100% 고유 식별자를 만들 수 있습니다.

const GOKU = Symbol('Goku');
const PICCOLO = Symbol('Piccolo');
const BULMA = Symbol('Bulma');
const KRILLIN = 'Piccolo';

function getRace(character) {
  switch (character) {
    case GOKU:
      return 'Saiyan';
    case PICCOLO:
      return 'Namekian';
    case BULMA:
      return 'Human';
    default:
      console.log('No race found!');
  }
}

getRace(PICCOLO); // Returns 'Namekian'
getRace(KRILLIN); // Logs 'No race found!'

이제 더 기대되는 결과를 얻기 위해 고유하지 않은 문자열 대신 해당 switch 문 내에서 정확한 고유 기호를 확인하고 있습니다.

다른 예를 살펴보겠습니다.

// app.js

// Create character record
const character = {
  id: 123, 
  name: 'Goku',
  race: 'Saiyan'
};

// service.js

// Later in our app, some service overwrites the id 😠
character.id = 999;

일반 문자열 기반 키를 사용하여 id 속성을 생성했으므로 앱의 다른 모든 위치에 속성 값에 액세스하고 수정할 수 있는 코드가 있을 수 있습니다. 그것이 항상 바람직한 것은 아닙니다.

대신 id에 대한 기호를 사용합시다.

// app.js

// Create character record w/ id symbol
const id = Symbol('id');
const character = {
  [id]: 123, // Using [id] makes the key dynamic
  name: 'Goku',
  race: 'Saiyan'
};

console.log(character.id) // Logs undefined
console.log(character[id]); // Logs 123

이제 명시적으로 "id"기호를 사용하여 속성에 액세스하는 경우에만 id를 읽거나 변경할 수 있습니다. 기호를 제공하지 않는 한 앱의 다른 부분은 이 속성에 액세스할 수 없습니다. 속성 액세스에 문자열을 사용하지 않기 때문에 충돌을 방지합니다.

기호를 사용하면 코드에서 논리가 "강화"될 수 있음을 알 수 있습니다. 다른 기사에서 기호에 대해 탐색할 더 많은 내용이 있지만, 이것이 기호 개념에 대한 좋은 부드러운 소개가 되었기를 바랍니다! 🐤


내 블로그jsbits-yo.com에서 더 많은 #JSBits를 확인하세요. 또는 나를 따라 !