화살표 함수

앞서 설명한 const 와 let은 var을 완벽하게 대체할 수 있지만, 화살표 함수는 function을 완벽하게 대체할 수는 없다.

 

function을 사용한 기존 문법

function add1(x, y) {

     return x+y;

}

 

화살표 함수 사용

const add2 = (x, y) => {

     return x+y;

}; //함수명 대신 변수명을 쓰고, = (parameters) => 를 사용.

 

중괄호 뒤에 바로 return문이 나온다면, 이 둘을 모두 생략해도 된다.

const add3 = (x, y) => x+y;

 

위 방법을 사용하면 간결하지만 헷갈릴 수 있기 때문에 대부분 리턴 값을 소괄호로 묶어준다.

const add4 = (x, y) => (x+y);

 

객체를 리턴하는 경우, 소괄호가 필수이다.

const obj = (x, y) => ({x, y})

 

예제)

function not1(x) {
	return !x;
}

//매개변수가 하나일 경우 매개변수를 감싸는 괄호를 생략해도 된다.
const not2 = x => !x;

화살표 함수는 무조건 부모의 this를 물려받는다.

function() {}에서는 함수 안에 함수를 더 쓰는 경우, 부모 함수와 자식 함수의 this가 서로 다른 것이어서 둘을 같게 만들려서 변수를 따로 설정해줘야 했던 방식과 차이가 있음을 이해하도록 하자. this를 쓸거면 function() {}을 쓰고, this를 쓰지 않을거면 화살표함수를 사용하는 것을 권장한다.