[Javascript] ES6 함수

ES6 함수

ES6 이전의 함수는 사용 목적에 따라 명확히 구분되지 않는다. 일반함수로서 호출도 가능하고 생성자 함수로도 호출이 가능했다. callable 이면서 constructior 이다.

때문에 호출 방식에 특별한 제약이 없었고, 생성자 함수로 호출되지 않아도 프로토타입 객체를 생성한다. 이는 혼란스럽고 실수를 유발과 성능이 나빠질수 있다.

🤔 그럼 ES6 이후의 함수는?

ES6 함수는 사용 목적에 따라 세 가지 종류로 명확히 구분하였다.

• 일반 함수 : 함수 선언문이나 함수 표현식으로 정의한 함수 ES6 이전의 함수와 차이가 없다.
• 메서드 : 메서드 축약 표현으로 정의된 함수만을 의미. non-constructor이기 때문에 생성자 함수로 호출할 수 없다.
• 화살표 함수 : 일반 함수의 기능을 간략화하고 콜백함수 내부에서 this가 전역 객체를 가르키는 문제를 해결한다.

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

일반함수 vs 화살표 함수

• 화살표 함수는 중복된 매개변수 이름을 선언할 수 없다.
• 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.
  : 스코프 체인을 통해 상위 스코프를 참조함.

👀 화살표의 가장 큰 특징?

화살표 함수가 일반 함수와 구별되는 가장 큰 특징은 this다. 그리고
✨다른 함수의 인수로 전달되어 콜백 함수로 사용되는 경우가 많다.

일반 함수의 this : 전역 객체에 바인딩 됨
화살표 함수의 this : 상위 스코프를 참조

❗ 18번 글에서 작성했던 대로, this는 화살표 함수를 사용할 때 사용하도록 하자!

super

화살표 함수는 함수 자체의 super 바인딩을 갖지 않기 때문에 화살표 함수 내부에서 super를 참조하면 this와 마찬가지로 상위 스코프의 super를 참조한다. (???몰루)

super는 내부 슬롯을 갖는 ES6 메서드 내에서만 사용할 수 있는 키워드이다. this와 마찬가지로 클래스 필드에 할당한 화살표 함수 내부에서 super를 참조하면 constructor 내부의 super 바인딩을 참조한다.

class Base {
  constructor(name) {
    this.name = name;
  }
  
  sayHi() {
    return `Hi ${this.name}`;
  }
}

class Derived extends Base {
  // 화살표 함수의 super는 상위 스코프인 constructor의 super를 가리킨다.
  sayHi = () => `${super.sayHi()} how are you doing?`;
}

const derived = new Derived('Lee');
console.log(derived.sayHi());  // Hi Lee how are you doing?

Rest 파라미터

Rest 파라미터는 ...을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받거나 매개변수로 배열이나 객체 할당 받을 때, 구조를 해체한다.

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