[혼공스] 05 - 2 '함수 고급' 정리(1)

 

오늘은 05 - 2장의 내용을 정리해 보자.

 

05 - 2장의 제목은 '함수 고급'으로, 함수를 매개변수로 전달하는 특성에 대해 자세하게 설명하고 있다.

 

학교 강의에서 나에게 첫 번째로 좌절을 안겨준 파트이다. 이번에는 꼭 마스터 하도록 하자!

 

그럼 정리 시작!

 

(☆)콜백 함수(☆)

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

 

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

 

실행결과

callThreeTimes() 함수는 함수를 매개변수로 받아 해당 함수를 3번 호출한다. callThreeTimes() 함수의 callback 매개변수에 print() 함수를 전달했다. 그리고 callThreeTimes() 함수 내부에서는 callback(i) 형태로 함수를 호출하고 있다. 따라서 매개변수로 전달했던 print() 함수가 print(0), print(1), print(2)로 차례차례 호출되어 실행결과와 같은 결과를 낸다.

 

익명 함수를 사용하면 코드를 다음과 같이 구성할 수 있다.

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

 

자바스크립트가 기본적으로 제공하는 함수 중에서도 콜백 함수를 활용하는 함수가 많다. 어떠한 형태로 콜백 함수를 활용하는지 알아보자.

 

강의시간에 배운 고차함수, 교재에서는 map, forEach, filter를 다루고 있다.

 

콜백 함수를 활용하는 함수: forEach()

 

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

 

배열이 갖고 있는 메소드 중에서 콜백 함수를 활용하는 메소드는 다음과 같은 형태의 콜백 함수를 사용한다.

function (value, index, array) { }

 

강의교안 forEach() 메소드에 관한 내용

<script>
    const numbers = [273, 52, 103, 32, 57]
    
    numbers.forEach((value, index, array) => {
     console.log(`${index}번째 요소: ${value}`)
    })
</script>

 

forEach() 활용

 

콜백 함수를 활용하는 함수: map()

 

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

 

강의교안 map()에 관한 설명

 

<script>
    let numbers = [273, 52, 103, 32, 57]
    
    numbers = numbers.map((value, index, array) => { // 매개변수로 value, index, array를 갖는 콜백함수를 사용
    	return value * value
    })
    
    numbers.forEach(console.log) // 매개변수로 console.log 메소드 자체를 넘김
</script>

 

map() 활용

 

콜백 함수를 활용하는 함수: filter()

 

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

 

강의교안 filter()에 관한 설명

 

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

 

 

function (value, index, array) {} 의 형태로 콜백 함수를 사용하는 것이 기본이지만, value만 활용하므로 value만 매개변수로 넣어주면 된다.

 

(☆)화살표 함수(☆)

map(), filter() 함수처럼 단순한 형태의 콜백 함수를 쉽게 입력하고자 화살표 함수라는 함수 생성 방법을 만들었다. 화살표 함수는 function 키워드 대신 화살표(=>)를 사용하며 다음과 같은 형태로 생성하는 간단한 함수이다.

 

(매개변수) => { }

 

화살표 함수는 다음과 같이 간편하게 사용할 수 있다.

(매개변수) => 리턴값

 

map, filter, forEach 메소드를 화살표 함수와 함께 사용해보자.

 

<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() 메소드를 적용할 수 있고, map() 메소드도 배열을 리턴하므로 forEach() 메소드를 적용할 수 있다. 이렇게 메소드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 것을 메소드 체이닝이라고 한다.

 

타이머 함수

자바스크립트에는 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 타이머 함수들이 있다.

 

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

 

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

 

무한 반복문이 실행된다

 

코드를 실행하면 1초 후에 setTimeout() 함수의 콜백 함수가 실행되고, 1초마다 setInterval() 함수의 콜백 함수가 실행되는 것을 볼 수 있다. 1초는 1000 밀리 초 이므로 1 * 1000 을 해서 1초를 나타낸다.

 

함수 이름	설명
clearTimeout(타이머_ID)	setTimeout() 함수로 설정한 타이머를 제거한다
clearInterval(타이머_ID)	setInterval() 함수로 설정한 타이머를 제거한다

 

이때 타이머 ID는 setTimeout() 함수와 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초후에 타이머를 종료한다.

 

05 - 2 장의 첫번째 내용은 여기서 마무리 하면 될 것 같다.

 

내일은 나머지 내용을 마저 정리해보자.

 

오늘 하루도 쌓였다.