arrow function

함수 선언문

기본적인 함수 선언문

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

---

함수표현식

함수 선언문을 변수를 선언해서 함수 표현식을 만들 수 있다.

왼쪽에는 변수가 오고 오른쪽에는 이름이 없는 익명함수 (anonoymous function)이 오게 된다.

선언문과 표현식의 차이는 표현식은 호이스팅이 안된다. 표현식에서 변수부분만 일어나고 실제 할당은 코드가 실행될 때 대입된다.

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

---

arrow function

함수 표현식일 경우 우측은 익명함수가 오게 되는데 이 익명함수를 arrow function으로 바꿀 수 있다.

바꾸는 방법은 function이라는 키워드를 지우고 파라미터와 함수 내부 내용 사이에 =>를 입력한다.

var add = (x, y) => {return (x + y);}

만약 함수 내에 return문만 있는 경우 함수의 중괄호와 return 키워드를 생략할 수 있다.

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

매개변수가 하나일 경우 파라미터 부분에 있는 소괄호를 생략할 수 있다.

var pow = x => x * x;

만약 함수 내에 return문 밖에 없고 json 객체를 반환할 때는 {}가 함수의 중괄호를 먼저 의미하므로 ()로 감싸줘야 한다.

({})와 같은 형태가 된다.

var foo = () => ({name: duck});

---

Lexical this

• arrow fucntion에서는 this를 바인딩 하지 않는다. 
• arrow function 내부에서 this는 전역 객체가 아닌 부모 객체를 가리킨다!
• 생성자 함수에서 사용되는 this는 자기 자신을 바인딩하고, json 객체에서 사용될 경우에 상위 부모를, 그 외에 사용될 경우는 글로벌 this를 바인딩하는 것이 es5의 this 용도 세가지다.
• 또한 이벤트 리스너 호출시 this는 이벤트를 발생시킨 객체가 된다!

그러나, arrow function에서 this가 사용되면 this는 바인딩되지 않으므로 function이 없는 것처럼 생각하자!

 

아래의 this는 이벤트가 일어난 this를 가리키므로 정상적으로 실행된다.

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

아래의 경우는 좀 특별하다.

setTimeout 같이 비동기로 실행되는 경우는 이벤트 큐에 펑션이 들어간 후에 실행되므로 this의 enclosing context는 바로 밖의 function을 가르키게 되는데 여기서의 this는 global this가 되어서 정상적인 실행이 되지 않는다!

setTimeout의 this는 기본적으로 전역인 window 객체를 가리킨다!

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

위 코드를 정상적으로 this가 button을 바인딩해서 바꾸게 하려면 아래와 같다.

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

---

currying function

currying function은 파라미터를 한꺼번에 입력하는 것이 아니라 하나씩 차례대로 입력하는 것을 말한다.

파라메터를 차례대로 대입하기 위해서는 첫번째 파라메터를 입력하고 난 뒤에 함수가 리턴이 되어야 한다. 그러면 다시 그 함수에 두번째 파라메터를 대입하고 다시 함수가 대입되는 방식이다.

var arrow = function(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    }
  }
}

var arrow = a => b => c => a + b + c;