JavaScript의 함수의 실행 순서

JavaScript에서 함수의 실행 순서

소개

JavaScript에서 함수의 실행 순서는 코드의 흐름과 함수 호출 시점에 따라 결정됩니다. 이는 함수 선언과 표현식, 호출 스택, 비동기 실행 등의 개념을 이해하는 것이 중요합니다.

함수 선언과 표현식

• 함수 선언(Function Declaration): 함수 선언은 호이스팅(Hoisting)이 되어 코드에서 미리 사용할 수 있습니다.

  greet(); // Hello!
  
  function greet() {
      console.log('Hello!');
  }

• 함수 표현식(Function Expression): 함수 표현식은 선언된 위치에서만 사용 가능하며, 그 이전에는 호출할 수 없습니다.

  greet(); // TypeError: greet is not a function
  
  let greet = function() {
      console.log('Hello!');
  };

호출 스택(Call Stack)

JavaScript 엔진은 호출 스택을 사용하여 함수 호출을 관리합니다. 스택에 함수를 추가하고 실행하며, 실행이 끝나면 스택에서 제거합니다.

1. 메인 실행 컨텍스트(Main Execution Context): 스크립트가 처음 실행될 때 기본적으로 생성되는 컨텍스트입니다.

2. 함수 호출 컨텍스트(Function Execution Context): 함수가 호출되면 스택에 추가되고 실행 컨텍스트가 생성됩니다.

   function first() {
       console.log('First');
       second();
   }
   
   function second() {
       console.log('Second');
       third();
   }
   
   function third() {
       console.log('Third');
   }
   
   first();
   // First
   // Second
   // Third

비동기 실행

JavaScript는 비동기 작업을 처리하기 위해 이벤트 루프와 작업 큐를 사용합니다. 비동기 함수는 실행이 지연되고, 나중에 호출 스택이 비어 있을 때 실행됩니다.

1. 콜백 함수(Callback Function): 비동기 작업이 완료되면 실행되는 함수입니다.

   setTimeout(() => {
       console.log('Asynchronous');
   }, 1000);
   
   console.log('Synchronous');
   // Synchronous
   // Asynchronous (1초 후에 실행)

2. 프로미스(Promise): 비동기 작업을 처리하는 방법으로, 성공과 실패에 따른 콜백을 제공할 수 있습니다.

   let promise = new Promise((resolve, reject) => {
       setTimeout(() => resolve('Promise Resolved'), 1000);
   });
   
   promise.then(value => console.log(value));
   console.log('Waiting for promise');
   // Waiting for promise
   // Promise Resolved (1초 후에 실행)

결론

JavaScript에서 함수의 실행 순서는 함수 선언과 표현식, 호출 스택, 비동기 작업에 의해 결정됩니다. 이를 이해하면 코드의 실행 흐름을 더 잘 파악하고 효율적으로 코드를 작성할 수 있습니다.