• 사실 정리하면서도 뭐가 뭔지 모르겠당..
• 계속 보고 또 보면 어떻게든 되겠지모~

자바스크립트 심볼(Symbol)

• ES6(ECMAScript 2015)에서 도입된 새로운 데이터 타입이다.
  (계속 추가 되니까 계속 공부해야하는 개발자란 직업 너무 마음에 드는 군)
• 심볼은 유일하고 변경 불가능한(immutable) 원시값이다.
• 다른 원시 데이터 타입인 문자열, 숫자, 불리언과 마찬가지로 심볼은 값으로 사용될 수 있습니다.

심볼 사용하는 법

1. 객체 속성 식별자

• 객체의 속성 이름으로 사용할 수 있다.

• 심볼을 사용하면 다른 속성들과 충돌하지 않는 유일한 식별자를 생성할 수 있다. 속성 이름 충돌을 방지하고 객체의 속성을 더 안전하게 관리할 수 있다.

  const id = Symbol('id');
  const person = {
    name: 'John',
    [id]: 123
  };
  console.log(person[id]); // 123

2. 숨김 속성

• 심볼은 명시적으로 접근해야 하는 숨김 속성(hidden property)을 생성할 때 유용하다. 이를 통해 외부에서 접근할 수 없는 속성을 만들 수 있다.

• 숨김 속성이란 객체 내부에서만 접근 가능한 속성을 의미한다. 일반적으로 외부에서 직접적으로 접근하거나 수정할 수 없으며, 객체의 내부 동작에 사용되거나 보호되어야 하는 데이터를 나타낸다.

• 심볼로 생성된 속성은 객체에 대괄호 표기법(bracket notation)을 사용하여 접근하며, 점 표기법(dot notation)을 사용하면 접근할 수 없다.

• 심볼은 숨김 속성을 만드는 데 사용될 수 있습니다. 객체의 외부에서 접근할 수 없는 비공개 속성을 만들기 위해 심볼을 사용할 수 있다. 이는 정보 은닉 및 캡슐화를 위해 유용하다.

  const password = Symbol();
  class User {
    constructor(username, password) {
      this.username = username;
      this[password] = password;
    }
    authenticate(inputPassword) {
      return inputPassword === this[password];
    }
  }
  const user = new User('John', 'password123');
  console.log(user.authenticate('password123')); // true
  console.log(user[password]); // 접근 불가능

(1)this.username과 this[password]

• this.username은 객체의 속성 이름이 "username"인 일반적인 속성을 의미한다.
• 이 속성은 점 표기법(dot notation)을 사용하여 객체에 직접 접근할 수 있다.
• 예를 들어, person.username과 같이 사용할 수 있다.
• 반면에 this[password]는 심볼로 생성된 속성을 나타낸다. password는 심볼 값이고, 이를 객체에 대괄호 표기법(bracket notation)을 사용하여 접근한다.
• 심볼은 고유하고 변경 불가능한 값이기 때문에 다른 속성과 충돌하지 않고 유일한 속성 식별자로 사용될 수 있다.
• 위 코드에서 User 클래스의 생성자에서 username과 password 매개변수를 받아와서 this.username과 this[password]로 속성을 설정하고 있다. 이렇게 함으로써 username은 일반적인 속성으로서 외부에서 접근할 수 있지만, password는 심볼로서 내부에서만 접근 가능한 숨김 속성으로 설정되는 것이다.

3. 내장 식별자

• JavaScript 내장 객체들에 내장된 많은 심볼들이 있다. 이러한 심볼들은 특정 동작이나 기능을 나타내는 데 사용된다.
• 예를 들어, Symbol.iterator 심볼은 객체에 이터레이터(iterator)를 구현하기 위해 사용된다.

   const arr = [1, 2, 3];
   const iterator = arr[Symbol.iterator]();
   console.log(iterator.next()); // { value: 1, done: false }
   console.log(iterator.next()); // { value: 2, done: false }
   console.log(iterator.next()); // { value: 3, done: false }
   console.log(iterator.next()); // { value: undefined, done: true }

• 심볼은 유일성이 보장되기 때문에 동일한 설명(Description)을 가지고 있더라도 항상 다른 값을 가진다.
• 이러한 특징을 이용하여 식별자 충돌을 피하고, 프로그램의 안정성과 확장성을 향상시킬 수 있다.

