자바스크립의 콜백 함수 – 자바스크립트에서 콜백 함수가 무엇이고 어떻게 사용하는지 알아봅시다

Original article: JavaScript Callback Functions – What are Callbacks in JS and How to Use Them

여러분이 프로그래밍과 익숙하시다면, 함수가 무엇이고 어떻게 사용하는지 알고 계실 겁니다. 그러나 콜백 함수가 뭔지 정확히 알고 있나요? 콜백 함수는 자바스크립트에서 중요한 파트 중 하나이고 콜백 함수가 어떻게 작동하는지 알고 계신다면 자바스크립트를 훨씬 더 잘 다룰 수 있게 될 것입니다.

그래서 이번 글에서는 콜백 함수가 무엇인지 그리고 몇 가지 예제를 통해 자바스크립트에서 어떻게 동작하는지를 알려드리려고 합니다.

콜백 함수가 무엇인가요?

자바스크립트에서는 함수는 객체입니다. 함수의 파라미터로서 객체를 전달할 수 있을까요? 네, 할 수 있습니다.

그래서 우리는 함수의 파라미터로서 다른 함수에 전달하고 감싼 함수의 내부에서 그 함수를 호출합니다. 헷갈리신다고요? 아래에 예시를 보여드리겠습니다.

function print(callback) {
    callback();
}

print() 함수는 다른 함수를 파라미터로 받아서 내부에서 그것을 호출하고 있습니다. 자바스크립트에서는 가능합니다. 그리고 이걸 우리는 “콜백”이라고 하기로 했어요. 다른 함수의 파라미터로써 전달되는 함수를 콜백 함수라고 합니다. 그러나 그게 다는 아니에요.

아래 비디오에서 콜백 함수의 종류를 시청하실 수 있습니다.

콜백 함수가 왜 필요한가요?

자바스크립트는 코드를 위에서 아래로 순차적으로 실행합니다. 그러나, 코드가 다른 행위가 일어난 뒤에 실행되는 경우도 있고 순차적으로 실행되지 않을 때도 있습니다. 이런 걸 비동기 프로그래밍이라고 합니다.

콜백은 태스크가 끝나기 전에 함수가 실행되지 않는 것을 보장합니다. 다르게 말하자면 콜백은 그 태스크가 끝난 직후에 실행될 것입니다. 콜백은 비동기 자바스크립트 코드를 작성할 수 있도록 해주고 여러 문제와 에러들로부터 안전하게 지켜줍니다.

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

콜백을 만드는 방법

위에 설명한 내용들을 이해하기 위해, 간단한 예제로 시작해 보겠습니다. 콘솔에 로그를 찍어보려고 하는데, 이것은 꼭 3초 뒤에 출력되어야 합니다.

const message = function() {
    console.log("This message is shown after 3 seconds");
}

setTimeout(message, 3000);

setTimeout 함수는 자바스크립트에 내장된 함수입니다. 이 함수는 주어진 시간(밀리세컨드 단위) 이후에 함수를 호출하거나 표현식을 평가합니다. 그래서 여기 message 함수는 3초가 지난 후에 호출됩니다. (1초 = 1000 밀리세컨드)

다르게 이야기하자면, message 함수는 어떤 일이 일어나기 전이 아니라 뒤에(여기서는 3초가 지난 후에) 호출됩니다. 그래서 이 message 함수는 콜백 함수의 예시라고 할 수 있죠.

비동기 함수가 무엇인가요?

다르게는 비동기 함수를 다른 함수에 호출하는 방법 말고 함수 내부에 직접적으로 정의하는 방법도 있습니다. 이런 방법은 아래와 같습니다.

setTimeout(function() {
    console.log("This message is shown after 3 seconds");
}, 3000);

보시다시피 여기서 콜백 함수는 이름이 없고 자바스크립트에서 이름이 없는 함수 정의를 "익명 함수"라고 합니다. 이것은 위의 샘플과 정확하게 똑같이 작동합니다.

화살표 함수 모양의 콜백

사용자의 선호에 따라 똑같은 콜백 함수를 ES6 화살표 함수로 사용할 수 있습니다. 화살표 함수는 자바스크립트 내에서 새로운 타입의 함수 표현입니다.

setTimeout(() => {
    console.log("This message is shown after 3 seconds");
}, 3000);

이벤트 처리는요?

자바스크립트는 이벤트 기반 프로그래밍 언어입니다. 콜백 함수를 이벤트 선언을 위해 사용하기도 합니다. 예를 들어 사용자가 버튼을 클릭하기를 바란다고 해봅시다.

<button id="callback-btn">Click here</button>

이번에는 사용자가 버튼을 클릭했을 때 콘솔에 메시지를 남겨 보도록 하겠습니다.

document.queryselector("#callback-btn")
    .addEventListener("click", function() {
      console.log("User has clicked on the button!");
});

첫 번째로 버튼의 id 값을 사용하여 버튼을 선택하고 addEventListener 메소드를 사용하여 이벤트 리스너를 추가했습니다. 이벤트 리스너 함수는 두 개의 파라미터를 필요로 합니다. 첫 번째 파라미터로는 이벤트의 타입인 “클릭”이고 두 번째 파라미터는 버튼이 클릭되었을 때 메시지를 남기는 콜백 함수입니다.

보기와 같이, 콜백 함수는 자바스크립트에서 이벤트 정의를 위해 사용되기도 합니다.

마무리

콜백 함수는 자바스크립트에서 종종 사용됩니다. 이 포스트가 콜백 함수가 정확히 어떤 방식으로 작동하고 더 쉽게 사용하는 방법들을 이해하는 데 도움이 되었으면 합니다. 다음에는 비슷한 주제인 자바스크립트 프로미스에 대해서 새로운 포스트로 배워보실 수 있도록 하겠습니다.

웹 개발에 대해 더 알고 싶으시다면, 제 유튜브를 팔로우 해주셔도 좋습니다!

글 읽어주셔서 감사합니다!