ES6 함수의 추가기능
ES6 이전의 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다.
일반적인 함수, new 연산자와 함꼐 호출하여 생성자 함수, 객체에 바인딩 되어 메서드 등으로 다양한 방식이 가능하기 때문에 편리하긴 하지만 실수를 유발시킬 수있고. 성능면으로도 좋지 않다.
var foo = function (){
return 1;
}
foo();
new foo();
var obj = {foo: foo};
obj.foo()이렇게 함수는 일반 함수로서 호출할주 있는 것은 물론 생성자 함수로서 호출할 수 있다.
즉 callable이면서 constructor인것이다.
이러한 문제를 해결하기 위해 ES6에서는 함수를 사용 목적에 따라 세가지 종류로 구분했다.
- 일반함수
- contructor, prototype, arguments - 메서드
- super, arguments - 화살표 함수
- arguments
일반 함수는 이전과 차이가 없지만 메서드와 화살표 함수는 명확한 차이가 있다.
메서드
메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다.
const obj = {
x: 1,
// 메서드
foo() {return this.x},
// 일반 함수
bar: function() {return this.x}
}ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor다.
따라서 프로토타입 프로퍼티가 없고 프로토타입을 생성하지 않는다.
ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부슬롯 [[HomeObject]]를 갖는다.
super참조는 내부 슬롯 [[HomeObject]]를 사용하여 슈퍼 클래스의 메서드를 참조하므로 super 사용 가능하다.
📌 메서드의 [[HomeObject]]는 자신의 객체를 가리키기 때문에 super는 자신의 객체의 프로토타입을 가리키게 되는것이다.
화살표 함수
화살표 함수는 function 키워드 대신 화살표를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의할 수 있다.
이는 콜백 함수 내부에서 this가 전역객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다.
정의는 ()=>{} 이런식으로 하면 되고 다양한 방식이 있다.
화살표 함수와 일반 함수의 차이
- 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이다
- 중복된 매개변수 이름을 선언할 수 없다.
- 화살표 함수는 함수 자체의 this, arguments, super, new, target 바인딩을 갖지 않는다.
this
this바인딩은 함수의 호출방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다.
화살표 함수는 상위 스코프의 this를 그대로 참조한다. 이를 lexical this라 한다.
📌 화살표 함수가 중첩되어있다면 상위 화살표 함수에도 this바인딩이 없으므로 스코프 체인 상에서 가장 가까운 화살표 함수가 아닌 함수의 this를 참조한다.
super
화살표 함수는 함수 자체의 super 바인딩을 갖지 않기 때문에 상위 스코프의 super를 참조한다.
arguments
이또한 상위 스코프의 arguments를 참조한다.
Rest 파라미터
rest 파라미터는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미하고 인수들의 목록을 배열로 전달받는다.
function foo(...rest){
console.log(rest); // [1, 2, 3]
}
foo(1, 2, 3)매개변수 기본값
자바스크립트 엔진이 매개변수의 개수와 인수의 개수를 체크하지 않기 때문에 매개변수의 개수만큼 인수를 전달하지 않아도 오류가 발생하지 않고 undefined가 된다.
따라서 매개변수의 기본값을 정해줄 수가 있다.
function sum(x = 0, y = 0){
return x + y;
}📌 rest 파라미터는 정할 수 없다.
📌 함수객체의 length 프로퍼티와 arguments 객체에 아무런 영향을 주지 않는다.
