[TIL] 230126 동기, 비동기, 콜백

동기 / 비동기

자바스크립트는 동기적인 아이 이다.

호이스팅이 된 이후부터 코드가 작성한 순서부터 동기적으로 실행 된다.

호이스팅 : var변수와 function 선언들이 자동적으로 제일 위로 올리가는것.

• 동기 synchronous : 정해진 순서에 맞게 코드가 실행되는것
• 비동기 asynchronous : 언제 코드가 실행될지 예측할 수 없는것.

동기 비동기의 차이를 알아보기위해 코드를 써보면 이러하다.

javascript

UNFOLDED

console.log('1');
 
// 비동기 (브라우저 API)
setTimeout(() => {
    console.log('2');
}, 1000); // 이것이 콜백 함수
 
console.log('3');
 
/*===Synchronous callback*/
function printImmdeiately(print) {
    print();
}
printImmdeiately(() => console.log('hello'));
 
/*===Asynchronous callback*/
function printWithDelay(print, timeout) {
    setTimeout(print, timeout);
}
printWithDelay(() => console.log('async callback'), 2000);

위 코드 안에는 동기와 비동기가 존재하는데 일단 호이스팅에 인해, var와 함수는 최 상단에서 선언 된다.

javascript

UNFOLDED

/*===Synchronous callback*/
function printImmdeiately(print) {
    print();
}
 
/*===Asynchronous callback*/
function printWithDelay(print, timeout) {
    setTimeout(print, timeout);
}
 
console.log('1');
 
setTimeout(() => {
    console.log('2');
}, 1000);
 
console.log('3');
 
 
printImmdeiately(() => console.log('hello'));
printWithDelay(() => console.log('async callback'), 2000);

실행 순서는 다음과 같다.

javascript

UNFOLDED

console.log('1'); // 동기
setTimeout(() => {console.log('2');}, 1000); //비동기
console.log('3'); //동기
printImmdeiately(() => console.log('hello')); //동기
printWithDelay(() => console.log('async callback'), 2000); //비동기

Callback

이름 그대로 되돌아와서 호출해라는 의미이다.

javascript

UNFOLDED

const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;
 
function calculator(a, b, action) {
    let result = action(a, b);
    console.log(result);
    return result;
}

action은 외부로 부터 주어지는 함수 즉 콜백 함수라고 한다.

 

즉, a와 b는 num으로 가져오 되, action 부분에는 변수 함수로 정해준 이름을 넣어주면 된다.

이것이 콜백함수의 형태이다. (호출하지않고, 주소만 받아옴)

javascript

UNFOLDED

calculator(3, 2, multiply); //6
calculator(1, 3, add); //4
calculator(10, 2, divide); //5

전달된 action은 콜백함수라 함.

 

전달될 당시에 함수를 바로 호출해서 반환된 값을 전달하는것이 아닌 함수를 가리키고 있는 함수의 래퍼런스(참조값)가 전달된다.

그렇기에 함수는 고차함수 안에서 필요한 순간에 호출이 나중에 된다.

javascript

UNFOLDED

function calculate2(a, b, action) {
    if (a < 0 || b < 0) {
        console.log('ERROR: 인자 값이 0보다 작음');
        return; // return undefined
    }
    let result = action(a, b);
    console.log(result);
}
 
// 함수의 래퍼런스를 받아서 필요한 순간에 호출하기 때문에 조건에 맞지 않는다면 영원히 호출되지 않는다.
calculate2(3, 2, multiply);
calculate2(-1, 0, add);

위 예시 이미지를 보면, 삭제 버튼을 눌렀을 때 바로 삭제가 되지 않는데, ajax 요청을 받기도 전에 어드민 유무 검증을 하기 때문에 그냥 return 시켜버리기 때문이다.

 

그래서 아래의 경우는 500ms 정도 걸린다고 가정하였을 때 500ms 이후에 어드민 유무 검증을 하기 때문에, 아래 코드는 사용할 수 있는 코드가 된다.

---

참고 문헌 REFERENCE

드림코딩 자바스크립트

Taeh - 자바스크립트 4일차 | 콜백함수