목차
자바스크립트 이벤트 루프
콜 스택
- 함수가 호출되는 순서대로 저장되는 스택
- 함수실행시 호출 스택에 해당함수를 넣음
- 함수의 실행 문맥
- 호출 스택이 비어있다 === 실행할 함수가 남아 있지 않다.
- 자바스크립트는 싱글스레드 방식으로 동작한다 === 콜 스택이 하나다 === 동시에 하나의 일만 처리할 수 있다
힙
- 자바스크립트 파일 실행시 변수, 객체 등 실행에 필요한 데이터들이 메모리에 저장되는 공간
백그라운드( Web APIs )
- 자바스크립트가 비동기적으로 작업을 처리할 수 있게 해주는 공간
- 비동기 작업 : 특정 작업을 시작하고 기다리는 동안 다른 작업을 수행할 수 있도록 해줌
백그라운드에서 실행되는 작업
- 타이머 작업 : setTimeout, setInterval , 백그라운드에서 타이머를 세고, 타이머가 완료되면 태스크 큐로 콜백 함수를 보냄
- 이벤트 기반 작업 : 클릭, 키보드, AJAX요청, XMLHttpRequest 이벤트등 이벤트를 백그라운드에 등록하고 대기하고 있다가 해당 이벤트가 발생하면 발생한 이벤트에 대한 콜백함수를 태스크 큐에 보내 함수를 실행함
- Promise: 백그라운드에서 실행되는 비동기 작업의 결과를 대기함, 완료되면 콜백함수를 태스크 큐로 보내 콜 스택이 비면 태스크 큐에 있는 작업을 실행함 , 이때 태스크큐에 있는 작업의 우선순위는 일반 작업보다 promise의 우선순위가 높음
태스크 큐
- 비동기 작업의 콜백함수 와 관련된 이벤트들을 저장하는 자료구조
- 백그라운드에서 시간이 만료됐거나, 발생한 이벤트들에 대한 작업을 큐에 저장하고 콜스택이 비면 저장된 순서대로 콜백함수를 실행함 => 다른 작업보다 promise의 우선순위를 먼저처리함(새치기)
이벤트루프
- 콜 스택과, 태스크 큐를 주시하고 있다가 호출스택이 비게 되면 태스크 큐에 있는 콜백함수를 콜 스택으로 옮겨주어 코스택에서 콜백 함수가 실행되도록 해주는 역할

콜백 함수
- 함수안에 인자로 들어가 있느 함수
- 콜백 수신 함수에 의해 특정 시점에 실행
- 동기 콜백의 경우 호출 즉시 실행
- 비동기 콜백의 경우 조건을 만족했을때, 이벤트 리스너, 타이머, AJAX요청 등
예시 코드
1.실행 컨텍스트 예측
function multiply(a, b) {
return a * b;
}
function square(n) {
return multiply(n, n);
}
function printSquare(n) {
let squared = square(n);
console.log(squared);
}
printSquare(4);
2.실행 컨텍스트 예측
function second() {
setTimeout(function () {
console.log('고독하구만..');
}, 2000)
}
function first() {
console.log('왜 답장이 없지')
second();
console.log('술이나 마셔야지..')
}
first();
3. 실행 컨텍스트 예측
function aaa() {
setTimeout(() => {
console.log('d');
}, 0)
console.log('c')
}
setTimeout(() => {
console.log('a');
aaa()
}, 0);
setTimeout(() => {
aaa();
console.log('b')
}, 0)
'Javascript' 카테고리의 다른 글
배열 생성 (0) | 2023.10.22 |
---|---|
프로미스와 async/await (0) | 2023.07.26 |
new Date() 객체 (0) | 2023.04.06 |
객체복사 (0) | 2023.04.06 |
자바스크립트 화살표 함수 (0) | 2023.04.05 |
자바스크립트 이벤트 루프
콜 스택
- 함수가 호출되는 순서대로 저장되는 스택
- 함수실행시 호출 스택에 해당함수를 넣음
- 함수의 실행 문맥
- 호출 스택이 비어있다 === 실행할 함수가 남아 있지 않다.
- 자바스크립트는 싱글스레드 방식으로 동작한다 === 콜 스택이 하나다 === 동시에 하나의 일만 처리할 수 있다
힙
- 자바스크립트 파일 실행시 변수, 객체 등 실행에 필요한 데이터들이 메모리에 저장되는 공간
백그라운드( Web APIs )
- 자바스크립트가 비동기적으로 작업을 처리할 수 있게 해주는 공간
- 비동기 작업 : 특정 작업을 시작하고 기다리는 동안 다른 작업을 수행할 수 있도록 해줌
백그라운드에서 실행되는 작업
- 타이머 작업 : setTimeout, setInterval , 백그라운드에서 타이머를 세고, 타이머가 완료되면 태스크 큐로 콜백 함수를 보냄
- 이벤트 기반 작업 : 클릭, 키보드, AJAX요청, XMLHttpRequest 이벤트등 이벤트를 백그라운드에 등록하고 대기하고 있다가 해당 이벤트가 발생하면 발생한 이벤트에 대한 콜백함수를 태스크 큐에 보내 함수를 실행함
- Promise: 백그라운드에서 실행되는 비동기 작업의 결과를 대기함, 완료되면 콜백함수를 태스크 큐로 보내 콜 스택이 비면 태스크 큐에 있는 작업을 실행함 , 이때 태스크큐에 있는 작업의 우선순위는 일반 작업보다 promise의 우선순위가 높음
태스크 큐
- 비동기 작업의 콜백함수 와 관련된 이벤트들을 저장하는 자료구조
- 백그라운드에서 시간이 만료됐거나, 발생한 이벤트들에 대한 작업을 큐에 저장하고 콜스택이 비면 저장된 순서대로 콜백함수를 실행함 => 다른 작업보다 promise의 우선순위를 먼저처리함(새치기)
이벤트루프
- 콜 스택과, 태스크 큐를 주시하고 있다가 호출스택이 비게 되면 태스크 큐에 있는 콜백함수를 콜 스택으로 옮겨주어 코스택에서 콜백 함수가 실행되도록 해주는 역할

콜백 함수
- 함수안에 인자로 들어가 있느 함수
- 콜백 수신 함수에 의해 특정 시점에 실행
- 동기 콜백의 경우 호출 즉시 실행
- 비동기 콜백의 경우 조건을 만족했을때, 이벤트 리스너, 타이머, AJAX요청 등
예시 코드
1.실행 컨텍스트 예측
function multiply(a, b) {
return a * b;
}
function square(n) {
return multiply(n, n);
}
function printSquare(n) {
let squared = square(n);
console.log(squared);
}
printSquare(4);
2.실행 컨텍스트 예측
function second() {
setTimeout(function () {
console.log('고독하구만..');
}, 2000)
}
function first() {
console.log('왜 답장이 없지')
second();
console.log('술이나 마셔야지..')
}
first();
3. 실행 컨텍스트 예측
function aaa() {
setTimeout(() => {
console.log('d');
}, 0)
console.log('c')
}
setTimeout(() => {
console.log('a');
aaa()
}, 0);
setTimeout(() => {
aaa();
console.log('b')
}, 0)
'Javascript' 카테고리의 다른 글
배열 생성 (0) | 2023.10.22 |
---|---|
프로미스와 async/await (0) | 2023.07.26 |
new Date() 객체 (0) | 2023.04.06 |
객체복사 (0) | 2023.04.06 |
자바스크립트 화살표 함수 (0) | 2023.04.05 |