브라우저의 JavaScript 코드 실행 과정 - 콜스택과 이벤트 루프

콜스택 (Call Stack)

📝 실행 컨텍스트가 생성되고 콜스택에 쌓이는 과정

function greet(name) {
  let greeting = "Hello, " + name + "!";
  console.log(greeting);
}

function sayHello() {
  greet("Alice");
}

sayHello();

• 1. sayHello() 함수가 호출되면서 새로운 실행 컨텍스트가 생성되고 호출 스택에 추가됩니다.

• 2. sayHello() 함수 내에서 greet("Alice")가 호출되면서 또 다른 실행 컨텍스트가 생성되고 호출 스택에 추가됩니다.

• 3. greet("Alice") 함수 내에서 변수 greeting이 생성되고 값이 할당됩니다.

• 4. console.log(greeting)이 실행되고 호출 스택에서 greet("Alice") 실행 컨텍스트가 제거됩니다.

• 5. sayHello() 함수 내의 모든 코드가 실행되고 호출 스택에서 해당 실행 컨텍스트가 제거됩니다.

이벤트 루프 큐 (Event Loop Queue)

📝 이벤트 루프와 호출 스택 1

setTimeout(() => {
  console.log('hello');
}, 0); // 작업 큐에 콜백이 추가됨

console.log('world');

// 출력 결과:
// world
// hello

• setTimeout 함수가 호출되어 타이머가 설정됩니다. 이때 콜백 함수는 태스크 큐에 추가됩니다.
• 현재 호출 스택: [setTimeout()]

• "world"가 콘솔에 출력됩니다.
• 현재 호출 스택: [setTimeout()]

• "hello"가 콘솔에 출력됩니다.
• 현재 호출 스택: []

📝 이벤트 루프와 호출 스택 2

function greet(name) {
  let greeting = "Hello, " + name + "!";
  console.log(greeting);
}

function sayHello() {
  greet("Alice");
  setTimeout(function() {
    console.log("비동기 함수 실행 완료");
  }, 1000); // 1초 후에 실행됨
}

sayHello();

• 1. sayHello() 함수가 호출되면서 새로운 실행 컨텍스트가 생성되고 호출 스택에 추가됩니다.

• 2. sayHello() 함수 내에서 greet("Alice")가 호출되면서 또 다른 실행 컨텍스트가 생성되고 호출 스택에 추가됩니다.

• 3. greet("Alice") 함수 내에서 변수 greeting이 생성되고 값이 할당됩니다.

• 4. console.log(greeting)이 실행되고 호출 스택에서 greet("Alice") 실행 컨텍스트가 제거됩니다.

• 5. setTimeout 함수가 호출되어 타이머가 설정됩니다. 이때 비동기적으로 실행되므로 호출 스택에는 추가되지 않습니다.

• 6. sayHello() 함수 내의 모든 코드가 실행되었지만, 아직 타이머가 만료되지 않았으므로 이벤트 루프에서 대기합니다.

• 7. 1초 후, 타이머가 만료되면 설정된 콜백 함수가 이벤트 루프 큐에 추가됩니다.

• 8. 이벤트 루프는 호출 스택이 비어있는지 확인하고, 비어있다면 이벤트 루프 큐에서 콜백 함수를 꺼내와 호출 스택에 추가하여 실행합니다.

• 9. 비동기 함수 실행 완료" 메시지가 출력되고 호출 스택에서 해당 실행 컨텍스트가 제거됩니다.

JavaScript 코드 실행이 브라우저의 성능과 사용자 경험에 미치는 영향

// 동기적인 처리 예제
function syncExample() {
  console.log("시작");
  for (let i = 0; i < 1000000000; i++) {
    // 매우 오랜 시간이 걸리는 작업
  }
  console.log("종료");
}

// 비동기적인 처리 예제
function asyncExample() {
  console.log("시작");
  setTimeout(function() {
    console.log("비동기 처리 완료");
  }, 2000); // 2초 후에 콜백 함수 실행
  console.log("종료");
}

// 동기적인 처리 실행
syncExample();

// 비동기적인 처리 실행
asyncExample();