[JavaScript] 콜백 함수, 화살표 함수

콜백 함수

자바스크립트에서 함수도 하나의 자료형으로 본다.

그래서 매개변수로 함수를 전달할 수 있다. 매개변수로 전달하는 함수를 콜백함수라고 한다.

 

 

콜백 함수 : 선언적 함수

// 함수를 받아 3번 실행하는 함수
function callThreeTimes(callback) {
    for(let i=0; i<3; i++)
        callback(i)
}

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

// 함수 호출
callThreeTimes(print)

 

콜백 함수 : 익명 함수

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

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

 

forEach() 메소드

forEach 함수는 배열이 가지는 함수로써 배열 내부의 요소를 사용해서 콜백 함수를 호출해 준다.

 

형태는 아래와 같다.

function (value, index, array) { }

 

예제

const numbers = [5, 6, 7, 8, 9]

numbers.forEach(function (value, index, array) {
    console.log(`${index}번째 요소 : ${value}`)
})

 

map() 메소드

배열이 갖고 있는 함수이며 콜백 함수에서 리턴한 값들을 가지고 새로운 배열을 만드는 함수이다.

 

예제

let numbers = [1, 2, 3, 4, 5]

numbers = numbers.map(function (value, index, array) {
    return value*value
})

console.log(numbers)
//numbers.forEach(console.log)

 

+ 위의 예제에서 매개변수 value, index, array를 모두 작성했지만 필요한 것만 입력해도 가능하다.

let numbers = [1, 2, 3, 4, 5]

numbers = numbers.map(function (index, value) {
    return value*value
})

console.log(numbers)

 

filter() 메소드

콜백함수에서 리턴하는 값이 true인 경우만 모아 새로운 배열을 만들어 줍니다.

 

const numbers = [1, 2, 3, 4, 5]
const evenNumbers = numbers.filter(function (value) {
    return value%2===0
})

console.log(evenNumbers)

짝수인 원소 배열 생성

 

화살표 함수

위에서 살펴본 예제들에서 콜백 함수를 쉽게 작성하고자 화살표 함수를 통해 간단하게 함수를 생성한다.

(매개변수) => {

}

또는

(매개변수) => 리턴값

 

예제

let numbers = [1, 2, 3, 4, 5]

numbers = numbers.map( (value) => value*value )
console.log(numbers)

 

화살표 함수와 메소드 체이닝

let numbers = [1, 2, 3, 4, 5, 6, 7]

numbers
    .filter((value) => value%2 === 0)
    .map((value) => value*value)
    .forEach((value) => {
        console.log(value)
    })

메소드 체이닝 : 어떤 메소드가 리턴하는 값을 기반으로 함수를 줄줄이 사용하는 것.