1. 사건의 발단
- 많은 사람들이 화살표 함수의 사용을 헷갈려하고 있다는 것을 알았다.
- 어떻게 하는지 확실히 알면 보통 함수 작성봅 보다 매우 편하고 유용하다는 것을 알려주기 위해 글을 작성하게 되었다.
2. 화살표함수와 일반적 함수의 모양의 차이
const arr = [1, 2, 3, 4, 5]
const sum5 = arr.map(function(x) {
return x + 5;
})
console.log(sum5) // [6, 7, 8, 9, 10]
- 이것은 일반적 형태의 함수로 고차 함수 map을 사용한 것이다. 콜백 함수의 정보가 정확히 쓰여 있는 것을 알 수 있다.
const arr = [1, 2, 3, 4, 5]
const sum5 = arr.map(x => x + 5)
console.log(sum5) // [6, 7, 8, 9, 10]
- 이것은 화살표 함수를 사용하여 고차함수 map을 사용한 것이다.
- 둘의 가장 큰 차이로는 function이 없어지고 중괄호 안에 return 도 생략이 가능하다는 것이다. 그래서 더 짧게 사용할 수 있다.
- 간단하게 그 두가지 다른 점과 위의 두 가지 방법의 map사용을 보면서 인자인 x의 위치, 화살표 함수가 반환하는 값을 생각해보면 다른 것도 쉽게 적용할 수 있다.
const arr = [1, 2, 3, 4, 5]
const sum5 = arr.map(x => {return x + 5}) // 중괄호가 있다.
console.log(sum5) // [6, 7, 8, 9, 10]
- 이러한 형태도 가능하다. 나는 주로 map함수 안에 다른 함수를 넣거나 조건문 if를 넣는 등의 데이터 수정을 하려고 할 때 사용한다.
3. 또 다른 차이점
- 가장 큰 장점이자 차이는 'this'의 사용이다.
- this는 화살표 함수와 일반 함수에서 다르다.
- 화살표 함수의 경우 this는 바로 위 상위 스코프의 this와 같다.
- 일반 함수의 경우 this는 동적으로 바인딩 되어 내부 함수, 콜백 함수, 전역 객체, 객체의 메서드, 생성자 함수를 뜻한다.
- 물론 콜백함수의 특성상 많이 겹쳐질 경우 코드를 작성한 사람도 헷갈려지는 경우가 있기 때문에 this를 남발하는 일은 지양하는 것이 좋다. 하지만 무엇을 뜻하는지 알고 있으면 유리하다.
위의 글은 그저, 빠르게 모양만을 가지고 화살표 함수를 바꿔 사용하는데 이해하기 위한 글이다. 화살표 함수의 사용을 자유롭게 한다고 해서 고차함수를 이해하게 되는 것은 아니므로, 고차함수의 사용을 해보면서 어떻게 사용하는것이 옳은가, 혹은 어떤 원리인가를 이해하면 자연스럽게 화살표 함수를 자주 사용하는 자신의 모습을 볼 수 있을 것이라고 생각한다.