동기, 비동기(콜백함수)

자바스크립트는 기본적으로 동기실행방식이다
a->b->c (a가 다끝나야지만 b가 실행되고 그다음 c실행)
=>이게 동기식

하지만 setTimeOut과 같은 콜백함수를 쓰게 되면 비동기식으로 처리를 하게되고
a->b->c 에서
b가 만약 setTimeout 2초 후 실행되는 함수라면
a-> ->c
b 는 원래 실행되고있던 1차선같은 실행루트에서 빠져서 ->b빼고 바로 c실행
b는 새로운 2차선 실행루트로 갈아타서
바로 2초카운트시작->2초후 실행
이게 비동기식  
자바에 스레드하나 추가하는 느낌..?

만약 b랑 c랑 2초씩 줘서
a-> b(2초) -> c(2초)
이렇게 a실행후
2초후 b실행하고
b실행되면
그때 2초기다렸다가
c실행하게끔
동기식(순차적)으로 실행하게 하려면

콜백지옥이라고 불리는

콜백지옥

콜백안에 콜백을 넣은 형태
function a(()=>{
setTimeout(()=>{},2000)
})

예제를 보자!

function a(){
    setTimeout(()=>{
        console.log('a실행')

    },2000);
}

a();
a();
a();

이렇게 2초 기다렸다가 실행되는 함수가 있는데
이 함수를 세번을 적는다고 치면
2초기다렸다가 실행 그후 2초기다렸다가 실행 또 2초기다렸다가 실행.....
이렇게 될 것 같지만
자바스크립트는 비동기를 만나면

어?! 비동기네???? 그럼 일단 실행은 시켜줄테니,,,
결과값은 나중에 알아서 주렴,, 안녕~

하고 심지에 불만 호다다다닥 키고 가버린다

결과는 ..
2초후 다같이 나옴

function a(){
    setTimeout(()=>{
        console.log('a실행')
        setTimeout(()=>{
            console.log('2초기다렸다가 3초기다렸다가 실행')
        },3000)
    },2000);
}

a();

콜백함수 안에 콜백함수를 넣는다면??!

동기화 효과를 얻게 된다
하지만 꼬라지가 상당히 드러워져서
콜백안애콜백안에콜백안에….
콜백지옥이된다