[js] callback 함수 이해하기

callback 함수를 쓰는 이유

: 비동기 처리를 위해 

 

동기와 비동기의 차이

: 동기란 파일 조작이 완전히 끝난 후 다음 동작이 이루어지는 방식이고,

비동기란 다음 코드를 진행하면서 파일 조작을 하는 방식이다.

 

: 어떤 루틴을 완전히 끝내고 제어를 반납하면 동기식,
동작이 안 끝났어도 일단 제어권을 반납한 후 지 할일 계속하면 비동기식.

 

일상 예제 중 이런 게 있는데 이해가 갔다.

ex) 

1. 남자가 여자에게 10 분에 한번씩, "준비 다 됐음?" 하고 물어보고 준비 다 됐을 때 데이트를 하러 가는 것

2. 남자가 여자에게 "준비 다 되면 문자해" 하고 근처 피시방에서 게임하고 있다가 문자가 오면 데이트 하러 가는 것

 

비동기 프로그래밍을 하는 이유

: 속도 때문에

동기 프로그래밍은 기능을 요청한 후, 요청이 끝날 때까지 무작정 대기를 해야 하지만

비동기 프로그래밍은 요청을 한 후, 다른 작업을 하고 있다가 끝났다는 이벤트를 받고 난 후

이후의 처리를 하면 되기 때문에 동기 프로그래밍보다 빠르다.

 

 

 

 

callback 함수 간단한 예제부터 보자.

 

function test(f) {
	f()
}


test(function(){
	console.log('callback function!')
})

 

*test 라는 함수는 함수를 인자로 받는다. (*자바스크립트 변수에는 문자, 숫자, 객체, 함수 저장이 가능하다)

* 대부분의 콜백함수는 이렇게 익명함수로 작성이 된다.

 

(1) 아래에 위치한 test 함수를 호출한다.

(2) 전달된 함수는 1행의 test 함수의 매개변수 f에 저장이 된다.

(3) 그리고 f()를 호출하고 있다.

(4) f()는 전달된 함수의 console.log 메세지를 찍는다.

 

 

또 다른 예제도 보자.

 

 

loading 이라는 변수에 함수가 저장되어 있다.

이 함수는 path, done 이라는 매개변수를 받는다.  (path 는 문자열, done 에는 함수를 전달 받는다)

 

6행에서 loading 함수를 호출하며 path 인자로 '/folder/text/' 를 전달하고, done 인자로는 함수를 전달하고 있다.

 

콜백함수는 위에서 아래로 흐른다고 생각하면 안 되기에 천천히 분석할 필요가 있다.

 

1행에서 함수를 구현만 해 두고, 6행에서 실제로 호출이 진행된다.

 

(1) path 로 넘어간 데이터가 2행에서 출력 : '전달 받은 경로 : /folder/text/'

(2) 콜백함수인 done 을 호출하며 기존의 path('/folder/text/') 에 'sample.txt.' 문자열을 이어서 전달한다. : /folder/text/sample.txt.'

(3) 전달된 이어진 문자열이 7행에서 출력 : '완료 ! : /folder/text/sample.txt. '

 

 

 

또 다른 예제도 보자.

 

let first = 10;
let second = 20;
let result = 0;

function add (x , y){
	return x + y
}

function getResult(callback){
	setTimeout(function(){
    	result = add (first, second)
        console.log(result)
        callback()
    },500)
}

getResult(function(){
	first = 20;
    result = add (first, second);
    console.log(result)
})

 

위 코드에서 첫번째 console.log 와 두번째 console.log 의 값은 어떻게 찍힐까.

 

(1) getResult 라는 함수가 실행이되는데 이것은 0.5초 뒤에 실행이 된다.

(2) result 라는 값을 반환하기 위해 add 라는 함수를 통해서

first 값인 10 +  second 값인 20 = 30이 result로 첫번째 console.log에 찍힌다.

(3) 그리고 호출된 함수에 first 값이 20 이기 때문에

first 값인 20 +  second 값인 20 = 40이 result로 두번째 console.log에 찍힌다.

 

 

 

 

다른 비동기 처리 방식인 promise 와 async await 도 차근차근 알아보자.

 

 

참고한 사이트

https://codevkr.tistory.com/52

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

https://blueshw.github.io/2018/02/27/async-await/

[javascript] async, await를 사용하여 비동기 javascript를 동기식으로 만들자