자바 스크립트 콜백 함수 – JS의 콜백이란 무엇이며 어떻게 사용 하는가

프로그래밍에 익숙하다면 함수의 기능과 사용 방법을 이미 알고있을 것입니다. 그러나 콜백 함수는 무엇입니까? 콜백 함수는 JavaScript의 중요한 부분이며 콜백이 작동하는 방식을 이해하면 JavaScript에서 훨씬 나아질 것입니다.

따라서이 게시물에서는 몇 가지 예제를 통해 콜백 함수가 무엇인지, JavaScript에서이를 사용하는 방법을 이해하는 데 도움을 드리고자합니다.

콜백 기능이란?

JavaScript에서 함수는 객체입니다. 객체를 매개 변수로 함수에 전달할 수 있습니까? 예.

따라서 함수를 매개 변수로 다른 함수에 전달하고 외부 함수 내에서 호출 할 수도 있습니다. 복잡하게 들리나요? 아래 예에서이를 보여 드리겠습니다.

function print(callback) { callback(); }

print () 함수는 다른 함수를 매개 변수로 사용하여 내부에서 호출합니다. 이것은 JavaScript에서 유효하며 "콜백"이라고 부릅니다. 따라서 다른 함수에 매개 변수로 전달되는 함수는 콜백 함수입니다. 하지만 그게 다가 아닙니다.

아래에서 콜백 함수의 비디오 버전을 볼 수도 있습니다.

JavaScript는 하향식 순서로 코드를 순차적으로 실행합니다. 그러나 다른 일이 발생한 후에 코드가 실행 (또는 실행되어야 함)되는 경우도 있고 순차적으로 실행되지 않는 경우도 있습니다. 이를 비동기 프로그래밍이라고합니다.

콜백은 작업이 완료되기 전에 함수가 실행되지 않고 작업이 완료된 직후에 실행되도록합니다. 비동기 JavaScript 코드를 개발하는 데 도움이되며 문제와 오류로부터 안전합니다.

JavaScript에서 콜백 함수를 생성하는 방법은 매개 변수로 다른 함수에 전달한 다음 어떤 일이 발생하거나 일부 작업이 완료된 직후에 다시 호출하는 것입니다. 방법을 봅시다…

위에서 설명한 내용을 이해하기 위해 간단한 예부터 시작하겠습니다. 콘솔에 메시지를 기록하고 싶지만 3 초 후에 거기에 있어야합니다.

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

JavaScript에는 "setTimeout"이라는 기본 제공 메서드가 있습니다.이 메서드는 함수를 호출하거나 주어진 시간 (밀리 초) 후에 표현식을 평가합니다. 그래서 여기에서 3 초가 지난 후에 "message"함수가 호출됩니다. (1 초 = 1000 밀리 초)

즉, 메시지 함수는 어떤 일이 발생한 후 (이 예에서는 3 초가 지난 후) 호출되지만 이전에는 호출되지 않습니다. 따라서 메시지 함수는 콜백 함수의 예입니다.

또는 함수를 호출하는 대신 다른 함수 내부에 직접 정의 할 수 있습니다. 다음과 같이 표시됩니다.

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

보시다시피 여기서 콜백 함수는 이름이 없으며 JavaScript에서 이름이없는 함수 정의를 "익명 함수"라고합니다. 이것은 위의 예와 똑같은 작업을 수행합니다.

원하는 경우 JavaScript에서 새로운 유형의 함수 인 ES6 화살표 함수와 동일한 콜백 함수를 작성할 수도 있습니다.

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

JavaScript는 이벤트 기반 프로그래밍 언어입니다. 또한 이벤트 선언을 위해 콜백 함수를 사용합니다. 예를 들어 사용자가 버튼을 클릭하기를 원한다고 가정 해 보겠습니다.

Click here

이번에는 사용자가 버튼을 클릭 할 때만 콘솔에 메시지가 표시됩니다.

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

따라서 여기서는 먼저 ID로 버튼을 선택한 다음 addEventListener 메소드로 이벤트 리스너를 추가합니다. 2 개의 매개 변수가 필요합니다. 첫 번째는 유형 인 "클릭"이고 두 번째 매개 변수는 버튼을 클릭 할 때 메시지를 기록하는 콜백 함수입니다.

보시다시피 콜백 함수는 JavaScript의 이벤트 선언에도 사용됩니다.

콜백은 JavaScript에서 자주 사용되며,이 게시물이 실제로 수행하는 작업과 더 쉽게 작업하는 방법을 이해하는 데 도움이되기를 바랍니다. 다음으로, 새 게시물에서 설명한 것과 유사한 주제 인 JavaScript Promise에 대해 배울 수 있습니다.

웹 개발에 대해 더 알고 싶다면 유튜브에서 저 를 따라 오세요 !

읽어 주셔서 감사합니다!