[JS] ES6 - Arrow Function

Arrow Function

Arrow Function 은 ES6 의 새로운 함수 정의 방식입니다.

var a = function() {
    // 기존 함수 선언 방식 
}

var a = () => {
    // Arrow Function 방식
}
// or
var a = () => console.log('한줄 retrun');
var a = () => ( { "객체": "return" } );

var a = arg => {
    // 매개변수가 하나일 경우 소괄호를 생략해도 됩니다.
}
var arr = [1,2,3];
var a = arr.filter(item => {
  // callback 함수 표현
});

화살표 함수의 this 는 상위 스코프의 this 를 가리킵니다.
이를 lexical this 라고 합니다.
이러한 특징으로 메소드 정의를 지양하는게 좋다고 합니다.

const person = {
   age: 10,
   say: ()=> {
     console.log("Hello, I'm" + this.age); 
   }
}
person.say(); // Hello, I'm undefined
// 이때 this 는 window 를 가르킵니다. 그러므로 오류를 발생시킵니다.

다른 해결 방법으로 ES6의 함수 축약 표현이 있습니다.

const person = {
    age: 10,
    say() { // say: function() {} 와 같습니다.
	console.log("Hello, I'm" + this.age); 
    }
}
person.say(); // Hello, I'm 10