[JS] 자바스크립트의 동작원리

console.log(1)
setTimeout(() => {
	console.log(2)
}, 2000)
console.log(3)

위의 코드를 살펴보자. 과연 어떤 식으로 동작이 될까?
결과는 아래와 같다.

1
3
2

1과 3이 먼저 출력되고 마지막으로 2가 출력되는 것을 볼 수 있다.
이 과정을 이해하려면 자바스크립트의 동작 원리에 대하여 이해해야 한다.

출처 : https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

자바스크립트의 구성 요소

• Stack : 자바스크립트 코드가 실행되면 stack 프레임이 쌓이는 장소
  stack에 새로운 프레임이 들어오고 실행이 완료되면 나가게 된다.
  드럼통처럼 생긴, First In Last Out 구조인 자료형이다.
  즉, 처음에 들어간 코드가 가장 마지막에 나가게 된다.(그림 참고)

• Heap : 동적으로 생성된 변수들은 메모리 heap에 저장이 된다.
  일반적으로 전역 변수, 객체, 문자열 등과 같은 유형들이 저장된다.

• Queue : queue에서는 setTimeout, setInterval과 같은 Timing API들을 저장한다.
  쉽게 생각해보면, Timing API함수를 queue에 저장시켜놓고 대기를 하다가, stack이 비게 되면 들어가게 되는 구조이다.

자바스크립트는 Stack이 하나이기 때문에 이미 Stack안에 task가 있다면 다른 task는 대기하게 된다.

위의 코드를 보면 console.log(1)이 먼저 실행되고,
setTimeout API는 queue에서 대기한 후,
console.log(3)이 먼저 실행되고 stack이 비게 되면,
queue에서 대기하던 setTimeout API가 stack으로 들어가서 실행이 된 것이다.

---

Async와 Await

async와 await은 동기적인 자바스크립트를 비동기적으로 처리하기 위해 사용한다.
fetch는 promise를 리턴한다.
await은 promise가 resolve 또는 reject를 호출할 때 까지 기다려준다.
await을 사용하려면 반드시 함수를 async로 선언해주어야 한다.

Json : 서버 클라이언트 통신에서 많이 쓰이는 데이터 타입(png, jpg와 같이 하나의 데이터 타입). 간단한 텍스트인데 객체랑 같아서 나중에 읽어오기도 편하다. 그래서 json타입을 서버통신시 많이 사용한다.

❗️API를 호출하고 싶다면

const callAPI = async() =>{
    let url = new URL(`url주소`)
    let header = new Headers({헤더내용}) // 이건 필요한 경우만
    let response = await fetch(url,{headers:header})
    let data = awaitresponse.json()
}