Callback function in JavaScript

 

 

Callback function

 

Callback handles a function execution when you want a function execution right after the return of other functions.

 

 

 

 

Example Code I

var users = ["Megan", "Kathy", "John"];
 
function addUser(username){
    setTimeout(function(){
        users.push(username);
    }, 200);
}
 
function getUsers(){
    setTimeout(function() {
        console.log(users);
    }, 100);
}
 
addUser("Kitty");
getUsers();

 

output 

[ 'Megan', 'Kathy', 'John' ]

 

 

 

 

We only get three users in the above example.

Why? getUsers() function executes ahead of addUser() function. that's not what we want

 

Let's use Callback function to fix the problem

 

 

 

 

 

Example Code II

var users = ["Megan", "Kathy", "John"];
 
function addUser(username, callback){
    setTimeout(function(){
        users.push(username);
        callback();
    }, 200);
}
 
function getUsers(){
    setTimeout(function() {
        console.log(users);
    }, 100);
}
 
addUser("Kitty", getUsers);

 

output

[ 'Megan', 'Kathy', 'John', 'Kitty' ]

 

 

 

 

 

 

 

JavaScript is synchronous(동기적) hoisting(var, function declaration이 제일 위로 올라가는 것)된 이후에 작성순서대로 순차적 실행

Asynchronous(비동기적):  언제 코드가 실행되는지 예측이 불가.  e.g. setTimeout 함수의 사용.

 

Callback: 전달해준 함수를 나중에 불러오는 개념. 지금 당장 실행하지 않고 나중에 다시 불러오라는 명령.

*callback사용이유 -> 비동기처리의 문제를 해결하기 위해 사용.

 

setTimeout(function () {
	console.log('2');
}, 1000);

*위와같은 코드는 callback지옥에 빠질 수 있기때문에 promise 와 async & await가 등장

 

 

 

 

 

 

Reference

https://www.youtube.com/watch?v=xHneyv38Jro