[JavaScript] 자바스크립트 콜백 함수(Callback Function) - 선언적 함수, 익명 함수, forEach(), map(), filter()

콜백 함수 (Callback Function)

자바스크립트에서 함수도 하나의 자료형으로 본다.
그래서 매개변수로 함수를 전달할 수 있다. 매개변수로 전달하는 함수를 콜백함수라고 한다.

---

콜백 함수 종류

1. 선언적 함수

2. 익명 함수

 

1. 선언적 함수

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

// ▶ 함수 호출
callThreeTimes(print);  
// [실행 결과]  0번째 함수 호출   1번째 함수 호출   2번째 함수 호출

 

2. 익명 함수

// ▶ 함수 선언
function callThreeTimes(callback){
	for(let i=0; i<3; i++){
		callback(i);
	}
}

// ▶ 함수 호출
callThreeTimes(function(i) { // 익명 함수 사용
	console.log(`${i}번째 함수 호출`); 
    // [실행 결과]  0번째 함수 호출   1번째 함수 호출   2번째 함수 호출
})

---

콜백 함수 활용 함수

1. forEach()

2. map()

3. filter()

---

1. forEach()

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

 

📝 forEach() 형태

// 요소 : 배열의 각 요소에 대한 참조.
// 인덱스 : 현재 요소의 인덱스.
// 배열 : forEach를 호출한 배열 자체
배열명.forEach(function(요소, 인덱스, 배열) {
		// 메서드
});

 

사용예시

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

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

실행 결과

---

2. map()

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

 

📝 map() 형태

// currValue : 원본 배열의 데이터 
// index : 현재 처리 중인 인덱스 
// array : 기존 배열 
// newValue : callBackFunction에서 사용될 값 
배열명.map(callBackFunction(currValue, index, array), newValue);

 

 

사용예시

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

---

3. filter()

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

 

📝 filter() 형태

// currValue : 원본 배열의 데이터 
// index : 현재 처리 중인 인덱스 
// array : 기존 배열 
// newValue : callBackFunction에서 사용될 값  
배열명.filter(callBackFunction(currValue, index, array), newValue);

 

사용예시

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

console.log(evenNumbers);

[실행 결과] 짝수인 원소 배열 생성