Arrow Function(화살표 함수)

Arrow Function(화살표 함수)는 ES6에서 새로 도입된 함수로 보통 함수 표현식을 축약한 형태로 표시된다.

함수 표현식

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

이런 식의 함수를 화살표 함수로 표현하면

화살표 함수

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

Boom! 이렇게 표현이 가능하다.
또한, 여기서 우리는 return을 지우고 함수를 표현할 수 있다.

화살표 함수 return 생략

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

Boom! 위의 화살표 함수를 작성했을 때 보다 더욱 간결해진 코드를 볼 수 있다.
여기서 주의해야 할 점은

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

이렇게 소괄호를 사용하는 것은 가능하나,

const add = (x, y) => {x + y}; //error

이렇게 대괄호를 썼을 때 return을 쓰지 않게 되면 에러가 발생한다.
대괄호를 쓴다면 꼭!! return을 써주길 바란다!!!

화살표 함수의 특징

화살표 함수에서 call, apply, bind를 사용할 수 없다.

그리고 화살표 함수는 자신의 this가 없다.

화살표 함수는 일반 변수 조회 규칙을 따른다. 때문에 현재 범위에서 존재하지 않는 this를 찾을 때,
화살표 함수는 바로 바깐 범위에서 this를 찾는 것으로 검색을 끝내게 된다.

function person() {
this.age = 0
}
setInterval(() => {
this.age++ // 여기에서의 this는person 객체를 참조하게 된다.
}, 1000); // 여기서 시간의 단위는 ms(millisecond)이므로 1000ms는 1초가 된다.