[JavaScript] 콜백 함수, 화살표 함수, 타이머 함수

1. 콜백 함수

자바스크립트에서는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 콜백 함수라고 한다. 아래의 예제는 콜백함수로 익명함수를 사용했을 때의 코드이다.

<script>
  // 함수를 선언합니다.
  function callThreeTimes (callback) {
    for (let i = 0; i < 3; i++) {
      callback(i)
    }
  }

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

 

2. 콜백 함수를 활용하는 함수

배열이 갖고 있는 메소드 중에서 콜백 함수를 활용하는 메소드는 다음과 같은 형태의 콜백함수를 사용한다. 아래의 경우 콜백 함수의 매개변수를 온전히 입력한 것으로, 때에 따라 필요한 것만 입력하여 사용할 수 있다. 일반적으로는 value만 또는 value와 index만 사용하는 경우가 많다. 다만 사용하고자 하는 것의 위치와 순서에 맞게 입력하여야 한다.

function (value, index, array) {}

 

• forEach() : forEach() 메소드는 배열이 갖고 있는 메소드로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출한다.

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

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

 

• map() : map() 메소드도 배열이 갖고 있는 메소드로, 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수다. 

<script>
  // 배열을 선언합니다.
  let numbers = [273, 52, 103, 32, 57]

  // value만 사용하므로 index, array는 굳이 입력할 필요X
  numbers = numbers.map(function (value) {
  // 배열의 모든 값을 제곱합니다.
    return value * value
  })

  // 출력합니다.
  numbers.forEach(console.log)
</script>

 

• filter() : filter() 메소드도 배열이 갖고 있는 메소드로 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수다.

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

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

 

3. 화살표 함수

단순한 형태의 콜백 함수를 쉽게 입력하고자 function 키워드 대신 화살표를 사용하여 함수를 만들 수 있다. 크게 다음과 같은 두가지 방식이 있다.

// 첫번째 방식
(매개변수) => {

}

// 두번째 방식
(매개변수) => 리턴값

 

아래의 경우 filte() 메소드가 리턴하는 값을 기반으로 줄줄이 메소드를 사용하는데, 이것을 메소드 체이닝이라고 한다.

<script>
  // 배열을 선언합니다.
  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)
    })
</script>

 

4. 타이머 함수

특정 시간마다 또는 특정 시간 이후에 콜백함수를 호출할 수 있는 타이머 함수들이 있다. setTimeout(함수, 시간)은 특정 시간 후에 함수를 한 번 호출하고, setInterval(함수, 시간)은 특정 시간마다 함수를 호출한다.

<script>
  setTimeout(() => {
    console.log(`1초 후에 실행됩니다.`)
  }, 1 * 1000)

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

setTimeout() 함수를 종료하고 싶을 때에는 clearTimeout(타이머_ID) 함수를, setInterval() 함수를 종료하고 싶을 때에는 clearInterval(타이머_ID) 함수를 사용한다. clearTimeout()과 clearInterval() 함수들의 매개변수에는 타이머 ID를 넣는데 이는 setTimeout() 함수와 setInterval() 함수를 호출할 때 리턴값으로 나오는 숫자이다. 이 숫자를 넣어야 함수를 종료할 수 있으므로 id 값을 함수의 리턴값으로 할당하면된다.

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

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

 

 

cf. 엄격모드

자바스크립트 코드 블록의 가장 위쪽에 'use strict'라는 문자열을 볼 수 있다. 이는 엄격 모드라고 부르는 기능으로 이러한 문자열을 읽어들인 순간부터 코드를 엄격하게 검사한다. 예를 들어 변수를 let 키워드 등으로 선언하지 않고 곧바로 사용하는 것은 일반적인 자바스크립트에서는 가능하지만 엄격 모드에서는 변수를 let 키워드 등으로 선언하지 않았는데 사용했다고 곧바로 오류가 발생한다. 즉시 호출 함수를 만들고, 이 블록의 가장 위쪽에서 엄격 모드를 적용하는 경우가 많은데, 이 경우 해당 블록 내부에만 엄격 모드가 적용된다.

// 엄격 모드를 사용하는 방법 - 전체

<script>
    'use strict'
    문장
    문장
</script>

// 엄격 모드를 사용하는 방법 - 즉시 호출 함수
<script>
    (function () {
    'use strict'
    문장
    문장
    })() 
</script>

 

---

혼공스 연습문제

1. filter함수를 사용하여 "홀수만 추출, 100 이하의 수만 추출, 5로 나눈 나머지가 0인 수만 추출" 의 3가지 조건을 만족하는 수만 추출하기

<script>
    let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]
    numbers = numbers.filter((value) => value % 2 === 1 && value <= 100 && value % 5 === 0)
    console.log(numbers)
</script>

답지에서 처럼 3가지를 다 따로따로 하는 것보다 논리 연산자를 사용하니 간단하게 1줄로 추출할 수 있었다.

 

2. 반복문에서의 코드를 배열의 forEach() 메소드를 사용하는 형태로 변경해보기

<script>
    const array = ['사과', '배', '귤', '바나나']
    array.forEach(
        (value, index) => {
            console.log(index)
        }
    )
    array.forEach(
        (value) => {
            console.log(value)
        }
    )
</script>

첫번째 경우에 index만 활용하므로 익명함수의 매개변수를 index만 입력했다가 오류가 발생했다. 매개변수 자체의 이름이 중요한 것이 아니고, 순서에 맞게 들어오는 값이 다르다는 점을 명심해야겠다. index를 사용하고 싶다면, value를 쓰지 않더라도 index는 value 뒤에 받을 수 있으므로, value와 index를 써줘야한다는 것을 알게 되었다.