함수 ② 함수 고급

콜백 함수

 

JavaScript에서는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있고, 이렇게 매개변수로 전달되는 함수를 콜백 함수라고 한다.

 

<script>
  function callThreeTimes (callback) {
    for (let i = 0; i < 3; i++) {
      callback(i)
    }
  }

  callThreeTimes(function (i) {
    console.log(`${i}번째 함수 호출`)
  })
</script>

<script>
  function callThreeTimes (callback) {
    for (let i = 0; i < 3; i++) {
      callback(i)
    }
  }

  function print (i) {
    console.log(`${i}번째 함수 호출`)
  }

  callThreeTimes(print)
</script>

0번째 함수 호출
1번째 함수 호출
2번째 함수 호출

 

함수를 매개변수로 가지는, 즉 콜백 함수를 사용하는 주요 메소드로는 forEach(), map(), filter()가 있다.

 

forEach(), map(), filter() 모두 배열이 가지고 있는 메소드로, 다음과 같은 형태로 사용된다.

배열.메소드(function (value, index, array) {})

 

즉 콜백 함수는 function (value, index, array) {}와 같은 형태를 가지는데,

 

이때 value, index, array 중 필요한 매개변수만 선택적으로 순서에 맞춰 입력하면 되고 매개변수명도 자유롭게 지정할 수 있다.*

 

* 예를 들어 numbers.map(function (x) {return x * x})에서 x는 value를 의미한다.

 

forEach()

 

forEach() 메소드는 배열의 정보를 콜백 함수로 넘겨 콜백 함수를 호출한다.

<script>
  const numbers = [1, 2, 3, 4]

  numbers.forEach(function (value, index) {
    console.log(`${index} ${value}`)
  })
</script>

0 1
1 2
2 3
3 4

 

map()

 

map() 메소드는 배열의 정보를 콜백 함수로 넘겨 콜백 함수에서 리턴한 값을 기반으로 새 배열을 생성한다.

<script>
  let numbers = [1, 2, 3, 4]

  numbers = numbers.map(function (value) {
    return value * value
  })

  console.log(numbers)
</script>

(4) [1, 4, 9, 16]

 

filter()

 

filter() 메소드는 배열의 정보를 콜백 함수로 넘겨 콜백 함수에서 true를 리턴하도록 하는 값을 기반으로 새 배열을 생성한다.

<script>
  const numbers = [1, 2, 3, 4]

  const evenNumbers = numbers.filter(function (value) {
    return value % 2 === 0
  })

  console.log(evenNumbers)
</script>

(2) [2, 4]

 

forEach, map, filter 메소드 모두 비파괴적 처리이며

 

forEach 메소드와 달리 map, filter 메소드는 연산 결과 배열을 반환한다.

 

따라서 연산 결과 배열 자체를 사용해야 할 경우 map, filter 메소드를 사용하고 메소드 결과를 원래 배열에 대입해야 한다.

 

화살표 함수

 

앞서 콜백 함수란 매개변수로 전달되는 함수라고 하였다.

 

때문에 콜백 함수는 함수 안에 함수를 입력하는 형태로 사용되고, 이런 형태는 다소 직관적이지 못 하다.

 

콜백 함수의 이러한 불편함을 해소하기 위한 함수 생성 방법을 화살표 함수라고 한다.*

 

화살표 함수는 다음과 같은 두 가지 형태로 사용된다.

(매개변수) => { }

(매개변수) => 리턴값

 

예를 들어 다음의 코드는

numbers.map(function (value) {
    return value * value
  })

 

화살표 함수를 사용해 보다 간단하게 나타낼 수 있다.

numbers.map((value) => value * value)

 

* 사실 화살표 함수는 콜백 함수에 국한되기보다는 익명 함수를 간단하게 사용하기 위한 목적으로 만들어진 함수 생성 문법으로, 콜백 함수 사용 시에도 자주 사용된다.

 

<script>
  let numbers = [1, 2, 3, 4]

  numbers
    .filter((value) => value % 2 === 0)
    .map((value) => value * value)
    .forEach((value) => console.log(value))
</script>

4
16

메소드 체이닝: 이전의 메소드가 리턴한 값을 입력으로 받아 리턴한 값을 다음 메소드에 입력으로 전달하는 것

 

타이머 함수

 

앞서 배운 콜백 함수는 타이머 함수와 함께 특정 시간마다 또는 특정 시간 이후에 호출되도록 하는 형태로도 사용될 수 있다.

setTimeout(콜백 함수, 시간)	특정 시간 후에 콜백 함수를 한 번 호출한다.
setInterval(콜백 함수, 시간)	특정 시간마다 콜백 함수를 호출한다.
clearTimeout(타이머 ID)	setTimeout() 함수로 설정한 타이머를 제거한다.
clearInterval(타이머 ID)	setInterval() 함수로 설정한 타이머를 제거한다.

 

setTimeout() 함수, setInterval() 함수는 호출 시 숫자를 리턴하는데 이 값을 타이머 ID라고 하고, 이 두 함수의 시간 매개변수는 밀리 초 단위이다.

 

<script>
  setTimeout(() => {
    console.log('1초 후 실행')
  }, 1 * 1000)

  let count = 0

  setInterval(() => {
    console.log(`1초마다 실행 (${count}회)`)
    count++
  }, 1 * 1000)
</script>

1초 후 실행
1초마다 실행 (0회)
1초마다 실행 (1회)
1초마다 실행 (2회)
1초마다 실행 (3회)
...

 

<script>
  let id
  let count = 0

  id = setInterval(() => {
    console.log(`1초마다 실행 (${count}회)`)
    count++
  }, 1 * 1000)

  setTimeout(() => {
    clearInterval(id)
    console.log('타이머 종료')
  }, 5 * 1000)
</script>

1초마다 실행 (0회)
1초마다 실행 (1회)
1초마다 실행 (2회)
1초마다 실행 (3회)
1초마다 실행 (4회)
타이머 종료

 

 

 

 

 

---

이 글은 혼자 공부하는 자바스크립트 (윤인성 저)를 바탕으로 공부한 내용을 작성한 글입니다.