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

1. 콜백 함수

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

 

(1) 예시를 통해서 알아보자.

 

콜백 함수 예시

 

함수 callThreeTimes를 호출할 때에 매개변수로 함수 print를 넘겨받았다. 

callThreeTime에서 변수 i가 0부터 2까지 변하면서 매개변수로 전달했던 함수를 callback(i)형태로 호출한다.

따라서 print함수가 print(0) -> print(1) -> print(2) 차례로 호출되는것이다.

 

콜백 함수 콘솔창

 

(2) 위의 코드를 익명 함수를 사용해 나타내보자.

 

익명 함수 사용

 

1 - 1. forEach()

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

 

function (value, index, array) { }

 

예시를 통해서 알아보자.

 

forEach() 함수

매개변수로 value, index, array를 넘겨받는 콜백함수이다. 

배열 인덱스 0 -> 1 -> 2 -> 3 순서대로 진행된다. 

 

forEach 콘솔창

 

1 - 2. map()

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

 

예시를 통해서 알아보자.

 

map() 함수

위의 코드에서는 콜백 함수 내부에서 value*value를 하고 있으므로 모든 배열의 요소를 제곱한 새로운 배열이 만들어진다.

그리고 마지막줄에는 매개변수로 console.log 메소드 자체를 넘겨 주었다.

 

map() 콘솔창

 

* 콜백함수의 매개변수는 value, index, array 3개모두 입력하지 않아도 된다. 일반적으로  value만 또는 value와 index만 사용하는 경우가 많다. 앞선 map() 함수의 예시에서는 map()함수 내부에서 value만 사용했음으로 function(value)형태로 사용해도된다.

 

1 - 3. filter() 

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

 

예시를 통해서 알아보자.

 

filter() 함수

 

배열 number의 값중에서 짝수만 골라 새로운 배열 evenNumbers를 생성한다.

 

filter()함수 콘솔창

 

2. 화살표 함수

앞의 map(), filter()함수처럼 단순한 형태의 콜백 함수를 쉽게 입력하고자 화살표 함수를 사용한다. 

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

(매개변수) => {

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

 

화살표 함수는 아래와 같이 간단하게 사용할 수 있다.

(매개변수) => 리턴값

 

예시를 통해서 알아보자.

앞의 filter, map, forEach 함수를 연속적으로 화살표 함수를 이용해서 나타내보자.

 

화살표 함수

filter(), map(), forEach()메소드 모두 배열 메소드 이므로 연속적으로 사용가능하다. 이를 메소드 체이닝이라고 한다.

처음 filter()메소드에서 numbers 배열의 짝수만 이루어진 새 배열을 만들며 그 배열을 기반으로 map() 함수에서 요소를 다 제곱한후 forEach함수에서 배열 전체를 콘솔창에 출력한다.

 

콘솔창 출력

 

3. 타이머 함수

자바스크립트에는 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 타이머 함수들이 있다. 이 함수를 사용하면 시간과 관련된 처리를 할 수 있다.

 

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

예시를 통해서 알아보자.

 

(1) 타이머 걸기

타이머 걸기

콘솔창

 

콘솔창을 확인해보니 1초마다 문장이 출력되는 것을 확인할 수 있다. 웹브라우저를 강제 종료해 멈추어야 한다.

 

타이머를 종료하는 함수?

 

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

이 함수들의 매개변수에는 타이머 ID라는 것을 넣는데, 타이머 ID는 setTimeout()함수와 setInterval()함수를 호출할 때 리턴값으로 나오는 숫자이다.

 

예시를 통해서 알아보자.

 

(2) 타이머 취소하기

 

타이머 취소하기

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

 

콘솔창