[JavaScript] 자바스크립트의 콜백이란

자바스크립트에서는 콜백을 많이 사용합니다.

콜백을 많이 사용하다보니 람다식을 통한 익명함수도 많이 사용합니다.

왜 많이 사용하는지 알아보고 사용법을 정리 해봅니다.

 

콜백이란?

콜백이란 피호출자가 호출자의 메서드를 실행해주는 것을 말하며

보통 비동기작업의 끝에 실행됩니다

 

js는 싱글스레드이므로 콜백함수가 이벤트루프를 통해 실행되게 됩니다.

 

js 콜백구현

function printHello() {
    console.log("hello")
}

console.log("start")
setTimeout(printHello, 1000)
console.log("finish")

setTimeout은 지정된 시간 이후에 콜백메서드를 실행시켜주는 js의 내장 함수입니다.

첫번째 아규먼트에는 콜백메서드를, 두번째 매개변수에는 ms의 시간을 넣어줍니다.

 

$ node main.js
start
finish
hello

결과는 start finish가 먼저 출력되고 1초후 hello가 출력됩니다.

setTimeout(피호출자)이 내 printHello 메서드(호출자의 메서드)를 실행해줬습니다.

 

자바스크립트는 메서드를 변수에 할당하거나 아규먼트로 넘길때 ()를 사용하지 않는다는것만 주의합니다.

 

콜백을 직접 호출하는 메서드

function getRandomData(callbcak) {
    let data = Math.random()
    callbcak(data)
}

function myLog(randomData) {
    console.log("랜덤숫자: ", randomData)
}

getRandomData(myLog)

콜백을 직접 호출하는 메서드를 만들면 위와 같이 됩니다.

getRandomData입장에서는 callbcak이 뭔지 모르지만 랜덤숫자를 만들어 그 메서드를 호출하고있습니다.

getRandomData를 호출하는 부분에서 콜백메서드를 아규먼트로 넘겨주고 있습니다.

 

람다와 익명함수를 사용한 콜백

function printHello() {
    console.log("hello")
}

let myFunction1 = printHello

let myFunction2 = function() {
    console.log("world")
}

let myFunction3 = () => {
    console.log("lambda")
}

console.log("start")
setTimeout(myFunction1, 1000)
setTimeout(myFunction2, 1000)
setTimeout(myFunction3, 1000)
setTimeout(() => {console.log("anonymous")}, 1000) // 람다식을 쓰는이유
console.log("finish")

myFunction1 변수에는 함수선언식으로 정의된 printHello라는 메서드를 할당했습니다.

myFunction2 변수에는 함수표현식을 이용해 선언했습니다.

myFunction3 변수에는 함수표현식을 이용하며 람다식을 사용해 선언했습니다.

(람다식은 () => {} 으로 구현하며 ()에는 입력매개변수를, {}에는 함수 몸체, 리턴값을 작성합니다.)

 

setTimeout에 람다식을 사용해 익명함수 만들어 넘겨주면, 함수를 선언하지 않고 콜백메서드로 넘겨줄 수 있습니다.

setTimeout(() => {console.log("anonymous")}, 1000)

익명함수는 재사용은 안되지만 선언을 하지 않아도 되므로 위와같은 상황에서 자주 사용됩니다.