[JavaScript] 함수 - 콜백 함수

박이레·2022년 9월 21일

목록 보기

6/13

Callback
3. (컴퓨터나 전화 사용자의) 회신

　제가 처음 배운 프로그래밍 언어는 파이썬입니다. 주변에서 "매우 쉽다"고 추천했었죠. 정말 그랬습니다. 콜백 함수를 만나기 전까지는 말이죠.. 😂

JS도 콜백 함수가 있습니다. 파이썬을 배울 때 고생해서 그런지 쉽게 이해가 됐습니다. 뭐든 처음이 어렵습니다. 풀스택 개발을 향해 첫걸음(JS)을 떼고 있는 지금이 가장 어려운 순간이라는 생각이 듭니다. 이제 쉬운 일만 남았습니다.

콜백 함수

JS는 '함수도 하나의 자료'로 취급합니다. 따라서 함수를 매개변수로 전달할 수 있습니다. 매개변수로 전달하는 함수를 콜백 함수라고 합니다.

① 선언적 함수 사용하기

> function callThreeTimes (callback) {
  	for (let i = 0; i < 3; i++) {
      	callback(i)
    }
}
//	선언적 함수 선언
> function print(i) {
  	console.log(`${i}번째 함수 호출`)
}

> callThreeTimes(print)
>> "0번째 함수 호출"
>> "1번째 함수 호출"
>> "2번째 함수 호출"

② 익명 함수 사용하기

> function callThreeTimes(callback) {
  	for (let i = 0; i < 3; i++) {
      	callback(i)
    }
}
// 익명 함수 선언
> callThreeTimes(function (i) {
  	console.log(`${i}번째 함수 호출`)
})
>> "0번째 함수 호출"
>> "1번째 함수 호출"
>> "2번째 함수 호출"

콜백 함수 활용

JS가 기본으로 제공하는 함수 중에 콜백 함수를 활용하는 함수가 많이 있습니다. forEach(), map(), filter()가 그렇습니다. 이 셋 모두 배열의 메소드입니다.

forEach()

콜백 함수를 활용하는 가장 기본적인 함수입니다.

> const numbers = [273, 52, 103, 32, 57]

> numbers.forEach(function (value, index, array) {
  	console.log(`${index}번째 요소: ${value}`)
})

>> "0번째 요소 : 273"
>> "1번째 요소 : 52"
>> "2번째 요소 : 103"
>> "3번째 요소 : 32"
>> "4번째 요소 : 57"

map()

콜백 함수에서 리턴한 값을 기반으로 새로운 배열을 만듭니다.

> let numbers = [273, 52, 103, 32, 57]

> numbers = numbers.map(function (value, index, array) {
  	return value * value
})

> numbers.forEach(console.log)
>> "74529 0 Array(5)"
>> "2704 1 Array(5)"
>> "10609 2 Array(5)"
>> "1024 3 Array(5)"
>> "3249 4 Array(5)"

filter()

콜백 함수에서 리턴한 값이 true인 것들만 모아서 새로운 배열을 만듭니다.

> const numbers = [0, 1, 2, 3, 4, 5]
> const evenNumbers = numbers.filter(function (value) {
  	return value % 2 === 0
})

> console.log(`원래 배열: ${numbers}`)
> console.log(`짝수만 추출: ${evenNumbers}`)

>> 원래 배열: 0, 1, 2, 3, 4, 5
>> 짝수만 추출: 0, 2, 4

화살표 함수

화살표 함수를 사용하면 단순한 형태의 콜백 함수를 쉽게 입력할 수 있습니다. 화살표 함수는 function 대신 =>를 사용합니다. 아래와 같이 사용합니다.

> (parameter) => {
  
}

> (parameter) => return value

filter(), map(), forEach()에 적용해보겠습니다.

> let numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

> numbers
	.filter((value) => value % 2 === 0 )
	.map((value) => value * value)
	.forEach((value) => {
  		console.log(value)
})

>> 0
   4
   16
   36
   64

타이머 함수

타이머 함수를 사용하면 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있습니다. setTimeout() 함수와 setInterval() 함수를 사용합니다.

> setTimeout(() => {
  	console.log('1초 후에 실행됩니다')
}, 1 * 1000)	// }, 1000) 으로 입력해도 됩니다.(1초)

> let count = 0
> setInterval(() => {
  	console.log(`1초마다 실행됩니다(${count}번째)`)
  	count++
}, 1 * 1000)

>> "1초 후에 실행됩니다"
>> "1초마다 실행됩니다(0번째)"
>> "1초마다 실행됩니다(1번째)"
>> "1초마다 실행됩니다(2번째)"
>> "..."

타이머를 종료할 때는 clearTimeout() 함수와 clearInterval()을 사용합니다.

> let id
> let count = 0
> id = setInterval(() => {
  	console.log(`1초마다 실행됩니다(${count}번째`)
  	count++
}, 1 * 1000)

> setTimeout(() => {
  	console.log('타이머를 종료합니다.')
  	clearInterval(id)
}, 5 * 1000)

>> "1초마다 실행됩니다(0번째)"
>> "1초마다 실행됩니다(1번째)"
>> "1초마다 실행됩니다(2번째)"
>> "1초마다 실행됩니다(3번째)"
>> "1초마다 실행됩니다(4번째)"
>> "타이머를 종료합니다."