함수(2)

콜백함수

• 콜백함수(callback function)란, 파라미터로 전달받아서 함수의 내부에서 실행하는 함수
• 콜백함수는 우리가 이미 코드 속에서 많이 사용되고 있다.
  예를 들어, forEach 함수의 경우 함수 안에 익명의 함수를 넣어서 forEach문을 작동시킨다.

---

forEach() 메서드

<script>
       let numbers = [1,2,3,4,5]
       numbers.forEach(function(value, index, array){
        console.log(`${index}번째 요소 : ${value}`)
       })
</script>

---

map() 메서드

• 콜백함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수

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

        numvers = numbers.map(function(value,index,array){
            return value * value
        })
        numbers.forEach(console.log)
</script>

• forEach() 메서드도 map() 메서드와 동일하게 파라미터로 콜백 함수를 받는데, 그 콜백 함수의 파라미터는 요소, index 그리고 현재 map() 메서드를 호출한 배열이다.
  -forEach() 메서드는 map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 점이다.

---

filter() 메서드

• 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수

<script>
        const numbers = [1,2,3,4,5]
        const evenNumvers = numbers.filter(function(value){
            return value % 2 === 0
        })
        console.log(`원래배열 : ${numbers}`)
        console.log(`짝수만 추출 : ${evenNumvers}`)
</script>

• 원래 function(value, index, array){} 형태의 콜백 함수를 사용하는 것이 기본이지만, 위에서는 value만 활용하므로 value만 파라미터로 넣었다.
  value % 2 === 0 을 통해 짝수만 모은 새로운 배열을 만들어 리턴

---

화살표 함수

• 앞서 배운 map(), filter() 메서드처럼 단순한 형태의 콜백 함수를 쉽게 입력하기 위해 사용
  function 키워드 대신 화살표( => )사용
• () => {}로 사용.
  if 리턴값만을 가지는 함수라면 ()=> 값 사용

<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>

• filter()와 map() 메서드는 배열을 리턴하므로 각각 적용가능

** 메서드 체이닝
위와 같이 어떤 메서드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 방법 (자주 사용되는 기술이니 기억해두기!)

---

타이머함수

• 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수

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

• 1 * 1000 : 밀리 초 단위로 입력

setTimeout (함수,시간) - 특정 시간 후 호출
setInterval (함수,시간) - 특정 시간 마다 호출

clearTimeout (ID) - setTimeout() 로 설정한 타이머 제거
clearInterval (ID) - setInterval() 로 설정한 타이머 제거

<script>
        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초마다 실행됩니다.(4번째)
        // 타이머 종료합니다.        
</script>

---

5일차 TIL후기

• 콜백함수를 배우면서 forEach의 상위호환이라고 해서 배열의 요소들을 순회할 때 그냥 무조건 map 메서드를 활용하는 경우를 본 적이 있었는데, 개인적으로는 return 값으로 새로운 배열이 필요하지 않는 경우라면 forEach 메서드를 활용하는 것이 좋다고 생각한다.
  또한 타이머함수를 실생활에서 잘 쓰이는지는 모르겠지만 setTimeout(), setInterval()를 사용한 후에는 반드시 clearTimeout()와 clearInterval()를 사용해서 타이머를 청소해주는 습관을 가지도록 해야할듯 싶다.