# 20210108(금)

## 2021-01-08

### 1. 학습 날짜

* 2020-01-08

### 2. 학습 시간

* 09:00 \~ 13:00, 17:30 \~ 21:00

### 3. 학습 범위 및 주제

* 자바스크립트

### 4. 학습 목표

* 자바스크립트 학습

### 5. 과제 제출

* x

### 6. 상세 학습 내용

**자바스크립트**

**객체간의 연산을 하는법**

* 자바스크립트에서 객체간에 연산을 하기 위해서는 `원시형`으로 변환을 하고 연산이 수행된다.
* 그렇다면 어떤 방법으로 객체가 원시형으로 변환되는걸까?
  * 크게 두 가지 방법이 존재한다. 첫 번째는 `ToPrimitive` 특수 객체 메서드를 객체에 선언하는 것이고 두 번째는 `toString()`과 `valueOf()` 메서드를 만드는 것이다.
* 두번째 방법은 과거의 유물같은 문법이니까 세련된 첫 번째 방법을 익히자.
* 메서드 자체를 익히기 전에 먼저 `hint` 라는 개념을 이해해야한다.
  * `hint` 란 메서드의 인자로 정확히 원하는 타입이 들어오지 않고 다른 타입으로 들어올 때, 이 메서드가 진정으로 원하는 타입이 무엇인지 가르쳐주는 역할을 한다.
  * 이렇게 함으로써 문자열을 원하는 메서드에 넘버를 넣으면 자동으로 넘버가 문자열로 바뀌게 된다.
  * `hint`의 종류는 string, number, default 세 종류다.
* `ToPrimitive` 는 특수 객체 메서드다.
  * 따라서 객체 안에 선언하는 방식이 일반 메서드와는 조금 다르다.
  * 내장심볼로서 존재하기 때문에 아래처럼 객체 안에 만들어 준다.

    ```
    [Symbol.toPrimitive](hint) {
      alert(`hint: ${hint}`);
      return hint == "string" ? `{name: "${this.name}"}` : this.money;
    };
    ```

    **iterable 객체**
* 반복가능한 객체는 배열을 일반화한 객체다.
* iterable 한 객체는 `for...of` 에 사용할 수 있다.
* array는 대표적인 `iterable` 객체다.
* 우리가 만든 객체에도 이 `iterable` 속성을 부여할 수 있다.
* `Symbol.iterator`
  * 위에서 봤던 `Symbol.toPrimitive`와 마찬가지로 내장심볼로 구현하면 된다.
  * 이 메서드는 반드시 `이터레이터 객체` 를 리턴한다.
  * 그리고 이 `이터레이터 객체` 에는 반드시 `next` 메서드가 구현되어있어야 하고, `next` 메서드는 `{ done: Boolean, value: any }` 와 같은 포맷으로 값을 리턴한다.
  * 여기서 `done: true` 가 리턴이 되면 반복은 끝이 나는것

**map과 set**

* 자바스크립트에는 객체와 배열 말고 다른 자료형이 존재한다. 바로 맵과 셋이다.
* 맵과 셋의 개념은 너무 당연한거라 넘어가고...
* 맵과 셋 공통으로 반복 작업을 처리할 때 사용하는 메서드가 있다. 주의할점은 이터러블 객체를 리턴한다는 것이다!!! (배열이 아니다)
  * `~.keys()`
  * `~.values()`
  * `~.entries()`
* `keys()`
  * 이 메서드는 말 그대로 keys 를 리턴한다. set은 키가 없는데?? 그냥 내부 원소가 반환됨
* `values()`
  * values가 이터러블 객체로 반환된다. 마찬가지로 set은 그냥 원소들이 반환됨
* `entires()`
  * 키와 밸류가 쌍으로 반환된다. set은 키와 밸류가 같은 형태로 쌍지어져서 리턴됨

### 7. 오늘 학습 내용에 대한 개인적인 총평

* 흠.. 자바스크립트 정말 어려워 보인다;;

### 8. 다음 학습 계획

* 자바스크립트 학습하기