[JavaScript/ES6] Arrow(화살표) 함수 - 구문편

안녕하세요, Jerry입니다.

 

이번 포스팅은 arrow function(화살표 함수)에 대해서 작성하려고 합니다. arrow function(화살표 함수)의 경우 언급할 게 많아서 2편 혹은 3편으로 나눠서 포스팅할 것 같습니다.

 

ECMAScript 6(저자, 김영보) 책의 내용과 MDN의 내용을 참고하였습니다.

 

화살표 함수는 기존의 함수 형태인 function(parameter) { code } 형태를 축약한 것으로 기존 function 표현보다 짧습니다.

아래 작성된 구문을 한 번 볼까요?

 

기본 구문

매개변수가 하나뿐인 경우 괄호는 선택사항
(param) => { code };
param => { code };

매개변수가 없는 함수는 괄호가 필요
( ) => { code };

여러 파라미터(param)를 작성할 수 있음
(param1, param2, ..., paramN) => { code };
(param1, param2, ..., paramN) => expression;
// 다음과 동일 => { return expression };

 

고급 구문

객체 리터럴 표현( { } )을 반환(return) 하기 위해서는 함수의 본문을 괄호( ( ) ) 속에 넣음
param => ( {key: value} );

Rest 파라미터, Default 파라미터를 지원
(param1, param2, ...rest) => { code };
(param1 = defaultValue1, param2, ..., paramN = defaultValueN) => { code };

파라미터 목록 내에 비구조화(Destructuring, 구조 분해 할당)도 지원
([one, two]) = [1, 2]) => one + two;
({key: sum} = {key: 10 + 20}) => { code };

let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); // 6

 

MDN에서는 기본 구문과 고급 구문으로 나누어서 설명을 합니다. 저도 나누어서 포스팅하려고 하는데 그 이유는 제가 아직 Rest 파라미터와 Default 파라미터를 포스팅하지 않았기 때문에 이번 포스팅에선 기본 구문에 대해서만 포스팅하겠습니다.

 

설명 (함수 작성방법)

위에 작성한 구문을 참고하며 arrow function(이하, 화살표 함수)에 대해 알아보겠습니다 :)

 

우선 처음에도 언급했듯이 화살표 함수는

function(param)  { code }

위와 같은 기존의 function 형태를 축약해서

(param) => { code }

위와 같이 화살표 함수 형태로 작성합니다. function 키워드를 사용하지 않아요. 대신 화살표( => )를 사용합니다.

 

예시 코드를 하나 보고 갈까요?

ES5

// ES5-1
var es5 = function(one, two) {
  return one + two;
};

var sum = es5(1, 2);
console.log(sum);
// 결과는 3 입니다.

// ES5-2
function _es5(one, two) {
  return one + two;
}

var _sum = _es5(1, 2);
console.log(_sum);
// 결과는 3 입니다.

 

ES6

// ES6-1
let es6 = (one, two) => {
  return one + two;
};

let result = es6(1, 2);
console.log(result);
// 결과는 3 입니다.

// ES6-2
let _es6 = (one, two) => one + two;

let _result = _es6(1, 2);
console.log(_result);
// 결과는 3 입니다.

 

ES5는 기존 function 표현이고, ES6는 화살표 함수 표현입니다. 위에 작성한 기본 구문을 보시면 중괄호( {} )를 생략했을 때 return 키워드를 작성하지 않아도 됩니다. 그 구문을 예시 코드 주석 ES6-2에 작성해봤습니다.

 

엔진이 화살표 함수를 만나게 되면 빌트인 Function 오브젝트의 prototype에 연결된 메서드로 오브젝트를 생성하여 es6 변수(혹은 _es6 변수)에 할당합니다. 화살표 함수는 무명/익명(anonymous) 함수입니다. 함수를 호출하기 위해선 위 예시 코드와 같이 변수에 할당해야 합니다.

 

화살표 함수의 경우 자신의 this, arguments, super 또는 new.target을 바인딩하지 않습니다. 관련 콘텐츠의 양이 많을 것으로 예상돼서 포스팅을 나누겠습니다.

 

다음 포스팅까지 좋은 나날들 보내세요 :)

감사합니다, JERRY 였습니다!