개발자 90%가 잊고 사는 자바스크립트 동작원리

 

"내가 짠 자바스크립트는 크롬(v8엔진)이 실행해주니깐..."

 

  자바스크립트 동작원리  

 

 

중간에 undefined가 왜 출력되는지 알면 동작원리를 공부할 필요가 없다. 

 

 

이미 그들은 일반인이 아니기 때문이다. 

 

 

1. console.log(1+1)가 먼저 실행되어 결과인 2가 콘솔에 출력된다.

 

2. 다음으로 setTimeout(()=> console.log(2+2), 1000)가 실행된다. setTimeout은 비동기 함수로, 자체로 호출은 되지만, 콜백 함수는 대기 시간이 지난 후에 실행된다. 고로 setTimeout 함수 자체는 아무런 값을 반환하지 않기 때문에 실행 결과로 undefined가 반환된다.

 

3. console.log(3+3)이 실행되고 결과인 6이 콘솔에 출력된다.

 

 

 

 

자바스크립트 동작 배경

console.log(1+1)
setTimeout(() => console.log(2+2), 1000)
console.log(3+3)

 

일단 간략하게 동작 원리를 이해하고 상세 설명을 해보겠다.

 

1. console.log(1+1)가 콜 스택에 추가되어 실행된다.

콜 스택 : [console.log(1+1)]
출력 : 2

 

2. setTimeout이 콜 스택에 추가되지만, 비동기 함수이므로 node나 브라우저 백그라운드에서 대기한다.

콜 스택 : []
백그라운드 : [setTimeout(() => console.log(2 + 2), 1000)]

 

3. console.log(3+3)가 콜 스택에 추가되어 실행된다.

콜 스택: [console.log(3 + 3)]
출력: 6

 

4. 1초 후, setTimeout 콜백이 큐에 추가된다.

큐: [() => console.log(2 + 2)]

 

5. 이벤트 루프가 큐에서 콜백을 가져와 콜 스택에 추가하고 실행한다.

콜 스택: [() => console.log(2 + 2)]
출력: 4

 

요약

위의 코드들이 호출되면, console.log(1+1)과 console.log(3+3)는 즉시 콜 스택에서 실행된다.

비동기 함수인 setTimeout은 백그라운드에서 대기한 후, 대기가 끝나면 큐로 이동하고, 이벤트 루프는 콜 스택이 비어 있을 경우 큐의 콜백 함수를 콜 스택에 추가하여 실행한다. 힙은 객체와 함수의 메모리를 동적으로 할당하고 관리하는 공간이다.  즉 변수를 저장하는 공간이라 생각하면 된다.

 

 

1. 힙(Heap)

힙은 동적 메모리 할당이 이루어지는 영역이다. 자바스크립트 객체와 함수는 힙에 저장된다. 힙은 구조화되지 않은 메모리 풀로, 객체가 생성될 때마다 힙에서 메모리를 할당받는다. 자바스크립트 가비지 컬렉터는 주기적으로 힙을 검사하여 더 이상 참조되지 않은 객체를 메모리에서 해제한다.

 

2. 스택(Stack)

님들 코드 실행해주는 곳임. 스택은 자바스크립트가 함수 호출을 관리하는 LIFO(Last In, First Out) 구조이다. 

 

3. Node.js 또는 브라우저 환경

자바스크립트는 브라우저와 Node.js 환경에서 실행된다. 브라우저는 DOM조작, 이벤트 처리, HTTP 요청 등을 위한 API를 제공하며, Node.js는 파일 시스템 접근, 네트워크 통신, 서버 구축을 등을 위한 API를 제공한다.

 

4. 큐(Queue)

큐는 비동기 작업(ex Ajax 요청 코드, 이벤트리스너, setTimeout 등)의 콜백을 저장하는 대기열이다. 비동기 작업이 완료되면 해당 작업의 콜백 함수가 큐에 추가된다. 자바스크립트는 이벤트 루프를 통해 콜 스택이 비어있을 때 큐에서 콜백 함수를 꺼내 실행한다.

 

5. 이벤트 루프(Event Loop)

이벤트 루프는 자바스크립트의 비동기 처리를 담당하는 핵심 메커니즘이다. 이벤트 루프는 콜 스택과 큐를 모니터링하며, 콜 스택이 비어있을 때 큐에서 콜백 함수를 꺼내 실행한다.

 

 

 

코딩애플🍎 참고