[자바스크립트] 동기적 코드와 비동기적 코드

동기적 코드와 비동기적 코드

동기적(Synchronous) 코드

어떤 작업을 요청했을 때 그 작업이 종료될 때까지 기다린 후 다음 작업을 수행하는 방식 (순차적 코드 진행)

요청을 보낸 후 응답 (결과물)을 받아야지만 다음 코드가 동작된다

모든 일은 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 대기하게 된다

• 장점: 코드가 순차적으로 실행되므로 설계가 간단하고 직관적이다
• 단점: 요청에 대한 결과가 나올때까지 다음코드는 대기해야한다

// 동기적인 코드 (순차적으로 실행되는 코드)
console.log(1); // 1번째
console.log(2); // 2번째
console.log(3); // 3번째

 

비동기적(Asynchronous) 코드

언제 코드가 실행될지 예측할수 없는것 (비순차적 코드 진행)

요청을 보낸 후 응답(결과물)이 언제 올지 알 수가 없으며 응답을 기다리는 동안 다른 코드가 실행된다

특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것

• 장점: 결과가 주어지는데 시간이 걸리더라도 그동안 다른 작업이 가능해 효율적이다
• 단점 : 설계가 동기보다 복잡하다

// 콜백(setTimeout)을 이용한 비동기적인 코드(비순차적으로 실행되는 코드)
console.log(1); // 1번째
setTimeout(() => console.log(2), 1000); // 3번째
console.log(3); // 2번째

 

자바스크립트는 동기적인 코드다

호이스팅이 된 후 부터 코드가 작성한 순서에 맞춰 순차적으로 실행된다.

호이스팅(Hoisting)

자바스크립트 코드에 선언된 함수 및 변수를 코드 상단으로 끌어올리는 것

호이스팅의 대상

• var 변수 선언, 함수 선언 (var 변수 선언, 함수 선언만 호이스팅이 되며 할당은 호이스팅이 발생하지 않는다)
• let/const 변수 선언과 함수 표현식(함수를 변수에 저장)에서는 호이스팅이 발생하지 않는다

 

비동기적 코드의 필요성

자바스크립트는 호이스팅이 된 후 부터 코드가 작성한 순서에 맞춰 순차적으로 실행되는 동기적인 코드다. 하지만 때때로 자바스크립트에서 코드가 비동기적으로 실행되어야한다. 자바스크립트에서 비동기 처리가 필요한 이유는 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없기 때문이다.

 

자바스크립트를 비동기적으로 처리하고 싶을때

비동기 처리: 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것

자바스크립트를 비동기적으로 처리할때는 아래의 3가지 방식을 사용할 수 있다. 콜백함수, 프로미스, async/await를 사용하면 특정 로직이 끝났을때 원하는 동작을 실행시킬 수 있다.

1. callback: 함수의 파라미터로 함수를 넘겨주고 이를 내부에서 호출하는 것 (동기적/비동기적 방식 두가지가 있음)
2. promise: 콜백지옥의 단점을 보완하기 위해 사용되는 자바스크립트 비동기 처리에 사용되는 객체
3. async/await: 프로미스 체이닝의 단점을 보완하기 위해서 사용되는 자바스크립트 비동기 처리에 사용되는 syntactic sugar(문법은 같으나 사용자가 더 직관적으로 사용할 수 있는 기능)

 

---

 

Reference

• 엘리의 드림코딩: 자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱 JavaScript Callback | 프론트엔드 개발자 입문편 (JavaScript ES6)
• deb_ming.log: 동기, 비동기란
• 캡틴판교: 자바스크립트 비동기 처리와 콜백 함수