[중급 자바스크립트] 심볼

Javascript/Javascript

[중급 자바스크립트] 심볼

Rainbow🌈Coder 2022. 3. 24. 19:10

728x90

https://youtu.be/4_WLS9Lj6n4

**코딩앙마님의 유튜브 무료 강좌를 보고 학습한 포스팅입니다.

객체 프로퍼티 키는 문자열..

심볼은..

[유일한 식별자]

const a = Symbol(); //new를 붙이지 않는다.

      const symA = Symbol();
      const symB = Symbol();
      console.log(symA); //Symbol()
      console.log(symB); //Symbol()
      console.log(symA == symB); //false
      console.log(symA === symB); // false

심볼형은 유일성을 보장해준다.

const id = Symbol('id');

심볼 뒤에 소괄호에 설명을 넣어주면 좋다. 들어가는 문자열 설명은 어떠한 영향도 미치지 않는다.

이렇게 객체를 파고드는 메서드를 다 회피하는 심볼형은 무엇을 위해 있을까? 어떻게 사용해먹을 수 있을까?

특정 객체의 원본 데이터는 건들이지 않고 특성을 추가할 수 있다.

다른 사람이 만들어 놓은 객체에 자신만의 속성을 추가해서 덮어써버리면 안될 때...

유일한 프로퍼티를 추가하고 싶을 때 심볼을 사용할 것

      let h = "height";
      const player = { hp: 200, mp: 150 };
      player[h] = "160cm";
      console.log(JSON.stringify(player));//{"hp":200,"mp":150,"height":"160cm"}

위의 코드에서부터 또 차근차근 학습해보자...

      let h = "height";
      //다른 개발자가 만들어 놓은 객체
      const player = { hp: 200, mp: 150 };
      player[h] = "160cm";
      console.log(JSON.stringify(player)); //{"hp":200,"mp":150,"height":"160cm"}
      //내가 작업
      player.showInfo = function () {};
      //사용자가 접속하면 보는 메세지
      for (let key in player) {
        console.log(`His ${key} is ${player[key]}.`);
      }

      let h = "height";
      //다른 개발자가 만들어 놓은 객체
      const player1 = { name: "리한나", hp: 200, mp: 150 };
      const player2 = { name: "브리트니스피어스", hp: 5490, mp: 10 };
      player1[h] = "160cm";
      console.log(JSON.stringify(player1)); //{"hp":200,"mp":150,"height":"160cm"}
      //내가 작업
      //player.showInfo = function () {};
      const showInfo = Symbol("show Info");
      player1[showInfo] = function () {
        console.log(
          `${this.name}의 체력은 ${this.hp}이고 마력은 ${this.mp}라고 합니다.` //리한나의 체력은 200이고 마력은 150라고 합니다.
        );
      };
      player2[showInfo] = function () {
        console.log(
          `${this.name}의 체력은 ${this.hp}이고 마력은 ${this.mp}라고 합니다.` //브리트니스피어스의 체력은 5490이고 마력은 10라고 합니다.
        );
      };
      player1[showInfo]();
      player2[showInfo]();
      //사용자가 접속하면 보는 메세지
      for (let key in player1) {
        console.log(`His ${key} is ${player1[key]}.`);
      }
      console.log(Object.getOwnPropertySymbols(player1));
      console.log(Reflect.ownKeys(player1));

      console.log(Object.getOwnPropertySymbols(player2));
      console.log(Reflect.ownKeys(player2));