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. 다음 학습 계획

• 자바스크립트 학습하기