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

 

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'); 

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

 

 

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

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

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

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

4

 

 

      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));

<각종 math 함수>

 

Math.ceil() : 올림

ex)

let num1 = 5.1;

let num2 = 5.7;

Math.ceil(num1); //6

Math.ceil(num2); //6

 

Math.floor() : 내림

ex)

let num3 = 5.1;

let num4 = 5.7;

Math.floor(num3); //5

Math.floor(num4); //5

 

Math.round() : 반올림

ex)

let num5 = 5.1;

let num6 = 5.7;

Math.round(num5); //5

Math.round(num6); //6

 

보통 작업을 하다보면 소수점까지 표현해야 될 때가 많다.

예를 들면 소수점 셋째 자리에서 반올림해서 둘째 자리까지 보여줘야 할 경우

이럴경우 아래와 같이 하면 된다.

ex)

[요구사항 : 소수점 둘째자리까지 표현(셋째 자리에서 반올림)]

let userRate = 30.1234;

userRate * 100; //3012.34

100을 곱한 것을 반올림하면 3012

그것을 또 100으로 나누면 30.12

Math.round(userRate*100)/100; //30.12

 

toFixed()는 문자열을 반환하기 때문에

Number()을 이용해 숫자로 변환 후 작업하는 경우가 많다.

 

 

parseInt()는 *처음*부터 숫자로 가능한 부분까지 숫자를 읽고 나머지 문자열은 무시.

Number은 숫자 의외의 문자열이 섞여있으면 무조건 NaN 출력(only 숫자 by 숫자)

그리고 parseInt()는 인수를 하나 더 받아서 진수를 변경시킬 수 있는 독특한 기능이 있다.