동기 & 비동기

싱글 스레드 작업 수행 방식

• 자바스크립트는 코드가 작성된 순서대로 작업을 처리함 이전 작업이 진행중 일 때는 다음 작업을 수행하지 않고 기다린다. 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다 이것을 동기 방식의 처리 라고한다.

  동기처리방식의 단점

• 동기적 처리의 단점은 하나의 작업이 너무 오래 걸리게 될 시, 모든 작업이 오래 걸리는 하나의 작업이 종료되기 전 까지 올스탑 되기 때문에 전반적인 흐름이 느려진다.

싱글 쓰레드 대안 - 비동기방식

• 싱그 쓰레드 방식을 이용하면서, 동기적 작업의 단점을 극복하기 위해 여러 개의 작업을 동시에 실행시킴 즉, 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행한다.

동기방식

function taskA () {
    console.log( `A 작업 끝`);
}
taskA();
console.log("코드 끝");

비동기 방식

function taskA (a , b, cb ) {
    setTimeout(function(){
        const res = (a + b);
        cb(res);
    }, 3000);
}
taskA(3, 5, function(res){
    console.log("Task A : " + res);
});
console.log("코드 끝");

//결과값 : TaskA : 8

연습

//전달 받은 파라미터의 2초뒤에 곱하기 2 하기 
function taskB (a, dobble) {
    setTimeout(function(){
        const num = a * 2; 
        dobble(num);
    }, 2000)
}

taskB(3, (num) => {
    console.log("taskB : " + num);
}); 

//결과값 : taskB : 6

function taskC (a, callback) {
    setTimeout(function(){
       const result = a * -1;
       callback(result);
    },1000) 
}

taskC(33 , function callBack(num){
    console.log("taskC : " + num);
})

//결과값 : taskC : -33

// 인자값을 콜백 함수 값을 받아 계산하기

function taskA (a , b, cb ) {
    setTimeout(function(){
        const res = (a + b);
        cb(res);
    }, 3000);
}
console.log("코드 끝");

function taskB (a, dobble) {
    setTimeout(function(){
        const num = a * 2; 
        dobble(num);
    }, 2000)
}

function taskC (a, callback) { 
    setTimeout(function(){
       const result = a * -1;
       callback(result);
    },1000) 
}

taskA(3, 4, function aTask (a_res) {
    console.log("taskA : " + a_res);
    taskB (a_res, function bb (b_res) {
        console.log("taskB : " + b_res)
        taskC (b_res, function cc (c_res) {
            console.log(console.log("taskC : " + c_res));
        })
    });
})