[220112] 동기적코드 / 비동기적 코드 / setTimeout(), setInterval()

동기적인 방법와 비동기인 방법은 뭘까?

 

동기적인 코드

자바스크립트 코드는 보통 동기적으로 실행된다.

마치 책을 읽듯이 위에서 아래로, 왼쪽에서 오른쪽으로 읽어내려오며 코드를 한줄한줄 차례로 실행된다는 뜻이다.

한 코드가 실행 될때까지 다음 코드가 실행되지 않는다는 특징이 있다.

장점은 코드를 파악하기 쉽고, 유지보수, 디버깅이 쉽다.

그래서 단순 목적을 지닌 기기의 프로그래밍에 자주 이용된다. (예 : ATM기계, 키오스크, 단순단말기)

단점은 한 코드의 실행이 오래 걸릴경우 손가락만 빨며 끝나기를 기다려야 한다는 것이다.

1. 처리하는데 10초
2. 처리하는데 10분
3. 처리하는데 1초

이와 같은 코드를 실행한다고 치면, 3번 코드가 실행될때까지 총 10분 10초가 걸릴것이다.

만약 이 같은 일이 쇼핑몰 구매페이지에서 일어난다면 어떨까?

아무도 그 사이트에서 물건을 구매하지 않을 것이다.

 

 

 

비동기적인 방법

1. 코드를 읽다가 비동기적인 처리를 하는 코드는 비동기적 처리를 담당하는 코드로 넘겨준다.
2. 읽던 코드를 마저 읽고, 다른 공간에서 비동기적 코드가 완료되면 그때 넘겨 받는다.

이 방법의 장점은 시간이 오래걸리는 코드라도 기다리지 않고 다른 코드들을 실행할 수 있다는 점이다.

1. (동기적) 처리하는데 10초 -> 실행
2. (비동기적) 처리하는데 10분 ----> 다른 곳으로 넘겨둠
3. (동기적) 처리하는데 1초 -> 실행

이와 같은 코드를 실행한다면 1번과 3번이 먼저 실행된 후, 2번이 완료된 후에 값을 돌려줄 것이다.

2번 코드를 실행하기 위해 기다리느라 다른 코드를 실행하지 못한것도 아니고, 2번 코드를 실행하지 않은 것도 아니다.

 

자바스크립트에도 콜백, promise.. 와 같은 비동기적인 코드들이 있다.

그 중에서 자주 쓰이는  setTimeout(), setInterval()을 알아보자.

 

---

 

setTimeout(실행할 코드, 간격을 둘 시간)

호출되면 출력되는 console.log()와 다르게 지정한 시간을 간격으로 두고 실행하는 함수.

clearInterval()로 함수를 중단시킨다.

 

 

setInterval(실행할 코드, 실행하기 전 기다리는 시간)

호출되면 출력되는 console.log()와 다르게 지정한 시간 후에 코드를 실행한다.

보통 자기자신을 반복하는 재귀함수와 함께 사용한다.

clearTimeout()으로 함수를 중단시킨다

 

---

 

코드로 알아보는 차이점

//각각 A,B를 출력하는 코드
function printA(){ console.log('A') }
function printB(){ console.log('B') }

//1초마다 A를 출력하는 코드
setInterval(printA, 1000)

//1초후에 B를 한번만 출력하는 코드
setTimeout(printB, 1000)

결과

A
B
A
A
...(반복)

 

---

 

console.log와 setTimeout()의 차이

function printA(){
    console.log('A')
}

console.log(4);
console.log(3);
setTimeout(printA,1000);
console.log(2);
console.log(1);

결과

4
3
2
1
(1초 기다린 후)
A

 

 

왜 이런 결과가 나올까?

동기적 코드인 console.log()가 먼저 실행되고, 비동기적인 코드가 나중에 실행되기 때문이다.