[JS]동기와 비동기

해당 글은 패스트캠퍼스의 김민태의 프론트엔드 아카데미 강의를 수강한 내용을 정리한 것입니다.

동기코드란?

앞에 것이 확정되기 전에 뒤에 코드가 실행할수 없는 상태

앞뒤가 종속적으로 묶여있는 상황

따라서 동기코드는 순차적으로 실행될 수 밖에없다.

function double(x){
    return x*2;
}

const x = double(100);
const y = x;

 

비동기코드란?

동시에 실행될 수 있는 것을 비동기라고 할 수 있다.

function calcValue(a, b) {
    setTimeout(()=>{
        return a + b;
    },100)
}
const r = calcValue(10, 20);
const z = r;

 

비동기와 동기를 한번에 진행시키고 싶다면?

콜백이라는 함수를 통해서 결과값이 일어났을 경우, 순차적으로 실행되게끔 한다.

function calcValue(a, b, cb) {
    setTimeout(() => {
        cb(a + b);
    }, 1000);
}

const r = calcValue(10, 20, (result) => {
    console.log(result);
});

 

Promise

Promise함수를 사용함으로써 Promise인스턴스를 생성한다.

Promise인스턴스는 resolve reject함수를 반환한다.

성공한다면 resolve 실패한다면 reject

const p = new Promise((resolve, reject) => {
    //resolve('OK'); //프로미스의 then이 호출될 때
    setTimeout(() => {
        reject('실패'); //프로미스의 catch가 호출될 때
    }, 2000);
});

p.then(function (ok) {
    console.log(ok);
}).catch(function (error) {
    console.log(error);
});

코드를 보면 콜백함수보다 복잡해보인다 Promise는 근데 어떠한 장점이 있어서 사람들이 권장하는 것일까?

• Then을 계속해서 연결이 가능하다!
• 여러개의 비동기 상황을 순차적으로 엮을 때, 훨씬더 단순하게 풀어내는 매카니즘을 가지고 있다.

const p = new Promise((resolve, reject) => {
    //resolve('OK'); //프로미스의 then이 호출될 때
    setTimeout(() => {
        resolve('OK');
        // reject('실패'); 프로미스의 catch가 호출될 때
    }, 2000);
});

p.then(function (ok) {
    //연결을 받고 promise연결
    console.log('첫번째 성공');
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('두번쨰 성공');
        }, 3000);
    });
})
.then(function (ok) {
    console.log(ok);
})
.catch(function (error) {
    console.log(error);
});

→ 결과

첫번째 성공 (2초 뒤)
두번쨰 성공 (3초 뒤)