[js] arrow function, 화살표 함수

arrow function?

ECMA6 부터 추가된 함수의 기능 중 하나다.
화살표 함수는 함수 리터럴의 익명 함수를 단축한 표현 방법.
그렇지만 익명 함수와는 차이가 있다.

화살표 함수의 표현법

1) 기존 익명 함수

var square = function(x) { return x*x; };

2) 화살표 함수

var square = (x) => { return x*x; };

• 인수가 여러 개라면 쉼표로 구분. (x, y, z)

• 인수가 하나라면 생략 가능 x => { return x*x; };

• 단! 인수가 없으면 괄호 생략 불가.

• 문장에 return뿐이면 중괄호와 return 키워드 생략 가능 var square = x => x*x;

• 단! 함수 반환값이 객체라면 그룹 연산자인 ( ) 로 묶는다. (a, b) => ( { x: a, y: b } );

• 즉시 실행 함수 가능 (x => x*x);

함수 리터럴과 차이점

단지 함수 리터럴의 익명 함수를 줄인 것과는 차이가 있는 화살표 함수. 뭐가 다를까?

1) this의 값이 함수를 정의할 때 결정

일단 this 가 가리키는 것부터 다르다.
함수 리터럴로 정의한 함수의 this값은 함수를 호출할 때 결정 됨.

var jerry = {
	name : "Jerry",
    hi : function(){
    		console.log("HI " + this.name);
        }        
}

jerry.hi();

// HI Jerry 출력됨

여기서 this.name 의 this 는 jerry를 가리킨다.

그러나

var obj = {
    say: function(){
        console.log(this);
        var fff = function() { console.log(this);};
        fff();
        var g = () => console.log(this);
        g();

    }
};

obj.say();

이렇게 결과가 나온다.
중첩함수인 fff는 전역 객체를 가리키지만, g 함수는 자신을 정의한 obj 객체를 가리킨다.

2) arguments 변수가 정의되어 있지 않으므로 사용 불가

3) 생성자로 사용 안됨

기존 함수 리터럴
var Person = function(name, age){this.name = name; this.age = age;};
var tom = new Person("Tt", 11);

console.log(tom.name);
// Tt 나옴

화살표 함수
var Person = (name, age) => {this.name = name; this.age = age;};
var tom = new Person("Tt", 11);

console.log(tom.name);

이렇게 에러가 뜬다.

4) yield 키워드 사용 불가

정리

화살표 함수는 항상 익명으로 사용되기 때문에 함수 리터럴에서 익명함수를 쓸 때 대체 할 수도 있다. 다만, 위 4가지 차이점을 숙지해야 한다.

특히, 코드를 간결하게 표현할 때 자주 등장하는 것 같다.

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map((element) => {
  return element.length;
}); 

// [8, 6, 7, 9]

참조 : 화살표함수, 모던 자바스크립트 입문