return function

Javascript 코드를 보다 보면 함수 내에서 함수를 return 하거나,

() => () => () 와 같은 특이한 함수의 형태를 보곤 하는데 이런 패턴들이 잘 이해가 가지 않아 한번 정리해보려고 한다.

const generateSum = () => {
 const sum = (a,b) => a+b;
  return sum;
}

const foo = generateSum();

foo(2,3); //5

위의 형태가 쉽게 생각해 볼 수 있는 함수를 return하는 함수다. generateSum 에서 sum 함수를 return 하고 있고, return 된 함수를 받아 실행하고 있다. foo 라는 변수에 대입하지 않고도 sum 함수는 호출 가능하다.

generateSum()(2,3); //5

위와 같이 generateSum() 을 호출한 뒤, 바로 또 호출하는 방식이다. 문제될 것은 없다!

generateSum 에서 return 하는 함수를 sum 변수에 대입하지 않고 바로 return 하면 좀 더 간소화 된다.

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

generateSum()(2,3); //5

단순히 함수를 return 하기만 하는 동작만 하는 거라면 { } 도 필요없어진다. 아래와 같이 더 간소화가 가능하다.

const generateSum = () => (a,b) => a+b;

js에서 종종 봤던 () => () => .. 함수 형태다!

다음과 같은 함수의 형태도 있다.

const generate = f => arg => f(f(arg));
// const generate = f => (arg => f(f(arg));) 리턴 부분을 ( ) 로 감싸면 이해하기 더 쉽다.

generate 는 인자로 함수를 받아서, 해당 함수를 재귀적으로 두번 호출하는 함수를 반환한다.

const sqrtTwice = generate(Math.sqrt); // 제곱근을 계산하는 함수를 인자로 넣어준다.
const squareTwice = generate(x=> x**2);
sqrtTwice(16); // 2
squareTwice(3); // 81  generate(x=> x**2)(3) 이랑 같다.

generate 함수는 말 그래도 함수를 만드는 함수다.
매번 새 함수를 만들기 때문에 같은 인자를 넣어줘도, 동작은 똑같으나 각각 다른 함수다.

const foo1 = generate(x=> x**2);
const foo2 = generate(x=> x**2);

foo1 == foo2 // false

그리고 위의 예제들은 모두 클로져와도 관련이 있다.
generate 는 함수를 호출 된 후에 함수 실행이 끝났기 때문에 내부 인자들은 다 회수되어야 할 것 같지만,
클로저의 특성 때문에 generate 가 만든 함수에서도 f 인자를 참조할 수 있다.
(더 자세한 것은 클로저 포스팅을 참고하자)

 

보통 이런 패턴을 쓰는 경우는, return 하는 함수를 나중에 쓸 경우 처음에 지정한 어떤 인자 값을 기억하고 싶을때 유용하다.
다른 포스팅 글에서 잘 설명한 예시가 있어 참고했다. 원본은 아래 링크를 참고하면 된다.

const saveWord = origin => word => origin === word;
const correct = 'asdf';
const isCorrect = saveWord(correct);

isCorrect('abcd'); // false
isCorrect('asdf'); // true

saveWord 는 특정 단어가, 인자로 받은 단어와 일치하는지 비교하는 함수를 반환한다.
saveWord('asdf') 는 (word) => { return'asdf' === word; } 과 같은 함수를 만들어 낸다.

 

 

참고글 : https://medium.com/@iampika/part-6-javascript-functions-returning-functions-from-functions-429a3d9a55d1