JS Async Await 의 이해

생활 코딩의 강의를 바탕으로 정리한 내용입니다.

 

1. Callback 함수란?

Js에서는 변수에 값 외에도 함수가 들어갈 수 있다. (1급 시민이라는 비유가 재밌었다,)

 

따라서 함수는 함수를 인자로 받을수도 있고, 함수가 함수를 반환할수도 있다.

 

Callback 함수란, 다른 함수의 인자로 입력되어서, 그 함수 내부에서 호출되어 사용되는 함수를 말한다.

 

words = ["안녕하세요", "안녕", "반갑다"]

function callback(element){
	if(elemnt.length >= 3 ){
    	return true;
    }
    else{
    	return false;
    }
}

//배열에 딸린 함수 filter는 callback함수를 인자로 받는다.
words.filter(callback);

예시로 위 함수를 callback함수로 사용한다고 가정하면 words.filter에 callback을 넣어줄 수 있다.

words = ["안녕하세요", "안녕", "반갑다"]

function callback(element){
	return elemnt.length >= 3 ;
}

words.filter(callback);

위와 같이 축약이 가능하며, 이는 아래의 words.filter 내부에서 사용되는 callback 함수와 동일한 기능을 한다.

words = ["안녕하세요", "안녕", "반갑다"]

function callback(element){
	return elemnt.length >= 3 ;
}

//words.filter((element) => {return elemnt.length >= 3} );
words.filter(element => elemnt.length >= 3 );

 

 

 

2. Promise 란?

1) 동기적(Sync) vs 비동기적(Async)

2) 비동기 함수가 반환하는 promise의 대표적인 역할, then과 catch

 

비동기함수.then( function(result){} ) 구조와

비동기함수.catch( function(reason){} ) 구조를 통해

비동기적으로 진행하는 함수의 결과가 나온 이후에 동작을 설계할 수 있다.

 

예시는 아래와 같다

let fatched = fetch('url');

fetched.then( function(result){
	console.log(result)
} )

fetched.catch( function(reason){
	console.log(reason)
} )

위 코드에서 fetch는 어차피 promise를 반환하기 때문에

fetch('url')

.then( function(result){ //result는 곧 response 이다.
	console.log(result)
} )

.catch( function(reason){
	console.log(reason)
} )

구조로 사용된다.

catch는 then이 반환하는 promise를 받는다.

 

추가적으로 .then 안에 있는 response를 가공할때 쓰는 .json도 promise를 반환하는데

지금까지 익힌 내용을 활용하면 다음과 같다.

 

fetch('url')
    .then( function(response){
        response.json()
        .then( function(data){
        	console.log('data', data);
        })
    } )
    .catch( function(reason){
        console.log(reason)
    } )

위를 다시 고쳐주면

fetch('url')
    .then( function(response){
        return response.json();
    } )
    .catch( function(reason){
        console.log(reason)
    } )
    
    .then( function(data){//json()의 then이다.
        console.log('data', data);
    })

이렇게 promise를 외부에서 연결하는 것을 promise chaining, 내부에서 연결하면 promise nested라고 한다.

 

요약하면 아래와 같은 그림

3. Promise 생성하기

 Promise를 반환하는 함수들의 기본 구조는 다음과 같다.

function job(){
	let job1 = new Promise(function(resolve, reject){//call back 함수 두개 인자로
    		setTimeout(function(){ resolve('resolved ok!');
        }, 2000)
    })

	return job1;
}

 

Promise를 return하는 Promise를 만들면,

.then() .then()으로 연속적인 promise chaining 방식을 사용할 수 있다.

예시는 아래와 같다

function job1(){
	return job1 = new Promise(function(resolve, reject){//call back 함수 두개 인자로
    		setTimeout(function(){ resolve('job1 ok!');
        }, 2000)
    })
}

function job2(){
	return job2 = new Promise(function(resolve, reject){//call back 함수 두개 인자로
    		setTimeout(function(){ resolve('job2 ok!');
        }, 2000)
    })
}


//실행해보자
job1().then(function(data){
	
    return job2()
})
.then(function(data){
	//job1의 then이 반환하는 promise를 받아야 시작하는 곳
})

 

4. Async Await

1) 등장 배경

.then으로 관리하는 것보다도 더 쉽게 관리하고자, 코드를 동기적으로 처리하는 것처럼 보이게 만드는 문법이 등장함

 

2) promise로 이전의 함수 실행을 늦추는 방법

function timer(time){
	return new Promise(function(resolve){
    	setTimeout(function(){resolve(time)}, time)
    })
}

console.log(start);

timer(1000).then(function (time){
	console.log("time": time);
    return timer(time + 1000);
}).then(function(time){
	console.log("time": time);
	console.log("sync end");
})

//then외부는 동기적으로 동작하지 않음
console.log("async end");

 

3) 위 프로미스 then 코드로 비교 이해하는 await의 역할

 

function timer(time){
	return new Promise(function(resolve){
    	setTimeout(function(){resolve(time)}, time)
    })
}
//위 함수는 resolve 함수가 인자에 있는 time을 반환하게 됨

async function run(){
	console.log(start);
    
    let time = await timer(1000);
    
    console.log("time": time);
    
    time = await timer(time + 1000);
     
    console.log("time": time);
    
    console.log("sync end");
}

위 예시 코드가 이전 then 연결 코드와 같은 기능을 수행한다는 것은 다음을 의미한다.

 

a) await이 연속으로 나열된 경우, async가 선언된 함수 내부 전체에서 이전 await이 반환하는 promise를 받으면 실행되는,

 then의 연결을 수행하는 것.

 

b) await 함수 사이에 끼어 있는 함수들 또한, then 안에 들어있는 함수처럼 동기적으로 동작한다는 것.

 

c) async가 함수로 감싸주는 이유가 이렇게 await으로 선언한 함수들 모두와, 그 내부에 있는 함수들 모두 동기적으로 동작시켜야 하기 때문에 범위를 지정해주는 것이었다는 것.

 

d) 따라서 async 함수 외부는 동기적으로 동작하지 않기 때문에, async 내부 함수가 동기적으로 동작하는 동안 async 함수를 실행한 외부는 비동기적으로 동작하고 있는 중이라는 것.

 

 

4) 위 결과에 추가로 이야기하자면 async 붙인 함수는 그 자체적으로 다시 promise를 반환하게 되고,

외부에서 다시 await으로 사용할 수 있다.

아니면 .then( function () {} ) 을 붙혀서 마무리할 수도 있다.