자바스크립트 함수

자바스크립트에서 함수는 1급이다. 함수 자체는 값처럼 취급될 수 있기에 리턴이 가능함. 또한 리턴 뿐만 아니라 인자로 전달될 수 있다. 이 또한 1급이기 때문에

콜백함수

const arr = [1, 2, 3, 4]
const result = arr.map(el => {
  return el * 2
})

맵함수의 인자로 el … el *2 까지 인자로 함수를 넣고 있다. 평소에 자연스럽게 쓰던것.

const runCallback = func => {
  console.log('콜백함수 실행하기')
  func()
  console.log('실행완료')
}

이렇게 runCallback이라는 함수에 인자로 함수를 전달하면 전달받은 함수를 실행시킨다.

const callback = () => {
  console.log('나는 콜백이야')
}

runCallback(callback)
// 콜백함수 실행하기
// 나는 콜백이야
// 실행완료

인자로 받은 함수에 인자를 넣는것도 가능하고, 인자로 받은 함수의 리턴값을 사용하는것 역시 가능하다.

const runCallback = func => {
  const innerValue = 123
  func(innerValue)
}

runCallback(value => {
  console.log('인자로 받은 값' + value)
})
// 인자로 받은 값 123

인자로 받은 함수의 리턴결과를 사용하기

const runCallback = func => {
  const result = func()
  console.log('콜백 결과' + result)
}

runCallback(() => {
  console.log('콜백이 실행되고')
  return '콜백 리턴이다'
})
// 콜백이 실행되고
// 콜백 결과 콜백 리턴이다

콜백함수에 인자를 전달하고 리턴값을 사용하기

const runCallback = func => {
  const innerValue = '내부값'
  const result = func(innerValue)

  console.log('콜백 결과' + result)
}

runCallback(value => {
  console.log('콜백이 실행되고')
  return value + '더하기 콜백의 리턴'
})

// 콜백이 실행되고
// 콜백 결과내부값더하기 콜백의 리턴

이렇게 인자로 함수를 받고 그 함수에 인자를 넣고 리턴값을 자유자재로 활용한다면 많은 상황에서 코드의 재사용성과 함수 확장성을 늘릴수 있을것이다. 익숙해지도록 연습을 많이 해보아야겠다고 느꼈다.

커링패턴

함수가 리턴하는 값이 내부 함수이고 함수에서 함수의 인자도 함수스코프 변수의 일종으로 처리된다. 내부함수에서 외부함수의 인자에 접근이 가능하다. 이러한 형태로 함수를 구성하는것을 커링(currying)이라고 하고 이런 형태의 함수를 커리 함수(curried function)라 한다. 말로는 어려우니 직접 보기

함수를 리턴하는 함수

function curry(arg1) {
  return function(arg2) {
    return arg1 + arg2
  }
}

curry함수가 리턴하는 함수는 맥락상 클로져함수가 된다.
화살표함수로 고치면

const curry = arg1 => {
  return arg2 => {
    return arg1 + arg2
  }
}

curry함수는 값을 바로 리턴하고 있으며 그 값은 내부함수
화살표함수가 값을 바로 리턴한다면 중괄호와 return키워드를 생략할 수 있다.

const curry = arg1 => arg2 => arg1 + arg2

간단한 적용 예시

const devision = by => target => target / by

const devideByTen = devision(10)
const devideByTwo = devision(2)

devideByTen(234) // 23.4
devideByTwo(5670) // 2835

devision 함수는 나눗셈 연산을 커링으로 처리하는 간단한 함수이다.
커리함수에서 처음에 받는 인자는 보통 설정이나 옵션등에 해당하는 값이다. 나중에 받는 인자는 적용대상, 값 등에 해당하는 값이다. 위의 devision 함수가 처음 받는 값은 ‘이후 값을 몇으로 나눌건지’에 대한 설정값 이라고 보면 되고, 커링의 결과로 나온 함수들은 커리함수가 받은 설정값을 기억하면서 실제로 값을 처리하는 작업을 한다.


Written by@jaeyoung-son
배운것을 기록하는 공간입니다.

GitHub