setTimeout

구조

setTimeout(() => {
	//내용
    }, 밀리초);

이때 setTimeout 안에 넣는 함수는 특정 동작(지정한 시간까지 기다리기) 이후에 추가로 실행되는 함수이므로 콜백 함수로 볼 수 있음

예시

setTimeout(() => console.log('hello'), 3000) 을 입력한다면 3초후 콘솔로그가 동작

function func(){
	console.log('hello');
} //를 3.5초 뒤에 실행 하는 방식
setTimeout(func, 3500);

자바스크립트는 타이머가 정확하지 않음

자바스크립트는 기본적으로 한 번에 한 가지 일만 할 수 있습니다. 따라서 이미 다른 많은 일들을 하고 있다면 설정한 시간이 되어도 setTimeout에 지정된 작업이 수행되지 않습니다. 기존에 하고 있던 일이 끝나야 지정한 작업이 실행됩니다

동기 비동기

자바스크립트는 동기식 언어이다. 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말한다. 이러한 동작을 단일 스레드(싱글 스레드), 동기(Synchronous)라고 부른다.
그렇다면 비동기(asynchronous)란 무엇인가 어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식을 말한다

• 자바스크립트는 Memory Heap과 Call Stack으로 이루어진 엔진으로 인해 기본적으로 동기식 언어 이지만 브라우저에서는 자바스크립트 엔진 만으로 동작하지 않는다.
  브라우저 에서는 비동기 처리를 위한 web API인 DOM 조작이나 AJAX를 제공한다

동기와 비동기 동작 원리 정리

동기(Synchronous) 동작 원리

1. 코드가 실행되면 순서대로 Call Stack에 실행할 함수가 쌓인다.(push)

2. 쌓인 반대 순서로 함수가 실행된다.(LIFO)

3. 실행이 된 함수는 Call Stack에서 제거된다(pop)

비동기(asynchronous) 동작 원리

1. Call Stack에서 비동기 함수가 호출되면 Call Stack에 먼저 쌓였다가 Web API(혹은 백그라운드라고도 한다)로 이동한 후 해당 함수가 등록되고 Call Stack에서 사라진다.

2. Web API(백그라운드)에서 비동기 함수의 이벤트가 발생하면, 해당 콜백 함수는 Callback Queue에 push(이동) 된다.

3. 이제 Call Stack이 비어있는지 이벤트 루프(Event Loop)가 확인을 하는데 만약 비어있으면, Call Stack에 Callback Queue에 있는 콜백 함수를 넘겨준다.(push)

4. Call Stack에 들어온 함수는 실행이 되고 실행이 끝나면 Call Stack에서 사라진다.

블록 , 함수 스코프, 클로저