26. ES6함수의 추가 기능

정리

함수 구분 (constructor)

• ES6 이전 모든 함수는 동일하였다.
  • 일반함수 역시 생성자 함수로 호출이 가능했다.
    • callable, constructor이었다.
  • 불필요한 프로토타입 객체를 생성하는 문제가 있었다.
• ES6 이후 목적에 따라 3가지로 구분하였다.
  | | constructor | prototype | super | arguments |
  | :---------: | :---------: | :-------: | :---: | :-------: |
  | 일반 함수 | O | O | X | O |
  | 메서드 함수 | X | X | O | O |
  | 화살표 함수 | X | X | X | X |

메서드 (축약표현)

• ES6의 메서드란 축약표현으로 정의된 메서드만을 의미한다.
  • foo() {...} : O
  • foo: function() {...} : X
• non-constructor이기 때문에 생성자 함수로 호출 X
  • 인스턴스 생성 X -> prototype 관련 프로퍼티 X
• 자신을 바인딩한 객체를 가리키는 [[HomeObject]] 내부 슬롯을 가져, super 키워드 이용가능
• 표준 빌트인 객체의 메서드들 모두 여기에 해당한다.

화살표 함수

• Ex) const foo = () => {...}

  • 변수 1개 -> () 생략 가능
    • foo = x => {}
  • 리턴이 객체 리터럴 -> ()로 감싸야함
    • bar = () => ({x, y})

• 장점

  • 표현이 간략하여 가독성이 뛰어나다.
  • 함수 기능도 간략하여 편리하게 설게되었다.

• 차이점

  • non-constructor
  • 중복 매개변수 선언 X
  • 자체의 this,arguments,super,new.target 갖지 X
    • 상위 스코프 것을 참조

• 등장 이유

  • 콜백함수 내부의 this가 상위함수를 가리키지 않는 현상을 해결하기 위해 등장
    • 클래스 내(strict mode 적용)의 일반함수로 호출된 모든 함수는 this === undefined
      • 화살표 함수는 this가 없어, 상위 스코프의 것을 참조하므로 this === 상위스코프의 this이다.
        • 이를 lexical this라고 한다.

• 문제점

  • 언제나 상위 스코프의 this를 참조하여 this 교체가 불가능하다.
  • 메서드를 화살표 함수로 정의하는 것을 피해야한다.
    • Class에서 화살표 함수의 this가 상위 스코프인 전역 객체를 가리키게 된다.
  • 프로토타입 객체의 프로퍼티로 할당하는 것도 피해야한다.
    • constructor이 존재하지 않아 정의되지 않는다.

• 클래스 필드 정의 제안에서 사용가능

  • constructor() 내부에 정의된 것으로 취급 -> this로 상위 스코프인 클래스 프로퍼티 참조가능
    • 인스턴스 메서드로 취급된다.

• super, arguments 역시 상위 스코프의 것을 참조한다.

Rest 파라미터

function foo(param1,param2,...rest) {console.log(param1,param2,rest);} // 1 2 [3,4,5]
foo(1,2,3,4,5);

• 위와 같이, 선택되지 않은 나머지 인자들을 배열로 받는다.
  • 따라서 반드시 마지막에 하나만 와야한다.
• 화살표함수는 arguments가 없어 Rest를 사용해야 한다.

매개변수 기본값

• function add(x=0,y=0) {...} 처럼 매개변수의 기본값을 설정할 수 있다.

느낀점

기타

• 파일이름을 전부 교체했다.
  • rename 's/[0-9]{1,2}_[0-9]{1,2}_/Day/' *.md 을 이용했다.
    • YY_MM_ -> Day로 교체된 것이다.
    • ''문 맨마지막에 /을 안넣어서 계속 안되었는데 결국 해결했다.