자바스크립트 콜백 함수

3109 단어 javascript
내가 당신에게 다시 전화하겠다고 말할 때 그것은 당신이 나에게 먼저 전화했다는 의미입니다. Javascript 콜백도 특별하지 않고 이미 수행된 작업에 대한 응답입니다.

간단히 말해서. 콜백은 다른 함수에 인수로 전달되는 함수입니다.

자바스크립트에서는 함수가 순차적으로 실행됩니다. 예를 들어 브라우저 콘솔을 열고 아래 코드 기능을 복사하여 붙여넣습니다.

function display(word){
   console.log(word)
}
function a(){
   display("a");
}
function b(){
   display("b");
}


완료되면 다음 코드 줄을 각각 블록으로 복사합니다.

1:

a();b();
 //prints a then b


2:

b();a();
//prints b then a


콜백을 사용하면 함수를 실행할 시기를 더 잘 제어할 수 있습니다.
예를 들어, 두 개의 입력을 받아 연결된 문자열을 반환하는 함수가 있다고 가정해 보겠습니다. 이 함수는 다음과 같이 작동합니다.

function concatenateStrings(inputA, inputB){
   return `${inputA}${inputB}`;
}
concatenateStrings("a","b") // would return "ab"


이제 연결된 문자열을 인쇄하는 함수를 호출하려고 합니다. 두 가지 옵션이 있습니다.
  • 문자열 연결 함수(concatenateStrings)를 호출하고 결과를 저장한 다음 다른 함수(printString)를 호출하여 결과를 표시할 수 있습니다.

  • function concatenateStrings(inputA, inputB){
       return `${inputA}${inputB}`;
    }
    function printString(str){
      console.log("The concatenated string is %s", str)
    }
    let str = concatenateStrings("a","b");
    printString(str);
    


    2 또는 연결 문자열 함수(concatenateStrings)를 호출하고 연결 함수가 인쇄 문자열 함수(printString)를 호출하도록 할 수 있습니다.

    function printString(str){
      console.log("The concatenated string is %s", str)
    }
    
    function concatenateStrings(inputA, inputA) {
      let str =  `${inputA}${inputB}`;;
      printString(str);
    }
    


    위의 첫 번째 예제의 문제점은 결과를 표시하기 위해 두 개의 함수를 호출해야 한다는 것입니다.

    두 번째 예제의 문제는 (concatenateString) 함수를 호출할 때마다 (printString) 함수도 호출해야 한다는 것입니다.

    이제 콜백을 가져올 시간입니다.

    콜백은 다른 함수에 인수로 전달되는 함수입니다.

    콜백을 사용하면 콜백으로 문자열 연결 함수(concatenateStrings)를 호출하고 연결이 완료된 후 문자열 연결 함수가 콜백을 실행하도록 할 수 있습니다.

    function printString(str){
      console.log("The concatenated string is %s", str)
    }
    function concatenateStrings(inputA, inputA, myCallBack) {
      let str =  `${inputA}${inputB}`;;
      myCallBack(str);
    }
    concatenateStrings("a", "b", printString);
    


    1. 콜백은 우리가 했던 예와 달리 함수를 한 번 호출하는 데 도움이 됩니다.

    let str = concatenateStrings("a","b");
    printString(str);
    


    2. 또한 우리가 했던 예와 달리 유연성을 제공합니다.

    function concatenateStrings(inputA, inputA) {
    let str =  `${inputA}${inputB}`;;
     printString(str);
    }
    


    3. 콜백을 사용하면 함수를 한 번만 호출할 뿐만 아니라 다른 함수를 전달할 수 있는 유연성이 있습니다. 아마도 문자열을 분할하거나 대문자로 변환하는 함수를 호출할 수도 있습니다.예:

    concatenateStrings("a", "b", splitString); 
    
    


    주의: 콜백 매개변수에는 괄호가 없습니다.

    나는 비동기 프로그래밍을 다루고 콜백 함수에 대한 훨씬 더 많은 사용 사례를 보여줄 것입니다.

    좋은 웹페이지 즐겨찾기