콜백 함수 (Callback function)

콜백 함수

 - 콜백 함수란 javascript에서 함수의 매개변수로 변수가 전달 되는게 아닌 함수가 전달 되는 함수를 얘기한다.

 - 매개변수로 넘어온 함수를 함수 구현체 내부에서 로직 도중 또는 로직이 끝난 뒤에 실행을 시킬 수 있다.

// 함수 선언
function sample(callbacKFnc){
	로직 구현체
    ... 
    return callbacKFnc();
}

// 함수 선언
function callback() {
	return console.log('콜백 함수 실행');
}


// 함수 실행
sample(callback);

 - 콜백 함수는 익명 함수로도 정의 할 수 있다.

function sample (callbackFnc){
	구현체
    ...
    return callbackFnc();
}


sample(function (){
	console.log('콜백 함수');
})

 

대표적인 콜백 함수

1. forEach

- for문을 대체할 수 있는 단순 반복문 함수다.

- .forEach(function (value))와 같은 기본 문법이 있지만 대부분 화살표 함수와 많이 사용한다.

- .forEach(element => {} );

let array = [1,2,3,4,5,6,7]	// 배열 변수 선언

// 일반 for문
for( int i=0; i<array.lenth; i++){
	console.log(array[i]);
}

// forEach문
array.forEach(data => {
	console.log(data)
});

2. map

- 반복문을 통해 특정 로직으로 새로운 배열을 만드는 함수

- 위에 forEach 는 단순 배열을 반복하는 용도로 사용을 했다면 map은 반복을 통해 배열의 각각 내용에 접근 후 가공을 한뒤 새로운 배열을 리턴해준다.

let array = [1,2,3,4,5];

let newArray1 = [];
for(let i=0;, i< array.lentgh < i++){
	newArray1.put(array[i]+1);
}

let newArray2 = array.map(data => {
	data+=1;
});

3. filter 

- 반복문을 통해 기존 배열 객체에서 특정 조건에 맞는 값만 리턴해 새로운 배열을 만드는 함수

let array = [1,2,3,4,5];

let newArray1 = [];
for(let i = 0; i<array.length; i++){
	if(array[i] %2 ==0) newArray1.put(array[i]);
}

let newArray2 = array.filter(data => {
	data % 2 ==0;
});

 

이번 포스팅에서는 javascript의 콜백 함수와 콜백 함수를 활용하는 함수를 알아봤다.

 

다음 포스팅에서는 콜백 지옥에 대해서 알아보자.