1. 함수의 구분
ES6 이전의 함수 호출방법
- new 연산자로 호출
- 생성자 함수로서 호출
- 메서드로서 호출
⇒ 사용 목적에 따라 명확히 구분되지 않으므로 호출방식에 특별한 제약이 없고,
생성자 함수로 호출되지 않아도 프로토타입 객체를 생성할 수 있음 ES6 함수의 구분
: 사용 목적에 따라 세가지로 명확히 구분
- 일반함수 : 함수 선언문이나 함수 표현식으로 정의한 함수 ( ES6 이전의 함수와 동일 )
- 메서드 : 객체에 바인딩 된 함수 ⇒ 메서드 축약표현으로 정의된 함수
- 화살표함수 : function 키워드 대신 화살표를 사용하여 간략하게 함수를 정의할 수 있는 방법
2. 메서드
: 객체에 바인딩 된 함수 ⇒ 메서드 축약표현으로 정의된 함수
const obj = {
x:1,
foo(){return this.x;}, **// => 메서드**
bar:function(){return this.x;} // **=> 일반함수**
}
new obj.foo(); // TypeError => non-constructor
new obj.bar();
obj.foo.hasOwnProperty('prototype'); // false
obj.bar.hasOwnProperty('prototype'); // truesuper
: ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부슬롯 [[HomeObject]]를 가짐.
super 참조는 [[HomeObject]]를 사용하여 수퍼클래스의 메서드를 참조하기 때문에 super키워드 사용가능.
( ES6 메서드가 아닌 함수는 내부슬롯 [[HomeObject]]이 없어 super 키워드를 사용할 수 없음 )
👉🏻 본연의 기능 **super를 추가**하고 의미적으로 맞지 않는 **constructor기능은 제거**했다. 따라서 메서드를 정의할 때, 프로퍼티 값으로 익명 함수 표현식을 할당하는 방식은 사용하지 않는 것이 좋다.3. 화살표함수
: function 키워드 대신 화살표를 사용하여 간략하게 함수를 정의할 수 있는 방법으로,
표현뿐만 아니라 내부 동작도 기존의 함수보다 간략하다. ( 일반 함수의 기능을 간략화 )
특히, 콜백함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다.
1. 화살표 함수 정의 문법
const multiply = (x, y) => x * y;
multiply(2,3);
const arrow = x => {return const x = 1;};
const func = () => {...};
const create = (id, content) => ({id,content}); // 쉼표 연산자문으로 해석.
const sum = (a,b) => {
const result = a + b;
return result; // 반환값이 있다면 명시적으로 반환.
}
[1,2,3].map(v=>v*2);
// 화살표 함수도 일급객체이므로 고차함수에 인수로 전달할 수 있음.(콜백함수 정의할 때 유용 )2. 일반함수와의 차이점
-
화살표함수는 인스턴스를 생성할 수 없는 non-constructor다. ⇒ prototype 생성 X
-
중복된 매개변수 이름을 선언할 수 없다.
-
함수자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.
⇒ 화살표 함수 내부에서 this, arguments, super, new.target을 참조하면 스코프 체인을 통해 상위 스코프의 this, arguments, super, new.target을 참조.
⇒ 화살표 함수가 중첩되어 있다면 가장 가까운 상위 함수 중에서 함수가 아닌 함수의 this, arguments, super, new.target을 참조
- this
- 화살표함수의 this는 일반함수의 this와 다르게 동작
⇒ 콜백함수 내부의 this와 외부함수의 this가 다르기 때문에 발생하는 문제를 해결하기 위해 의도적으로 설계됨.
- 화살표 함수는 함수 자체의 this 바인딩을 갖지 않기 때문에 화살표 함수 내부에서 this를 참조하면 상위스코프의 this를 그대로 참조한다. ( lexical this = 렉시컬 스코프와 같이 화살표함수의 this가 함수가 정의된 위치에 의해 결정 )
- 화살표 함수가 중첩되어 있거나 프로퍼티에 할당한 함수라면 가장 가까운 상위 함수 중에서 함수가 아닌 함수의 this를 참조한다.
- 전역함수라면 화살표 함수의 this는 전역 객체를 가리킨다.
.call이나.apply,.bind메서드를 사용해도 화살표 함수내부의 this를 교체할 수 없고 언제나 상위스코프의 this 바인딩을 참조한다.
- 화살표함수로 메서드를 정의 X ( ES6 메서드 사용. 화살표 함수 내부의 this는 메서드를 호출한 객체를 가리키지 않기 때문. )
- 프로토 타입 객체의 프로퍼티에 화살표 함수를 할당 X ( 일반 함수 할당 )
객체가 아닌 ES6 메서드를 동적 추가하고 싶다면 객체 리터럴을 바인딩하고 , 프로토타입의 constructor 프로퍼티와 생성자 함수간의 연결을 재설정한다. - 클래스 필드 정의 제안을 사용하여 클래스 필드에 화살표 함수를 할당할 수 있다.
이 때, 상위 스코프는 클래스 외부이지만 this는 class를 생성할 인스턴스를 참조. constructor내부의 this 바인딩은 클래스가 생성한 인스턴스를 가리키므로, 화살표 함수 내부의 this 또한 클래스가 생성한 인스턴스를 가리키기 때문에 인스턴스 메서드가 된다.
⇒ ES6메서드 사용하는 것이 좋다.
- 화살표함수의 this는 일반함수의 this와 다르게 동작
- arguments
- 매개변수의 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용, 화살표함수에서 사용 X
- arguments 객체를 참조할 수는 있지만 자신에게 전달 된 인수 목록 확인 할 수 없고, 상위 함수에 전달된 인수목록을 참조함
- 가변 인자 함수를 구현해야 할 때에는 반드시 Rest 파라미터를 사용해야한다.
- this
| constructor | prototype | super | arguments 객체 | |
|---|---|---|---|---|
| 일반함수 | ✅ | ✅ | ❌ | ✅ |
| 메서드 | ❌ ( non-constructor) | ❌ | ✅ | ✅ |
| 화살표함수 | ❌ ( non-constructor) | ❌ | ❌ | ❌ |
4. Rest 파라미터
function foo(param, ...rest){
console.log(param); // 1
console.log(rest); // [2,3,4,5]
}
foo(1,2,3,4,5)-
매개변수 이름 앞에 …을 붙여서 정의한 매개변수. 함수에 전달된 인수들의 목록을 배열로 전달받음.
-
일반 매개변수와 함께 사용할 수 있으며, 이 때 전달된 인수들은 매개변수와 Rest 파라미터에 순차적으로 할당된다.
-
반드시 마지막 파라미터여야 하며, 단 하나만 선언할 수 있다.
-
.length프로퍼티에 영향을 주지않는다. -
arguments 객체는 배열이 아닌 유사 배열 객체이므로 배열 메서드를 사용하려면
.call이나.apply메서드로 arguments 객체를 배열로 변환해야하는 번거로움이 있었는데 rest 파라미터를 사용하여 인수 목록을 배열로 직접 전달 받을 수 있으면서 번거로움을 피할 수 있다. -
함수와 ES6 메서드는 arguments 객체와 Rest 파라미터 모두 사용가능하지만, 화살표 함수는 arguments 객체를 갖지 않기 때문에 반드시 Rest 파라미터를 사용해야한다.
5. 매개변수 기본값
- 자바스크립트 엔진은 매개변수의 개수와 인수의 개수를 체크하지 않는다. 그렇기 때문에 매개변수의 개수만큼 인수를 전달하지 않아도 에러가 발생한다. 이 때, 전달되지 않는 매개변수의 값은
undefined이다. 그러므로 매개변수에 기본값을 할당할 필요가 있는데, ES6에서 도입된 매개변수 기본 값을 사용하면 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다.
function sum(x,y){
x = x || 0;
y = y || 0;
return x + y;
}function sum(x = 0,y = 0){
return x + y;
}- 매개변수 기본 값은 매개변수에 인수를 전달하지 않은 경우와
undefined를 전달한 경우에만 유효하며, Rest 파라미터에는 기본값을 지정할 수 없다. - 이는 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의
.length프로퍼티와 arguments 객체에 영향을 주지않는다.
