arrow function

함수 선언문과 함수 표현식

아래는 함수 선언문 (function definition) 이다.

function add(x, y) {
  return x + y;
}

function add(x, y) {

return x + y;

}

함수 선언문을 함수 표현식 (function expression) 으로 바꾸면 다음과 같다.

let add = function(x, y) {
  return x + y;
}

let add = function(x, y) {

return x + y;

}

함수 선언문은 함수 표현식으로 바꿀수 있다. add 라는 변수를 선언하고 함수를 이 변수에 대입하면 된다. 그리고 우측은 더이상 이름을 가지는 것이 의미가 없기 때문에 우측은 이름이 없는 익명함수 (anonymous function) 이 오게 된다.

두가지의 차이점은 함수 표현식은 호이스팅이 안된다는 차이점이 있다. let add 부분만 호이스팅이 일어나고 우측 할당 부분은 실제 코드가 실행될 때 대입된다.

익명 함수와 arrow 함수

함수 표현식일 경우 우측은 익명함수가 오게 되고 이 익명함수를 애로우펑션으로 바꿀수있다. 바꾸는 규칙은 function을 생략하고 입력과 출력사이에 => 기호를 삽입한다. 몇가지 규칙을 설명하면 다음과 같다.

익명함수는 arrow 함수로 변경 가능
function을 없애고 입력과 출력 사이에 => 삽입
return 밖에 없을 경우는 함수의 { } 와 return 문을 모두 생략 가능하다.
하지만 만일, 리턴하는 타입이 json 객체일 경우는 { } 가 함수의 중괄호를 먼저 의미하게 되므로 () 로 감싸주어야 한다. ({}) 이런 형태가 된다.

위의 함수 표현식을 arrow 함수로 바꾸면 다음과 같다.

let add = (x, y) => x + y;

1	let add = (x, y) => x + y;

lexical this

arrow 함수에서는 this를 바인딩 하지 않는다. 생성자 함수에서 사용되는 this는 자기 자신을 바인딩하고, json 객체에서 사용될 경우 상위 부모를 그 외에 사용될 경우는 글로벌 this를 바인딩 하는게 es5 의 this 의 용도 세가지이다.

그러나 arrow 함수에서 this가 사용되면 this는 바인딩되지 않으므로 펑션이 없는것처럼 생각하면 된다.

아래의 this는 enclosing context가 function 이고 이벤트가 일어난 button의 this를 가르키므로 정상적으로 실행된다.

$('.btn').click(function () {
  $(this).text('new'); 
});

$('.btn').click(function () {

$(this).text('new');

});

그러나 아래의 경우는 다르다. setTimeout 같이 즉시 실행되는 함수가 아니라 비동기로 실행되는 경우는 이벤트 큐에 펑션이 들어간 후에 실행되므로 this의 enclosing context는 바로 밖의 function을 가르키게 되는데 여기서의 this는 global this가 되어서 정상적인 실행이 되지 않는다.

$('.btn').click(function () {
  setTimeout(function () {
    // This will cause an error since function() defines this as the global object.
    $(this).text('new'); 
  }, 1000); 
});

$('.btn').click(function () {

setTimeout(function () {

// This will cause an error since function() defines this as the global object.

$(this).text('new');

}, 1000);

});

이 부분을 arrow 함수로 수정하게 되면 arrow 에서는 this를 바인딩하지 않고 enclosing context는 바깥쪽 this를 가르키게 되어서 button 자식을 가르키게 된다.

$('#btn').click(function () {
  setTimeout(() => {
    $(this).text('new'); 
  }, 1000); 
});

$('#btn').click(function () {

setTimeout(() => {

$(this).text('new');

}, 1000);

});

커링 (currying) 펑션

커링 펑션은 파라메터를 한꺼번에 입력하는게 아니라 하나씩 차례대로 입력하는것을 말한다.

let add = (a, b, c) => a + b + c;
// currying function
let currying_add = a => b => c => a + b + c;

let add = (a, b, c) => a + b + c;

// currying function

let currying_add = a => b => c => a + b + c;

파라메터를 차례대로 대입하기 위해서는 첫번째 파라메터를 입력하고 난뒤에 펑션이 리턴이 되어야 한다. 그러면 다시 그 펑션에 두번째 파라메터를 대입하고 다시 펑션이 대입되는 방식이다.
그러면 언제 커리 펑션이 사용될까? 커링 펑션은 미들웨어의 기능을 수행할수 있다. 펑션이 리턴되므로 그 사이에 여러가지 로직을 중간에 삽입할수 있다. 로깅이라던가, 인증 등 최종 로직이 수행되기 전 여러가지 로직을 일괄적으로 수행하기 위해서 커링 펑션을 사용할 수 있다.

자세한것은 아래 코드펜을 참고하자.

See the Pen javascript arrow function quiz by LeeDongKee (@eastflag) on CodePen.0

Open in CodePen

+ reference

mdn arrow function

javascript currying function

When you log into CodePen and fork, the project will be copied to your account. If you solve the problem and leave a codepen link in the comments below, I’ll give it a feedback

함수 선언문과 함수 표현식

익명 함수와 arrow 함수

lexical this

커링 (currying) 펑션

+ 설명 동영상