자바스크립트 - 콜백의 동기와 비동기

callback 함수

= 나중에 실행하는 함수

 

자바스크립트에서 함수는

다른 함수의 인자로 넘길 수 있고(argument),

리턴 값으로 함수를 쓸 수 있고,

변수에 함수를 넣을 수 있다.

이를 일급 객체라고 한다.

 

동기적(순차적) 콜백

function fakeSetTimeout(callback, delay){
    callback();
}

console.log('0');

fakeSetTimeout(function(){
    console.log('어쩌고');
}, 0);

console.log('1');

/*
    0
    어쩌고
    1
*/

 

비동기적 콜백

console.log('0');

setTimeout(function(){
    console.log('저쩌고');
});

console.log('1');

/*
    0
    1
    저쩌고 (저쩌고 함수를 비동기로 실행하기 때문)
*/

 

timer는 외부에 있어서 setTimeout은 timer에 함수를 알려주고,

timer는 함수를 큐에 넣어두고 시간이 될 때 스택으로 가서 실행.

 

onclick도, dom에 콜백을 연결시키는 것.

버튼을 클릭하면 큐에 넣음.

 

 

콜백지옥 promise

function delay(sec, callback){
    setTimeout(()=>{
        callback( new Date().toISOString() );
    }, sec * 1000);
}

delay(1, (result) => {
    console.log(1, result);
});
delay(1, (result) => {
    console.log(2, result);
});
delay(1, (result) => {
    console.log(3, result);
});
// 동시에 실행 됨


delay(1, (result) => {
    console.log(1, result);
    delay(1, (result) => {
        delay(1, (result) => {
            console.log(3, result);
        });
        console.log(2, result);
    });
});
// 순차적으로 실행 됨

// Promise

function delayP(sec){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
           resolve(new Date().toISOString());
        }, sec * 1000);
    });
}

delayP(1).then((result)=>{
    console.log(1, result);
    return delayP(1);
}).then((result)=>{
    console.log(2, result);
});

 

 

 

추상 자료형

큐 (Queue)

데이터를 집어넣을 수 있는 선형 자료

먼저 집어넣은 데이터가 먼저 나온다. FIFO First in First out.

순서대로 처리해야하는 작업을 임시로 저장해두는 버퍼로 많이 사용.

 

스택 (Stack)

데이터를 집어넣을 수 있는 선형 자료형

나중에 넣은 데이터가 먼저 나온다. LIFO Last in first out

서로 관계가 있는 여러 작업을 연달아 수행하면서 이전의 작업 내용을 저장해 둘 필요가 있을 때 사용.

 

트리 (Tree)

여러 데이터가 계층 구조 안에서 서로 연결된 형태

node - 트리 안에 들어있는 각 항목 

child node - 자식노드

parent node - 부모 노드

root node - 뿌리 노드

leaf node - 자식 노드가 없는 노드

ancestor node - 조상 노드 

descendant node - 자손 노드

sibling node - 형제 노드