JavaScript - CallBack함수

콜백함수란?

콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다.

매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다.

 

콜백함수가 왜 필요한가?

자바스크립트는 코드를 위에서 아래로 순차적으로 실행한다.

그러나, 코드가 다른 행위가 일어난 뒤에 실행되는 경우도 있고 순차적으로 실행되지 않을 때도 있다.

이런 걸 비동기 프로그래밍이라고 한다.

콜백은 태스크(작업)가 끝나기 전에 함수가 실행되지 않는 것을 보장한다.

다르게 말하자면 콜백은 그 태스크가 끝난 직후에 실행될 것이다.

콜백은 비동기 자바스크립트 코드를 작성할 수 있도록 해주고 여러 문제와 에러들로부터 안전하게 지켜준다.

자바스크립트에서 콜백 함수를 만드는 방법은 어떤 함수의 파라미터로써 함수를 넘기고 어떤 행위나 태스크가 완료된 직후에 콜백 함수를 호출하는 것이다.

 

콜백함수 예제

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

step1.  

function callback(element){
	return element.length > 6
}
 
newWords = words.filter(callback); //callback함수 호출
console.log(newWords);

 

step2.  더 간결하게

newWords = words.filter(function (element){
	return element.length > 6
}); 

console.log(newWords);

또는

newWords = words.filter((element) =>return element.length > 6); 
console.log(newWords);

 

step3. 새로운 변수에 값을 넣을때

function myfilter(origin, callback){
    var result = [];
    for(var i = 0; i<origin.length; i++){
        var current = origin[i];
        if(callback(current)){
            result.push(current)
        } 
    }
    return result;
}

newWords = myfilter(words, element => element.length>6);
console.log(newWords);