심볼 특징

• 심볼(Symbol)은 JavaScript에서 고유하고 변경 불가능한 값을 나타내는 데이터 타입이다. 간단히 말해, 심볼은 유일한 토큰(token)이며 다른 값들과 절대로 충돌하지 않는다.
• 심볼은 특징을 알아보자.

1. 유일성

• 각각의 심볼은 유일하다. 두 개의 심볼 값이 같아도 사실상 다른 심볼로 취급된다. 이는 서로 다른 심볼 값을 가진 속성을 객체에 추가하여 충돌을 방지하는 데 유용하다.

2. 비공개 속성

• 심볼은 숨김 속성(hidden property)을 생성하는 데 사용될 수 있다. 이를 통해 객체의 일부 속성을 숨기고 외부에서 접근할 수 없도록 만들 수 있다.

3. 내장 심볼

• JavaScript에는 여러 내장 심볼이 있다. 내장 심볼은 특정 동작이나 기능을 나타내는 데 사용된다.

• 예를 들어, Symbol.iterator는 객체의 이터레이터(iterator)를 나타내며 for...of 루프 등에서 사용될 수 있다.

• 다른 원시 데이터 타입(문자열, 숫자, 불리언, null, undefined)과 마찬가지로 값으로 사용된다.

• 심볼은 생성자 함수로 사용하여 생성될 수 있다.

const symbol = Symbol();

• Symbol('내용') 형태로 심볼 생성자에 설명(Description)을 제공할 수도 있다. 주석 비슷한거라 생각하면 된다.

const symbol = Symbol('설명');

• 심볼은 주로 객체의 속성 이름으로 사용되거나 숨김 속성을 생성하기 위해 활용된다. 이를 통해 객체의 속성 충돌을 방지하고, 속성들을 보호하고 확장 가능한 코드를 작성할 수 있다.
• 계속 같은 말 반복인 거 같지만 내꺼 될 때까지 정리한 거 보고 또 보기!

심볼 예시

• 더 쉬운 예시로 알아보자

// 유일한 식별자로서의 심볼 사용 예시

const RED = Symbol('red');
const BLUE = Symbol('blue');
const GREEN = Symbol('green');

function getColorName(color) {
  switch (color) {
    case RED:
      return '빨강';
    case BLUE:
      return '파랑';
    case GREEN:
      return '초록';
    default:
      return '알 수 없음';
  }
}

const selectedColor = BLUE;
console.log(getColorName(selectedColor)); // 출력: 파랑

위의 예시에서는 RED, BLUE, GREEN과 같은 심볼을 사용하여 색상을 나타내고, getColorName 함수에서 해당 심볼 값을 기반으로 색상 이름을 반환한다. 심볼을 사용하면 문자열을 사용하는 대신 고유하고 의미 있는 상수 값을 가지는 것이 가능하다. 이를 통해 코드의 가독성을 높이고 실수로 인한 문제를 방지할 수 있다.

// 숨김 속성으로서의 심볼 사용 예시

const password = Symbol();

class User {
  constructor(username, passwordValue) {
    this.username = username;
    this[password] = passwordValue;
  }

  authenticate(inputPassword) {
    return inputPassword === this[password];
  }
}

const user = new User('John', 'password123');
console.log(user.username); // 출력: John
console.log(user[password]); // 출력: password123 (접근 가능)
console.log(user.password); // 출력: undefined (접근 불가능)
console.log(user.authenticate('password123')); // 출력: true

위의 예시에서는 password라는 심볼을 사용하여 User 클래스의 비밀번호를 숨김 속성으로 설정하고, authenticate 메서드를 통해 비밀번호를 확인할 수 있다. 심볼을 사용하여 속성을 숨김으로 설정하면 외부에서 직접 접근할 수 없으므로 정보의 보안성을 향상시킬 수 있다.

주로 심볼이 사용되는 곳

• 심볼은 JavaScript에서 유연하고 안전한 개발을 위한 다양한 상황에서 사용될 수 있다. 주로 객체 속성의 식별자로 사용되며, 정보 은닉, 확장성, 라이브러리 개발 등에 활용된다.

심볼 이해하기 추천 유튜브 영상: javascript symbol, 어디에 쓸까요?