JavaScript 11장 - 개념짚기 (5)

JavaScript

Symbol

• 객체의 key는 기본적으로 문자형으로 만들어진다.
• {1: "1입니다.", false: "거짓"} 이런 식으로 숫자형과 블린형으로 만들어도 Object.keys(obj)로 출력해보면 ["1", "false"]와 같은 코드가 출력되는데, 실제로 접근할 때도 obj["1"], obj["false"]와 같이 문자형으로 접근해야 한다.
• 다른 방법으로는, 유일한 식별자인 Symbol을 사용하는 것이다.

const a = Symbol();
const b = Symbol();

console.log(a); // Symbol()
console.log(b); // Symbol()

a === b; // false
a == b; // false

• 이와 같이 유일한 식별자로 동작하기 때문에 객체의 key로 사용할 수 있다.
• 사용하려는 문자열을 Symbol("문자열을 이곳에 작성")에 작성하여 객체의 key로 사용한다.

const id = Symbol("id");
const user = {
  name: "Mike",
  age: 30,
  [id]: "myId",
};

user; // {name: "Mike", age: 30, Symbol(id): "myId"}
user[id]; // "myId"
Object.keys(user); // ["name","id"]

• 위의 예시처럼 객체 메서드를 사용해도 Symbol로 작성된 key && value는 건너뛰게 되는데, 다른 사람이 만든 객체에 원본 객체를 유지하면서 다른 프로퍼티를 추가하고 싶을 때 유용하게 사용된다.

활용 예시

• 남이 만든 아래의 코드에 function을 추가하고 싶을 때, user안에 function을 직접 추가 시, 함수에 대한 콘솔도 출력된다.

const user = {
  name: "Mike",
  age: 30,
};

user.ShowName = function () {};

for (let key in user) {
  console.log(`${key} is ${user[key]}`);
}
// name is Mike
// age is 30
// ShowName is function(){}

• 이 때 심볼을 추가하여 객체에 프로퍼티를 저장하지만, 콘솔엔 출력이 안 되게 작성할 수 있다.

const user = {
  name: "Mike",
  age: 30,
};

const showName = Symbol("show name");
user[showName] = function () {
  console.log(this.name);
};

for (let key in user) {
  console.log(`${key} is ${user[key]}`);
}

// name is Mike
// age is 30

user[showName](); // Mike

Symbol.for()

• 심볼은 이름이 같다라도 각각 다른 존재이지만, 전역 변수처럼 이름이 같으면 같은 객체를 가르켜야할 때가 있는데, 이럴 때 사용된다.
• 하나의 심볼만 보장받을 수 있으며, 없으면 만들고, 있으면 가져오는 특성을 갖고 있다.
• 심볼 함수는 매번 다른 심볼값을 생성하지만, Symbol.for()메서드는 하나를 생성한 뒤 키를 통해 같은 심볼을 공유한다.

const class1 = Symbol("class");
const class2 = Symbol("class");

class1 === class2; // false

const id1 = Symbol("id");
const id2 = Symbol("id");

id1 === id2; // true

Symbol.keyfor()

• 전역으로 선언된 심볼의 이름을 얻고 싶을 때 사용된다.

const id1 = Symbol("id");
Symbol.keyfor(id1); // id

description

• 전역 심볼이 아닌 일반적인 심볼인 경우에는 keyfor을 사용해도 이름을 얻을 수 없지만, description을 사용할 수 있다.

const class1 = Symbol("class");
class1.description; // class

숨겨진 Symbol key

• Symbol을 사용해 객체의 키는 숨겼지만, 이를 완전히 숨길 수 있는 방법은 없다.

Object.getOwnPropertySymbols

• 객체 안에 심볼로 숨겨진 키를 찾을 때 사용된다.

const id = Symbol("id");

const user = {
  name: "user",
  [id]: "myId",
};

Object.getOwnPropertySymbols(user); // [Symbol(id)]

Reflect.ownKeys

• 객체 안에 심볼로 숨겨진 키를 포함한, 키 전체를 찾는다.

const id = Symbol("id");

const user = {
  name: "user",
  [id]: "myId",
};

Reflect.ownKeys(user); // ["name", Symbol(id)]

number

• 실생활에서 사용하고 있는 숫자는 10진수이며, 개발 시 2진수나 색상 표현을 위한 16진수가 필요할 때가 있다.
• 10진수를 2진수와 16진수로 변환할 때 toString메서드를 사용할 수 있다.

toString

• 숫자를 문자로 바꾸는 데 사용되지만, 괄호 안에 숫자를 기입하면, 기입된 숫자의 진법으로 변환한다.

let num = 10;

num.toString(); // 10 (문자열)
num.toString(2); // 1010 (문자열)

num = 255;
num.toString(16); // ff

Math

• 수학과 관련된 내장 객체이다.

1. Math.PI : 원주율
2. Math.ceil : 올림
3. Math.floor : 내림
4. Math.round : 반올림
5. Math.fixed : 원하는 소수점의 자릿수만큼을 표시하지만, 문자열을 반환한다는 주의사항이 있다.
6. isNaN : NaN인지 판단 여부, NaN === NaN (false)이기 때문에 NaN을 판단하는 유일한 방법이다.
7. parseInt : 문자를 숫자로 바꿔주는데, Number()와 다른 점은 문자가 혼용되어 있어도 읽을 수 있는 부분은 읽는다.
   1. 따라서 첫 문자가 읽을 수 없다면 NaN을 반환하지만, 두 번째 인자로 진수를 받아 지정할 수 있다.

let margin = "10px";
parseInt(margin); // 10
Number(margin); // NaN

let color = "f3";
parseInt(color); // NaN
parseInt(color, 16); // 243

1. parseFloat : parseInt는 소수점은 무시하고 정수만 반환하는 것과 달리 소수점을 반환한다.

   let padding = "18.5%";
   parseInt(padding); // 18
   parseFloat(padding); // 18.5
   

2. random : 0 ~ 1 사이 무작위 숫자 생성

   Math.floor(Math.random() * 100) + 1;
   // 1 ~ 100 사이 임의의 숫자
   // 1을 더하는 이유는 0.00123 과 같은 숫자가 나오면 0이 되기 때문에
   

3. max, min : 괄호 안의 인수들 중 최솟값, 최댓값을 반환한다.
4. abs : 절댓값
5. pow(n, m) : n의 m 승 값을 구한다.
6. sqrt : 제곱근