시작하기 전에
다른 프로그래밍 언어는 함수를 지정된 위치에서 만들어야 하지만 자바스크립트는 '함수도 하나의 자료'라는 개념을 가지고 있어서 중간에 만들 수 있다.
콜백 함수
자바스크립트는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 콜백 함수라고 한다.
다른 프로그래밍 언어에서 찾아보기 힘든 개념이므로 처음 접한다면 어렵게 느껴질 수 있다.
콜백 함수를 활용하는 함수 : forEach()
콜백 함수를 활용하는 가장 기본적인 함수는 forEach() 메소드이다. forEach() 메소드는 배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출해준다.
배열이 갖고 있는 메소드 중에서 콜백 함수를 활용하는 메소드는 다음과 같은 형태의 콜백 함수를 사용한다.
function(value, index, array) {}배열의 forEach() 메소드
<script>
const numbers = [273, 52, 103, 32, 57]
numbers.forEach(function(value, index, array) {
console.log(`${index}번째 요소 : ${value}`)
})
> 0번째 요소 : 273
1번째 요소 : 52
2번째 요소 : 103
3번째 요소 : 32
4번째 요소 : 57
</script>콜백 함수를 활용하는 함수 : map()
map() 메소드도 배열이 갖고 있는 함수이다. map() 메소드는 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수이다.
<script>
//배열을 선언
let numbers = [273, 52, 103, 32, 57]
//배열의 모든 값을 제곱
numbers = numbers.map(function(value, index, array) {
return value * value;
})
</script>여기서는 forEach(), map() 함수의 완전한 형태를 보여주고자 콜백 함수에 매개변수를 value, index, array로 3개를 모두 입력했지만, 일반적으로는 value만 또는 value와 index만 사용하는 경우가 많다. 콜백 함수의 매개변수는 모두 입력할 필요 없고, 사용하고자 하는 위치의 것만 순서에 맞춰 입력하면 된다.
<script>
//배열을 선언
let numbers = [273, 52, 103, 32, 57]
//배열의 모든 값을 제곱
numbers = numbers.map(function(value) {
return value * value;
})
</script>콜백 함수를 활용하는 함수 : filter()
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}`)
>원래 배열 : 0,1,2,3,4,5
>짝수만 추출 : 0,2,4
</script>화살표 함수
map(), filter() 함수처럼 단순한 형태의 콜백 함수를 쉽게 입력하고자 화살표 함수라는 함수 생성 방법이 있다. 화살표 함수는 function 키워드 대신 화살표(=>)를 사용하며, 다음과 같은 형태로 생성하는 간단한 함수이다.
(매개변수) => {
}화살표 함수는 다음과 같이 간편하게 사용할 수 있다.
(매개변수) => 리턴값다음과 같이 filter(), map(), 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(함수, 시간) | 특정 시간마다 함수를 호출한다. |
타이머를 종료하고 싶을 때는 clearTimeout() 함수와 clearInterval() 함수를 사용한다.
| 함수 이름 | 설명 |
|---|---|
| clearTimeout(타이머_ID) | setTimeout()함수로 설정한 타이머를 제거한다. |
| clearInterval(타이머_ID) | setInterval()함수로 설정한 타이머를 제거한다. |
타이머 ID는 setTimeout() 함수와 setInterval() 함수를 호출할 때 리턴값으로 나오는 숫자이다.
더 알아보기
선언적 함수와 익명 함수
기본적으로는 둘 중에 편한 방식을 취하면 되지만, 최근에는 안전 등의 이유로 익명 함수를 선호하는 편이다.
선언적 함수와 익명 함수의 조합
<script>
//익명 함수를 생성
함수 = function() {
console.log('익명 함수입니다.')
}
//선언적 함수를 생성하고 할당
function 함수() {
console.log('선언적 함수입니다.')
}
//함수를 호출
함수()
> 익명 함수입니다.
</script>익명 함수는 우리가 코드를 읽을 때와 같은 순서로 함수가 선언되지만, 선언적 함수는 순차적인 코드 실행이 일어나기 전에 생성된다. 함수를 같은 이름으로 덮어쓰는 것은 굉장히 위험한 일이기 때문에 안전하게 사용할 수 있는 익명 함수를 더 선호하는 것이다.
확인 문제
- filter() 함수의 콜백 함수 부분을 채워서 홀수만 추출, 100 이하의 수만 추출, 5로 나눈 나머지가 0인 수만 추출해주세요. 그리고 코드의 실행 결과를 적어보세요.
<script>
//변수를 선언
let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]
//처리합니다.
numbers = numbers.filter(function(value) {
return value % 2 !== 0;})
.filter(function(value) {
return value <= 100;})
.filter(function(value) {
return value % 5 ===0;})
>[25, 75]
</script>- 이전에 반복문 부분에서 살펴보았던 다음과 같은 코드를 배열의 forEach 메소드를 사용하는 형태로 변경해주세요.
<script>
const array = ['사과', '배', '귤', '바나나']
console.log('#for in 반복문')
array.forEach((value, index)=>{console.log(index)})
console.log('#for of 반복문')
array.forEach((value)=>{console.log(value)})
</script>