javascript의 동작 원리

Youje0·2022년 12월 1일

자바스크립트의 동작 원리?

자바스크립트에서 코드를 실행하면 stack이라는 공간으로 들어가는데 이때 이 코드를 순차적으로

한줄씩 처리한다 .

예를 들어서 아래와 같은 코드가 있다고 한다면

console.log(1+1)
console.log(2+2)
console.log(3+3)

출력 결과
2
4
6

출력 결과와 같이 2,4,6의 순서로 출력되는데 이때 이 순서는 위에서 아래로 읽으며 처리하는데

이를 동기처리라고 한다.

문제는 여기서 시간을 지연시킨 후 실행하는 setTimeout() 메소드를 사용했을때 신기한 일이 생기는데

console.log(1+1)
console.log(2+2)
setTimeout(function(){console.log(4+4)},1000)
console.log(3+3)

출력결과
2
4
6
8

놀랍게도 실행 순서가 setTimeout 메소드를 사용한 코드가 제일 밑에 출력된다.

예상한 결과는

2
4
8
6

인데 어째서 이런결과가 나온걸까 ?

그건 자바스크립트의 독특한 동작 원리에 있는데

가장 처음에 서술한대로 기본적으로 모든 코드는 stack에서 위에서 아래로 순차대로 실행하지만

setTimeout 같은 메소드는 실행할 때 stack에 존재하는 것이 아닌 queue 즉 별도의 대기실에서

stack에 존재하는 코드가 모두 실행이 끝났을때 실행한다는 점이다.

이러한 특징 때문에 위와 같이 1000ms 만큼 지연하는 setTimeout 메소드를 사용했을 경우

순서대로 setTimeout 메소드를 제외하고 console이 차례대로 실행 된 것이고

stack이 모두 비어있는 시점에 queue에서 대기중인 setTimeout 메소드가 실행된 것이다.

근데 만약 아래와 같이 setTimeout의 지연시간을 0초로 설정한다면 어떻게 될까 ?

console.log(1+1)
console.log(2+2)
setTimeout(function(){console.log(4+4)},0)
console.log(3+3)

이 또한 마찬가지로 실행 결과는 console이 먼저 실행되고 난 후 setTimeout 메소드가 실행된다.

지연시간과 상관없이 setTimeout 같은 비동기처리하는 함수 등은 전부 값과 관계없이 queue로

넘어가기 때문에 지연시간과 상관없이 stack이 모두 비어있을때 setTimeout 메소드가 실행될 것이다.

console.log에 1+1과 같이 사칙연산이 아니라 아래와 같은 값이 들어가면 어떨까?

let a = 10
console.log(a)

만약 1+1 같은 사칙연산이 아니라 a같은 변수에 담긴 값을 출력할때 변수는 heap이라는 공간에 담기는데

stack에서 heap에 담긴 a의 값을 가져온다.

ㅠㅠ