화살표함수 - arrow function

화살표함수는 ES6 스펙이다

람다의 자바스크립트버전이다.

const v = a => a + 1;
v(1); //2

function v(a) {
  return a + 1;
}

위 두 코드는 '거의' 동일한 코드이다.

차이점이라면 생성자로 쓸수없다는것,

this, arguments, super, new.target을 바인딩하지않는것. 그래서 arrow function내의 this는 상위스코프의 this를 가리킨다.

바인딩하는게 많이 줄어들었으므로 당연히 좀 더 가벼울 것 같다.

그리고 화살표함수는 항상 익명함수이다.

첫 코드에서는 단순히 v라는 변수에 함수를 대입한것뿐이다.

마지막으로 객체의 메소드로 쓰는건 좋지않다.

const obj = {
  a: 1,
  method1: () => this.a,
};
console.log(obj.method1()); //undefined

예제를 보면 왜 객체의 메소드로 arrow function이 좋지않은지 설명가능하다.

콘솔에는 1이 찍혀야 정상이라고 생각할텐데, arrow function내의 this는 전역객체를 가리키고있으므로, undefined가 나오게된다.

이 경우에는

const obj = {
  a: 1,
  method1() {
    return this.a;
  },
  method2: function() {
    return this.a;
  },
};
console.log(obj.method1()); //1
console.log(obj.method2()); //1

이렇게 작성하는게 올바르다.

method1은 method2의 축약형이다. ES6에서 사용할수있는 문법이다.

물론 this를 사용하지않으면 문제될건 없다.

객체의 프로토타입 메소드에 arrow function을 사용하는것 또한 동일한 문제가 나타난다.

---

위의 첫번째코드를 보면, v(1)의 리턴값이 2이다.

블럭으로 감싸지않으면, expression을 리턴한다.

그 말은 블럭으로 감싸고 리턴을 하지 않으면, undefined를 리턴한다는 뜻이다.

const v = a => { a + 1 };
v(1); //undefined

---

그리고 위의 코드에서는 매개변수를 괄호로 감싸지않았는데, 한개인경우에만 괄호를 생략할수있고

매개변수가없거나 여러개면 괄호를 생략할 수 없다.

또한 매개변수에 rest parameter나 destructuring이 가능하다.

const v = (a, ...rest) => rest;
v(1, 2, 3); //[2, 3]

const v = ([a, b]) => a + b;
v([1, 2]); //3