[JavaScript] Arrow Function 와 Regular Function 의 차이

일반적으로 함수는 자바스크립트 문맥 내에서 "this"을 결정지을 때 해당 내용이 큰 영향을 끼칩니다. 따라서 기본적으로 자바스크립트 개발을 한다면 위 내용은 필수적으로 알아야하는 항목 중 하나로 여겨집니다.

기본적으로 자바스크립트에서 함수를 정의하는 방식은 두가지가 있습니다.

1. function keyword 사용하기
2. arrow function ( () => {} ) 을 통해 정의하기

자바스크립트에서는 함수 또한 객체로 정의 되기에 2의 방식을 사용할 때 기본적으로 const 변수를 선언하여 초기화를 시켜주는 방식으로 이를 정의합니다.

function myFunction(param) {
  return param + 1;
}

====================================

const myFunction = (param) => {
  return param + 1;
}

// 즉시 리턴을 하고 싶다면 중괄호 없이 expression을 사용하면 해당 값을 리턴하는 함수가 생성됩니다.

const myFunction = (param) => param + 1;

argument 객체의 유무

arrow function 에서는 argument 객체가 존재하지 않습니다.

일반 function 내에서는 argument 객체가 keyword로 존재하며, 파라미터 정의를 어떻게 했건 간에 호출 시 사용되는 인자의 개수들은 모두 function 몸체 내에서 argument 객체를 통해 참조가 가능합니다. 이는 유사배열 객체이며 length 프로퍼티를 가집니다.

함수 프로토타입의 부재(생성자로써의 사용 가능 유무)

arrow function 에서는 Function.prototype 객체가 프로토타입으로 지정 되어 있지 않습니다.

하지만 arrow function을 .apply, .call, .bind 등의 메소드를 통해 호출할 수 있습니다.

함수의 프로토타입은 new 키워드를 통해 생성자로 생성 될 때 사용되는 생성자를 가르키기 때문입니다.

(중요) this 바인딩의 차이

아마 이 글의 핵심 부분 이지 싶습니다.

함수가 객체 프로퍼티로 정의된 경우, 객체 프로퍼티로 호출된 this는 arrow function과 일반 function 에 차이가 있습니다.

객체 내의 프로퍼티로 적용된 this의 영향을 일반 function은 받지만, arrow function은 호출되는 시점에서의 문맥에 영향을 받습니다. 즉 자체 this를 arrow function 은 갖고 있지 않습니다

• arrow function 이 호출 될 때는 호출 방식에 관련 없이 호출되는 문맥을 this로 묶어 호출 됩니다.
• regular function 이 일반 객체 내에 메소드로써 호출될 경우 해당 객체를 this로 묶어 호출 됩니다.

중복인자 비허용

arrow function 은 중복으로 여러개의 같은 변수를 인자로 받는 것을 비허용합니다.