화살표 함수는 ES6에서 도입된 문법으로 함수를 좀 더 간결하고 직관적으로 작성할 수 있어서 자주 사용하고 있다. 자주 사용하고 있었지만, 화살표 함수는 항상 하나만 사용했었는데 이번에 화살표 함수를 여러개 중첩으로 사용하는 코드를 처음 보게 되어서 한 번 정리해두려고 한다!
함수 표현 (function expression)
전통적인 함수 (function)
const sum = function (a, b) {
return a + b
}화살표 함수 (arrow function)
const add = (a, b) => {
return a + b
}화살표 함수의 특징 (화살표 함수와 전통적인 함수의 차이점)
- this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없다.
- new.target키워드가 없다.
- 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없다.
- 생성자(Constructor)로 사용할 수 없다.
여러개의 화살표 함수
2개의 화살표 함수
const add = a => b => {
return a + b
}- 처음 봤을 때는 뭐지 싶게 생겼는데, 아래처럼 전통적인 함수 방식으로 풀어서 쓰면 이해하기 쉽다!
const add = function (a) { return function (b) { return a + b } }
화살표 함수 사용법
const add = a => b => {
return a + b
}
add(2)(3) // 5
const add2 = add(2)
add2(3) // 5🤔 왜 굳이 화살표 함수 여러개를 쓸까…?
- 위 예시를 보고 처음 든 생각은 왜 굳이 화살표 함수를 여러개 쓸까였다.
- 예를 들어서, a와 b를 더하는 add 함수를 만들기 위해서 아래처럼 a와 b 두 개의 인자를 한 번에 받으면 되는 것이 아닌가 그런 생각이 들었기 때문이다.
const add = (a, b) => {
return a + b
}
add(2, 3) // 5- 근데 생각하다보니까 이 경우는 여러개의 화살표 함수의 설명 예시를 워낙 간단한 예시로 만들었기 때문인 것 같다. 예를 들어서 a와 b 두 개의 인자를 한번에 받는 경우 add 함수를 쓸 때부터 a와 b 두 개의 인자를 모두 알고 있어야 한다. 하지만 두 개의 화살표 함수를 사용한다면 첫 번째 (외부) 함수 호출이 두 번째 (내부) 함수를 반환하기 때문에 add 함수를 호출할 때 첫번째 인자 a를 넣어서 리턴된 값을 이용할 수 있다.
- 아래 예시를 다시 살펴보면
add2는 첫번째 함수를 호출해서 두번째 함수를 반환한다. 따라서 add2에 두번째 인자를 넣어주게 되면add2를 만들때 넣었던 첫 번째 인자 a인 2와add2에 사용된 두번째 인자 b인 3이 합쳐져서 5라는 결과가 나오는 것이다.
const add = a => b => {
return a + b
}
const add2 = add(2)
add2(3) // 5