[Javscript] 2개 이상의 화살표 함수

개발하면서 화살표 함수를 2개 이상 쓰는 코드를 보게 되어 신기해서 정리해보고자 한다.

막상 알고보면 2개의 함수를 그냥 쓰는 느낌이긴 하지만, 클로저 랑도 연결되기도 한다.

화살표 함수란

전통적인 함수

const add = function(a, b) {
	return a + b
}

화살표 함수

const add = (a, b) => {
	return a + b
}

함수를 간략하게 표현한 것이라고 보면 될 것 같다. 일반 함수와의 차이점들이 몇 가지 있긴 하지만, 추후 화살표 함수 에 대한 내용을 정리해서 올리도록 하겠다. 지금은 2개 이상의 화살표 함수들이 사용되는 모습들을 살펴보자

2개 이상의 화살표 함수

위의 예시를 활용해보자

const add = (a) => (b) => {
	return a + b
}

언뜻 보면 뭐 저렇게 생겼나 싶기도 하다. 일반 함수 방법으로 변환하면 이해가 쉽다

const add = function(a) {
	return function (b) {
    	return a + b
    }
}

자바스크립트 클로저쪽을 본 사람이면 뭔가 익숙할 수 있다

클로저 - 외부함수의 변수에 접근 가능한 내부함수

나름의 간략 요약된 정의에 따르면 내부함수인 function(b) 부분의 함수는 외부함수인 function(a)의 변수에 접근이 가능하다.

const add = (a) => (b) => {
	return a + b
}

add(5)(10) // 15

const add2 = add(3)
const add3 = add(10)
add2(15) // 18
add3(3) // 13

물론 위 처럼 사용해도 되고 인자를 2개 받아서(const add = (a, b) => ...) 사용해도 된다.

단순히 인자가 1개 혹은 2개 이상의 경우라도 화살표 함수를 1개만 사용했기 때문에

이러한 것도 있구나라는 마음에 찾아보고 기록하고자 글을 써보았다.

첫 번째 함수를 호출하고 이후 두 번째 함수를 활용해야 될 때라든지 다양하게 활용하고 싶을 때 방법 중 하나라고 가볍게 인식하면 될 것 같다 !