Fall in IT.

자바스크립트 Callback 사용하는 방법 본문

프로그래밍언어/Javascript & Typescript

자바스크립트 Callback 사용하는 방법

D.Y 2016. 8. 12. 04:35

안녕하세요.


오늘은 자바스크립트에서 Callback을 사용하는 방법에 대해서 알아보겠습니다.


간단하게, Callback이 무엇인지 알아보고, 언제 사용이 되는지 예제를 통해 알아보도록 하겠습니다.



Callback이란?

  • 모든 명령의 실행을 마친 후에 넘겨받은 함수(객체)를 실행 하는 것을 Callback이라고 합니다.
    (자바스크립트에서는 함수도 객체이기 때문에 파라미터로 넘길 수 있습니다. 또한, 넘겨 받은 함수(객체)를 언제 실행할지 결정할  있습니다.)
  • 자바스크립트는 자바와 다르게 비동기적으로 처리되기 때문에, Callback을 구현하여 사용 합니다.

Callback 사용 전
  • 예제 코드

    for(var i = 0; i < 5; i++)  {
        console.log(i);
    }
    console.log("완료");

  • 실행 결과

    0
    1
    2
    3
    4
    완료

  • 예제 코드2

    for( var i = 0; i < 5; i++) {
        setTimeout(function() {
            console.log(i);
        }, 10);
    }
    console.log("완료")

  • 실행 결과

    완료
    5
    5
    5
    5
    5

Callback 사용 후
  • 예제 코드

    // 함수 정의
    repeatConsoleLog = function(i, callback) {
    setTimeout(function() {
    console.log(i);
    if (i >= 5) {
    callback();
    } else {
    repeatConsoleLog(i+1, callback);
    }
    }, 10);
    }

    // 함수 실행
    repeatConsoleLog(0, function() {
    // 함수의 실행이 모두 끝난 뒤에 이곳에 있는 코드가 실행된다.
    console.log('완료');
    });


  • 실행 결과

    0
    1
    2
    3
    4
    완료


모두 즐거운 코딩하세요~



Comments