2주차 - Javascript 공부

Peace·2021년 10월 2일

이번 주차에는 javascript가 비동기 연산을 할 수 있도록 도와주는 기술(?)들에 대해 공부를 하였다.
CallBack, Promise, Async Await

CallBack

-> 함수에 인자로 전달되는 함수이고, 해당 함수가 끝난 후에 실행되는 함수이다.
callback 함수가 javascript에 비동기로 실행되게 도와준다. callback(task) queue에 들어가 있는 함수이다.

해당 개념은 Functional Programming에서 파생된 개념이다.
다른 함수로 전달할 수 있는 first class 객체이다.(first class에 대해서는 다음 주차에 다뤄보도록 하겠다.)

예제

javascript에서 유명한 비동기 함수인 setTimeout을 통해 callback를 알아보겠다.

setTimeout(function(){
	console.log("hello");
}, 3000); // 3초후에 hello가 console에 찍힘

위에서 예제에서 볼 수 있듯이 setTimeout함수는 callback function을 parameter로 받고, 3초후에 callback function을 실행하는 것을 알 수 있다.
이때, setTimeout함수는 비동기 함수이기 때문에, event loop에 의해 api를 처리하는 곳을 넘겨주고, 해당 작업 즉 3초가 끝난 후에, callback function은 callback queue로 넘어간다.

Promise

-> 비동기 연산의 최종 결과물과 성공 여부를 나타내는 객체이다.
-> callback function이 nested되다보면, 가독성이 떨어지고, 디버깅이 하기 힘든 지점까지 가게되는 데 이것을 callback hell이라고 한다. 이런 문제를 해결하기 위해, 좀 더 가독성을 높이기 위해 promise기술이 나왔다.

Promise State

[출처: https://blog.bitsrc.io/understanding-promises-in-javascript-c5248de9ff8f]

promise의 상태는 3가지 상태가 존재한다.
Pending: 비동기 연산이 완료되기 전의 상태. 성공 여부를 모르는 상태.
Fulfilled(resolved): 비동기 연산이 성공 상태.
Rejected: 비동기 연산이 실행 했을 시 상태

Promise 연산(예제는 추후에 추가)

chaning - 하나의 promise가 끝나면, return 값으로 다른 promise를 연결해 나가는 형식으로 구현한 방식(callback function의 callback hell과 비슷함,,,,,)
all - 모든 promise 작업이 다 될때까지 기다림(한번에 실행함) 배열로 promise값을 전해준다.
race - 하나의 promise작업이 끝난다면, 해당 작업은 끝남.

Async Await

세가지 기술중에 가장 가독성이 좋다.

Async function은 promise 객체를 return하는 함수이다.

await를 사용하여 promise가 실행될 때까지 기다리는 함수이다. 즉, 동기적을 작동하게 한다.

--> 궁금했던 점: 비동기적으로 작동하는 게 javascript의 특징이자 장점인데, 비동기적인 것을 강제로 동기적으로 만든다면, 연산들이 너무 느려지지 않을까? 왜냐면, await가 실행하는 function이 끝날 때 까지, thread가 작동하지 않을 수도 있으니까

해결: await는 async 함수 내에서만 사용할 수 있다. 그렇기 때문에, await를 사용하면, 해당 함수 내에서만 동기적으로 작동하고 멈춰있는 것이다. 만약 다른 작업이 들어 왔을 때는 thread는 다른 작업을 처리한다. 그렇기 때문에, javascript가 비동기 적으로 작동하는 것에는 문제가 없다.

비동기 작업이 여러 번 실행되는 경우에 await를 여러 번 사용하면, 느려질 수 있다.
만약 비동기 작업들이 서로에게 영향을 주지 않는 작업들이라면, promise.all를 사용하여, 비동기 작업들을 동시에 실행시켜 실행 속도를 높일 수 있다.

await는 항상 try, catch문과 함께 사용된다. 만약 await로 설정된 함수의 리턴된 promise가 reject라면 catch문으로 error처리를 하고, 그렇지 않다면 resolved state를 return한다.