Front-End/자바스크립트

[자바스크립트(Java Script)] 콜백 함수

shoney9254 2021. 7. 31. 11:02
반응형

1. 기본 콜백 함수 

콜백 함수란 함수를 함수에서 불러 사용하는것이다.

다른 함수를 불러와서 사용 하기 때문에, 인풋 변수에 함수가 들어가는 것이 특징이다. 

helloFunction 이라는 함수를 getFunction 함수에서 호출 할 수 있다.

소스 코드

function helloFunction() {

    console.log("함수 호출");

}

 

function getFunction(callback) {

    callback();

}

 

getFunction(helloFunction);

getFunction(function () {

    console.log("익명 함수 호출");

});

결과

 

getFunction 함수는 함수를 넣어서 사용하기 때문에, 익명함수도 사용 가능합니다. 

(익명함수는 함수의 이름이 없기 때문에, 일회용 함수)

 

예제에서는 콜백함수를 큰 목적없이 사용했지만, 다른 함수를 사용하기 위한 조건들이나 로직들을 함수에 구현해 준다면 유용하게 사용할 수 있습니다.

 

2. 매개 변수 포함된 콜백함수

콜백함수는 매개변수를 받아서 호출할수 있도록 작성 할 수 있다. 

매개 변수가 없는 콜백함수와 차이는 없지만, 한번 예제를 따라 해보도록 하자

 

소스 코드

function helloFunction(text) {

    console.log(text);

}

 

function getFunction(callback) {

    var text = "콜백 함수를 거치게 되면 텍스트가 추가됩니다.";

    callback(text);

}

 

getFunction(helloFunction);

getFunction(function (str) {

    console.log(str + "(익명함수)");

});

결과

 

3. setTimeout, setInterval 콜백함수

자바 스크립트에서 제공하는 콜백함수이다. 

setTimeout : 설정 시간이 지나면 함수 호출한다.

setInterval :  설정 시간을 주기마다 함수를 호출한다. 

 

3-1) setTimeout 예제

 

3-2) setInternal 예제

 

 

반응형