[JavaScript] CallBack 함수 사용하기

시작하기 전에 알아두면 좋은 기초지식

JavaScript - Object 만들기

2023.06.01 - [Web/JavaScript] - [JavaScript] Object 만들기

[JavaScript] Object 만들기

 

 

 

CallBack 함수 배우기 전

CallBack 함수를 알기 전에 JavaScript의 실행순서에 대해서 먼저 짚고 넘어가야 합니다.

또한 이를 온전히 사용하기 위해서는 JavaScript의 Object가 무엇인지를 알고 넘어가면 좋습니다.

 

 

JavaScript의 실행순서는 참 재밌습니다.

보통 코드의 실행순서는 위에서 아래로 읽습니다.

이는 JavaScript 또한 마찬가지입니다.

 

그러면 이 함수의 진행은 first가 먼저 실행 후, second가 실행되는 것이 돼야 하는 것이 정상입니다.

 

실행결과 예상안

로그가 찍힌다고 한다면, 위와 같은 순서로 정의가 될 것이라고 예상할 수 있겠습니다.

 

 

실행결과

그러나 실행결과에 대해서는 이렇게 first가 맨 아래에 찍힌 것을 확인하게 됩니다.

여기서 setTimeout함수를 사용했으며 100을 입력했으니, 당연히 결과 또한 0.1초 늦게 나오는 것이 정상 아닌가에 대해 말씀할 수 있지만, 다르게 접근하자면 first가 실행되는 0.1초를 기다리고 second함수가 실행돼야 하는 것이 아닌가? 생각이 될 때가 있습니다.

 

이 예시는, JavaScript만으로 알리기 위한 예시이며 이제 Server와 Client의 통신을 할 때 또한 실행순서가 엉키는 것을 쉽게 포착이 가능해집니다.

 

이런 현상을 개발자가 컨트롤할 수 있는 기술 중 하나이며 또한 Script를 가져올 때 많이 사용하는 방법이기에 알아두면 매우 좋은 방법 중 하나입니다.

 

 

CallBack함수 사용하기 - 1

setTimeout(function() {
    alert('test');
}, 2000);

CallBack 함수는 사실 여기에서도 사용을 하였습니다.

이 부분을 설명을 한다면 setTimeout함수를 사용해서 code의 딜레이를 시켰습니다.

그 후 setTimeout안의 code가 실행되면서 딜레이가 진행된 후 code가 실행되는 것을 알 수 있는 함수입니다.

 

여기서 우리가 짚고 넘어가야 할 부분은 우리가 함수를 실행할 때 setTimeout함수를 사용했다는 부분입니다.

setTimeout함수를 사용한 것이지, function 함수를 만들어서 따로 만들어서 사용한 것이 아니라는 점.

 

그리고 setTimeout 함수가 우선적으로 실행되고, 안의 함수가 실행되었다는 부분입니다.

다시 말해 함수 안에 함수가 존재하며, setTimeout 함수가 사용 한 뒤의 안의 함수가 실행되었다는 부분에서 callBack함수의 실행이 되었다는 것을 정의 내릴 수가 있습니다.

 

 

CallBack함수 사용하기 -2

function start() {
    alert('start');
}

function first() {
    alert('first');
}

만약 두 개의 함수가 있습니다.

 

우리는 이 두 개의 함수가 start가 실행되고 나서 first가 실행되기를 원합니다.

보통 이럴 때, 우리는 start 밑에 first가 실행되는 함수를 넣고는 합니다.

 

코드 정의했을 경우.

코드를 정의했을 경우 이런 모습이 될 수 있습니다.

alert 사용 밑에, first를 넣음으로써, start후에 first가 실행되는 원리입니다.

 

function start() {
    alert('start');
}

function first() {
    alert('first');
}

function second() {
	alert('second');
}

그렇다고 한다면, start가 실행된 후에 first도 실행이 되고.

start가 실행된 후에 second도 실행해야 한다면 어떻게 해야 할까요?

 

start를 두 개를 만들어서 실행한다?라고 한다면 똑같은 코드가 2개가 생겨나는 불상사를 일으키게 됩니다.

 

 

CallBack함수 코드 정의하기

start(first);
start(second);

function start(callTest) {
    alert('start');
    callTest();
}


function second() {
    alert('second');
}

이때 우리 코드는 이렇게 정의할 수가 있습니다.

callBack함수의 코드 정의입니다.

 

callback함수 사용하기

정의를 한다면, 우리는 start함수의 callTest라는 reference를 확인하면 됩니다.

단순하게 reference를 정의를 했지만, 정의된 reference로 함수를 호출하는 것을 확인할 수 있습니다.

 

이 모든 것이 가능한 것이 JavaScript가 가지고 있는 reference의 특징 때문입니다.

reference에는 단순한 값(정수, 실수, 문자 등) 뿐만 아니라 함수 또한 정의를 내릴 수가 있습니다.

 

callback함수 사용하기

코드를 읽으면 다음과 같습니다.

start를 호출할 때, 호출할 함수명을 정의합니다.

 

callTest라는 reference에는 'first'가 정의가 되었습니다.

이를 다시 호출한다면 first()가 정의가 됩니다.

 

우리는 이를 script가 function을 호출하는 방법 중 하나로 배웠기에 코드가 정상적으로 실행되는 것을 확인할 수 있습니다.

 

똑같은 원리로 start(second)를 정의할 경우, function second() 실행되는 것을 확인할 수 있습니다.

 

 

CallBack함수 사용하기 - 사용 예제

이제 callBack함수를 어떻게 사용하는지 알았다면, 우리가 이 함수를 어디서 접해봤는지를 알아보도록 하겠습니다.

//CallBack 함수 응용하기
CallScript(5, function(test) {
    console.log(test);
})

function CallScript(val, re) {
    let test = {
        sb1: val,
        sb2: val*100,
        sb3: val+50
    }

    re(test);
}

CallScript라는 함수를 정의하였습니다.

CallScript는 val과 re라는 reference를 정의합니다.

 

여기서 우리는 이 함수의 특이점을 알 수 있는데, 함수가 종료된 이후에 re함수를 호출하는 것을 확인할 수 있습니다.

 

이를 이제, CallScript에서 호출하는 곳에서 정의를 하도록 해보면 다음과 같이 됩니다.

 

callback함수 사용

CallScript를 부를 때, 함수의 사용을 확인할 수 있습니다.

여기서 우리는 함수 또한 변수에 담을 수 있다는 것을 배웠습니다.

 

그리고 CallScript가 실행되면서 함수의 실행 부분이 있을  것이며, 그 결괏값 Object를 다시 reference함수에 보냈습니다.

이를 통해 알 수 있는 것은 다음과 같습니다.

callBack함수로 받은 결과값

우리는 callback함수를 통해서, 실행순서를 정의를 했으며, 이를 통해서 결괏값을 return 받을 수 있는 함수를 만들었습니다.

 

 

사용하는 이유

장점

1. 코드의 순서를 정의 내리기 편하다.

2. 코드가 가독성이 좋아진다.

3. return 대신 사용할 수 있다.

 

단점

1. 무작위로 사용할 경우, 코드가 더 복잡해진다.