[자바스크립트 25] 비동기 1(콜백함수)

오늘은 드디어 무서운 비동기를 물어보았다.. 먼저 콜백함수부터다

 

콜백 함수는 다른 함수에 인수로 전달되는 함수를 말합니다.

"콜백"이라는 용어는 이 함수가 다른 코드에 의해 "호출되는 위치"를 설명하는 데에서 유래되었습니다.

 

콜백 함수는 자바스크립트의 중요한 부분이며, 특히 비동기 작업을 처리할 때 자주 사용됩니다.

예를 들어, 서버에 요청을 보내고 그 응답을 기다리는 동안 다른 코드를 계속 실행하려면 비동기 방식을 사용해야 합니다.

이 경우 콜백 함수는 응답이 도착하면 실행되는 함수가 됩니다.

 

다음은 콜백 함수를 사용하는 간단한 예입니다:

function greet(name, callback) {
    console.log('Hello, ' + name);
    callback();
}

greet('John', function() {
    console.log('The callback was invoked!');
});

이 예제에서 greet 함수는 두 번째 매개변수로 콜백 함수를 받습니다.

greet 함수를 호출할 때 익명 함수를 콜백으로 전달하며, 이 함수는 "The callback was invoked!"를 콘솔에 출력합니다.

greet 함수가 실행된 후에 콜백 함수가 실행됩니다.

 

콜백 함수는 비동기 프로그래밍뿐 아니라 배열 메소드 (map, filter, reduce 등) 같은 곳에서도 자주 사용됩니다.

이런 메소드들은 콜백 함수를 매개변수로 받아, 각 배열 요소에 대해 해당 콜백 함수를 실행합니다.

 

콜백 함수는 매우 유용하지만, 과도하게 사용하면 "콜백 지옥"이라는 문제에 직면할 수 있습니다.

콜백 지옥은 콜백 함수가 중첩되어 코드의 가독성을 저해하는 상황을 말합니다.

이런 문제를 해결하기 위해 프로미스(Promise)와 async/await 같은 기능이 도입되었습니다.

 

// 드디어 프로미스가 나왔읍니다.. 

// async await 도 나왔읍니다.. 무섭습니다.. 다음시간에..

 

// 그러면, 자바스크립트엔 비동기 작업 같은 걸 위해 콜백이 있는 겁니까 선생님?

 

맞아요. 자바스크립트에서는 비동기 동작을 처리하기 위해 콜백 함수를 주로 사용합니다.

 

비동기 방식은 특정 작업이 완료되기를 기다리지 않고 다음 작업을 진행하는 방식입니다.

예를 들어, 네트워크 요청이나 파일 시스템 작업과 같은 I/O 작업은 완료하는 데 상당한 시간이 걸릴 수 있습니다.

이런 작업을 동기 방식으로 처리하면 해당 작업이 완료될 때까지 전체 프로그램이 멈추게 됩니다.

 

반면, 비동기 방식을 사용하면 I/O 작업을 시작한 후 완료를 기다리지 않고 다른 작업을 계속할 수 있습니다.

작업이 완료되면 미리 지정해 둔 콜백 함수가 호출되어 작업의 결과를 처리합니다.

 

예를 들어, 자바스크립트의 내장 함수인 setTimeout은 두 번째 인수로 전달된 콜백 함수를 첫 번째 인수로 전달된 밀리초 이후에 호출하는 비동기 함수입니다:

console.log('Start');
setTimeout(function() {
    console.log('Timeout callback');
}, 1000);
console.log('End');

// 'Start'
// 'End'
// 'Timeout callback'
// 이딴식으로 됩니다..

 

위 코드를 실행하면 'Start'가 출력된 후 'End'가 출력되고, 마지막으로 'Timeout callback'이 출력됩니다.

setTimeout 함수는 콜백을 비동기적으로 실행하기 때문에, 콜백이 지정된 시간이 지나서 호출되기 전에도 다른 코드가 계속 실행될 수 있습니다.

 

그러나 콜백은 단지 비동기 작업에 국한되지 않습니다.

어떤 함수가 다른 함수를 인수로 받아 호출한다면, 그것은 콜백 패턴을 사용하는 것입니다. 이 경우 그 함수는 동기적으로든 비동기적으로든 호출될 수 있습니다.

 

 

// 콜백지옥, 무서운 비동기 어쩌구 관련 또 다른 예를 하나 가져왔다..

function myFuncOne(){
  console.log('이거부터 출력해라 임마')
};

function myFuncTwo(){
  console.log('다음에 이거 출력해라 임마')
};

// 이런 함수 두개가 있을때..

myFuncOne();
myFuncTwo();
// 하면 예상대로 된다..

// 근데 만약 이러면 어떨까?

function myFuncOne(){
  setTimeout(()=>{
    console.log('이거부터 출력해라 임마')
  }, 1000) 
};

function myFuncTwo(){
  console.log('다음에 이거 출력해라 임마')
};

myFuncOne();
myFuncTwo();
// 결과는 예상과 다르다..
// 망한거다

 

// 그러면 요렇게 콜백으로 일단 할 수 있다

function myFuncOne(콜백을여기에넣자){
    console.log('이거부터 출력해라 임마')
	콜백을여기에넣자();
};

function myFuncTwo(){
  console.log('다음에 이거 출력해라 임마')
};

myFuncOne(myFuncTwo);
// 이러면 된다

 

// 하지만 이렇게 되면 어떨까?

function myFuncOne(callback){
    console.log('이거부터 출력해라 임마');
	callback();
};

function myFuncTwo(callback){
  console.log('다음에 이거 출력해라 임마');
  callback();
};

function myFuncThree(){
  console.log('그다음에 이거 출력해라 임마');
};

myFuncOne(function(){
  myFuncTwo(function(){
    myFuncThree();
  });
});
// 이렇게 되면...ㅜㅜ

// 예상한 대로 동작은 하지만.. 이게 반복되면 콜백 지옥같은게 된다...

// 좋아 예상대로다 그럼 다음 시간엔 프로미스를 알아봐야겠다 ....