[모던 자바스크립트 딥다이브]_ES6 함수의 추가 기능 어디까지 보고 오셨어요?

ES6 이전과 이후의 함수

우리가 함수를 사용하다 보면, new 키워드를 사용해 인스턴스를 생성하는 생성자 함수로서 호출할 수도 있고,

객체에 바인딩 되어 있는 메서드로 호출할 수도 있으며,

일반 함수로서도 호출할 수가 있는데요.

ES6 이전의 함수는 사용 목적에 따라 호출을 하는 건 전적으로 개발자의 몫이었습니다.

따라서 모든 함수는 일반 함수로서 호출도 되었고, 생성자 함수로서 호출도 할 수 있었습니다.

하지만 이렇게 불명확한 사용방식은 실수를 유발할 수 있기 때문에 옳지 않습니다.

 

ES6 함수의 구분	constructor	prototype	super	arguments
일반함수	O	O	X	O
메서드	X	X	O	O
화살표 함수	X	X	X	X

이제 ES6이후의 함수는 각각 명확하게 3가지로 구분됩니다.

 

메서드

ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미합니다.

이제 메서드는 consttructor가 없어 인스턴스를 생성할 수가 없습니다.

따라서 생성자 함수로서 호출할 수가 없습니다.

객체에 바인딩 된 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯을 가집니다. [[HomeObject]]

 

화살표 함수

화살표 함수는 인스턴스를 생서할 수 없습니다.

따라서 프로토타입을 생성할 수 없습니다.

일반함수와는 다르게 중복된 매개변수를 사용할 수 없습니다.

화살표 함수는 함수 자쳉의 this 바인딩을 갖지 않습니다. 따라서 화샆표 함수 내부에서 this를 참조하면

상위 스코프의 this를 그대로 참조합니다.

이를 lexical this라고 합니다.

 

Rest 파라미터 , 매개변수 기본값

rest 파라미터는 나머지 매개변수라고도 부르며, 매개변수 이름 앞에 세개의 점을 붙여서 정의합니다.

이를 다양하게 활용할 수가 있는데요.

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

foo(1,2,3,4)

여러개의 인수를 배열로 받아 올 때 사용할 수 있고,

 

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

foo(1,2,3,4)

이렇게 인수를 나눠서도 받아 올수가 있습니다.

 

자바스크립트는 딱히 매개변수의 갯수에 대해서 신경을 쓰지 않는데요.

매개변수의 갯수를 넘는 인수를 주어도 무시합니다.

그럼 만약 정해진 매개변수 보다 인수가 적다면 어떻게 될까요?

할당되지 못한 매개변수는 undefined가 되어 의도치 않은 결과가 발생합니다.

따라서 기본값을 지정에 이런 현상을 예방할 수 있습니다.

function sum(x=0 , y=0) {
  return x+y;
}

sum(1,2); // 3

sum(4); // 4

sum(); // 0

이렇게 기본값을 부여함으로써 NaN이 나오는 것을 막을 수 있습니다.