[모던 자바스크립트 Deep Dive] 26장 : ES6 함수의 추가 기능 - JS

ES6에서는 함수를 사용 목적에 따라 일반 함수, 메서드, 화살표 함수 세 가지 종류로 구분했다.

 

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

---

메서드

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

const obj = {
  x: 1,
  // foo는 메서드다.
  foo() { 
    return this.x;
  },
  // bar에 바인딩된 함수는 메서드가 아닌 일반 함수다.
  bar: function() { return this.x;}
};

console.log(obj.foo()); // 1
console.log(obj.bar()); // 1

📢ES6 메서드는 생성자 함수로서 호출할 수 없다.

인스턴스를 생성할 수 없는 non-constructor이기 때문이다.

 

📢ES6 메서드는 super 키워드를 사용할 수 있다.

자신을 바인딩한 객체를 가리키는 내부 슬롯을 갖기 때문이다.

 

 

---

 

화살표 함수

화살표 함수는 function 키워드 대신 화살표 =>를 사용해 함수를 간략히 정의한다.

const arrow = (x,y) => { ... };

 

❗ 화살표 함수와 일반 함수의 차이

1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이다.
2. 중복된 매개변수 이름을 선언할 수 없다.
3. 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

 

화살표 함수가 일반 함수와 구별되는 가장 큰 특징은 바로 this다.

💨 화살표 함수의 this는 일반 함수의 this와 다르게 동작한다.

 

일반 함수로서 호출되는 모든 함수 내부의 this는 전역 객체를 가리킨다.

화살표는 함수 자체의 this 바인딩을 갖지 않으며, 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 참조한다. 그렇기에 화살표 함수는 콜백 함수의 this와 외부 함수의 this 간 불일치 문제를 해결할 수 있다.

 

정리하자면 콜백 함수 내부의 this문제를 화살표 함수를 사용하면 편하게 해결할 수 있다.

 

---

 

Rest 파라미터

Rest 파라미터는 매개변수 이름 앞에 세 개의 점(...)을 붙여서 정의한 매개변수를 말하며, 함수에 전달된 인수들의 목록을 배열로 전달받는다.

function foo(...rest) {
  // 매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터다.
  console.log(rest); // [ 1, 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

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

foo(1, 2, 3, 4, 5);

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

bar(1, 2, 3, 4, 5);

위 예제 코드를 참고하면 이해가 될 것 같다!

 

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!