05-2. 함수 고급

콜백함수

자바스크립트는 함수도 하나의 자료형이므로 매개 변수로 전달 함수를 콜백 함수라고 한다.

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

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

    callThreeTimes(print)
</script>

 

화살표 함수

단순한 형태의 함수를 쉽게 입력하고자 화살표(arrow) 함수라는 함수 생성방법이 있습니다.

화살표 함수는 function 키워드 대신 ghktkfvy(=>)를 사용합니다.

(매개변수) => { 

} 불표현식 || 불표현식이 거짓일 때 실행할 문장

아래와 같이 더 간단히 사용할 수 있으며 내부에서는 this 키워드가 지칭하는 대상이 다르다는 등의 미세한 차이가 있습니다.

(매개변수) => 리턴값

예제

const array = [0,1,2,3,4,5,6,7,8,9]

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

결과값 : (10) [0,1,4,9,16,25,36,49,64,81]

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

메소드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 것을 메소드 체이닝(method chaining)이라고 부릅니다.

 

타이머 함수

특정 시간 이후에 콜백 함수를 호출 할 수 있는 타이머(timer) 함수들이 있습니다.

함수 이름	설명
setTimeout(함수,시간)	특정 시간 후에 함수를 한번 호출 합니다.
setInterval(함수,시간)	특정시간마다 함수를 호출합니다.

타이머를 종료하고 싶을 때는 clearTimout()함수와 clearInterval()함수를 사용합니다.

함수이름	설명
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)
    </script>

setInterval()함수를 사용해서 1초마다 메시지를 출력하고, setTimeout()함수를 사용해서 5초후 타이머를 종료합니다.