Callback함수

이 글은 jason9319님의 티스토리를 참고하여 작성하였습니다.
[JavaScript] 콜백(Callback)함수와 비동기 처리 (tistory.com)

[JavaScript] 콜백(Callback)함수와 비동기 처리 (tistory.com)

[JavaScript] 콜백(Callback)함수와 비동기 처리

 

Array를 공부하다 forEach메서드는 콜백함수를 사용한 메서드라는 것을 알게되었다. 그렇다면 콜백함수는 무엇일까?

 

콜백함수

파라미터로 함수를 전달받아서 함수의 내부에서 실행하는 함수. 

다른 함수에 매개변수로 넘겨준 함수.

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

function returnName(callback){
	callback("jason");
    console.log("만나서 반갑습니다");
}

function sayHello(name){
	console.log("안녕하세요 "+name+"씨");
}

returnName(sayHello);

//안녕하세요 jason씨
//만나서 반갑습니다

1. returnName함수의 파라미터로 받게되는 함수(여기선 sayHello)는 "jason"이라는 string을 인자로 받는다.

2. returnName함수는 sayHello 함수를 파라미터로 가지고 호출된다. 

3. returnName함수는 sayHello 함수를 인자로 받아야 하기 때문에 sayHello함수가 먼저 실행된 뒤 returnName함수가 실행된다.

 

그렇다면 JS에서는 왜 콜백함수를 쓰는걸까?

비동기와 동기

동기식 처리모델

어떠한 작업이 순차적으로 실행되며 요청에 대한 응답이 올 때 까지 모든 테스크들이 블락되는 프로세스.

즉, 하나의 작업을 시작하면 그 작업이 완료될 때 까지 다른 작업은 무한정 대기해야한다.

 

비동기식 처리모델

어떠한 작업중에 다른 작업요청이 들어오면 무한정 대기하지않고 새로 들어온 작업을 수행할 수 있는 프로세스.

어떤 작업을 우선적으로 수행할지는 JS의 API가 결정해주게 된다.

 

JS는 하나의 스레드만을 이용하는 싱글스레드 기반의 언어이다. 따라서 한번에 한가지의 작업밖에 하지 못한다는 이야기다. 만약 지금 당장 처리해야하는 급한 작업이 있는데 현재 작업하고 있는 작업을 끝내지 못하고 계속 붙들고 있으면 정말 난처할 것이다. 이를 해결하기 위하여 사용하는 방법이 비동기식 처리모델이다.

하지만 JS에서 단순히 소스코드를 작성한다면 완전한 비동기 처리가 이루어지기 어렵다. 왜냐하면 API로부터 재개응답을 받기 전에 기존 작업을 종료해버리기 때문이다.

출처 : jason9319.tistory.com/406

따라서 이러한 비동기 처리를 문제없이 수행하기 위하여 콜백함수를 이용한다.

 

console.log("1");

setTimeout(function() {
	console.log("2");
}, 1000};

console.log("3);

//1
//3
//2

//왜 1 2 3 순서대로 안나오지?

setTimeout함수는 두번째 인자의 숫자만큼의 시간을 대기한 후 첫번째 인자로 설정한 익명함수를 실행한다.

만약 완벽한 비동기가 이루어진다고 생각한다면

1. 1이 출력된다

2. 1초를 기다린다.

3. 2가 출력된다.

4. 3이 출력된다.

위와 같은 순서대로 코드가 실행되어 1 2 3순으로 결과가 나와야 한다. 그러나 비동기식 처리의 문제때문에 아래와 같은 흐름을 타게된다

1. 1이 출력된다.

2. 1초를 기다리는 동안 3이 출력된다.

3. 2가 출력된다.

 

비동기처리를 한 코드(콜백)를 작성하면 아래와 같다.

console.log("1");

function InOrderPrint(callback){
	setTimeout(function() {
		console.log("2");
        callback();
	}, 1000);
}
InOrderPrint(function() {
	console.log("3");
})

//1
//2
//3

1. 1이 출력된다.

2. InOrderPrint 함수가 익명함수를 파라미터로 실행된다.

3. InOrderPrint 함수에 정의된대로 1000ms를 대기한 후 2를 출력한다.

4. 이후 callback()을 실행(익명함수에 작성된 내용)하여 3을 출력한다.

위와같이 동작하게 된다.

 

콜백함수는 너무 남발하게 되면 콜백지옥이라는 지저분한 코드를 볼 수 있다.

이를 해결하기 위해서는 Promise 혹은 Async를 사용하면 된다.

 

참고)

[JavaScript] 자바스크립트 콜백함수(callback) 가볍게 이해하기 :: BigTop_Log (tistory.com)

[JavaScript] 자바스크립트 콜백함수(callback) 가볍게 이해하기

[JavaScript] 콜백(Callback)함수와 비동기 (geundung.dev)

[JavaScript] 콜백(Callback)함수와 비동기