자바스크립트에서 함수의 실행 순서(Execution Order)는 어떻게 결정되나요?

Q1: 자바스크립트에서 함수의 실행 순서는 어떻게 결정되나요?
자바스크립트는 싱글 스레드 기반이며, 코드가 작성된 순서대로 함수 호출을 처리합니다. 함수 호출은 호출 스택(Call Stack)에 쌓이며, 현재 실행 중인 함수가 끝나야 다음 함수가 실행됩니다.

---

Q2: 비동기 함수나 타이머 함수는 어떻게 실행 순서가 결정되나요?
비동기 함수(예: `setTimeout`, `fetch` 등)는 이벤트 큐(Event Queue)에 들어가며, 호출 스택이 비워질 때까지 대기합니다. 호출 스택이 비면 이벤트 루프(Event Loop)가 이벤트 큐에 있는 콜백을 호출 스택으로 옮겨 실행합니다.

---

Q3: 프로미스(Promise)와 async/await의 실행 순서는 어떤가요?
프로미스 `then`이나 `catch`의 콜백은 마이크로태스크 큐(Microtask Queue)에 저장됩니다. 마이크로태스크 큐는 이벤트 큐보다 우선순위가 높아, 현재 콜 스택이 비면 마이크로태스크 큐의 콜백이 먼저 실행됩니다. `async/await`는 내부적으로 프로미스를 사용하므로 비슷한 동작을 합니다.

---

Q4: 즉시 실행 함수(IIFE)는 언제 실행되나요?
즉시 실행 함수는 선언과 동시에 실행되어, 코드가 해당 함수에 도달하는 순간 즉시 호출됩니다. 따라서 코드 순서에 따라 바로 실행됩니다.

---
Q5: 이벤트 핸들러 함수의 실행 순서는 어떻게 되나요?
이벤트 핸들러는 이벤트가 발생하면 이벤트 큐에 콜백이 추가됩니다. 호출 스택이 비면 이벤트 루프가 이를 꺼내 실행합니다. 여러 이벤트가 동시에 대기할 경우 발생 순서대로 처리됩니다.

---

Q6: 중첩된 함수 호출의 실행 순서는 어떻게 되나요?
중첩된 함수 호출 시 가장 안쪽 함수부터 실행되어 결과가 반환되고, 그 다음 바깥쪽 함수들이 차례대로 실행됩니다. 호출 스택은 LIFO(Last In First Out) 방식으로 동작합니다.

---

요약:
- 동기 함수: 코드 순서에 따라 즉시 실행
- 비동기 함수: 호출 스택이 비면 이벤트 큐에서 순서대로 실행
- 프로미스: 마이크로태스크 큐에 저장, 이벤트 큐보다 먼저 실행
- 호출 스택: LIFO 방식으로 함수 호출 관리
- 이벤트 루프: 호출 스택이 비면 큐에 있는 함수 실행 담당

이 원리들을 이해하면 자바스크립트 함수 실행 순서를 예측하고 제어하기 쉽습니다.

자바스크립트에서 함수의 실행 순서는 여러 요소에 의해 결정됩니다.

이 과정은 주로 자바스크립트의 비동기 처리 모델, 스코프, 클로저, 콜백, 프로미스, 그리고 이벤트 루프와 같은 개념에 의해 영향을 받습니다.

아래에서 이러한 요소들을 자세히 설명하겠습니다.

1. 스코프와 함수 호출 자바스크립트는 함수가 호출되는 순서에 따라 실행됩니다.

함수가 호출되면, 해당 함수의 스코프가 생성되고, 그 안에서 정의된 변수와 매개변수에 접근할 수 있게 됩니다.

함수 호출은 순차적으로 이루어지며, 호출된 함수가 완료될 때까지 다음 코드로 넘어가지 않습니다.

```javascript function first() { console.log("First"); } function second() { console.log("Second"); } first(); // "First"가 출력된 후 second(); // "Second"가 출력됨 ``` 위의 예제에서 `first()`가 호출된 후에 `second()`가 호출되므로, "First"가 먼저 출력됩니다.



2. 비동기 처리 자바스크립트는 비동기 처리를 지원합니다.

비동기 함수는 호출된 후 즉시 반환되고, 실제 작업은 백그라운드에서 진행됩니다.

이로 인해 비동기 함수의 실행 순서는 일반적인 동기 함수와는 다르게 동작합니다.



2.1 콜백 함수 콜백 함수는 비동기 작업이 완료된 후 호출되는 함수입니다.

예를 들어, `setTimeout` 함수는 지정된 시간 후에 콜백 함수를 실행합니다.

```javascript console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 1000); console.log("End"); ``` 위의 코드에서 "Start"와 "End"는 즉시 출력되지만, "Timeout"은 1초 후에 출력됩니다.

이는 비동기 작업이기 때문에 `setTimeout`이 호출된 후 다음 코드로 넘어가기 때문입니다.



2.2 프로미스 프로미스는 비동기 작업의 결과를 나타내는 객체입니다.

프로미스는 `then` 메서드를 사용하여 비동기 작업이 완료된 후 실행할 코드를 정의할 수 있습니다.

```javascript console.log("Start"); const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve("Promise resolved"); }, 1000); }); promise.then(result => { console.log(result); }); console.log("End"); ``` 이 경우에도 "Start"와 "End"는 즉시 출력되고, "Promise resolved"는 1초 후에 출력됩니다.



3. 이벤트 루프 자바스크립트는 단일 스레드로 동작하지만, 비동기 작업을 처리하기 위해 이벤트 루프를 사용합니다.

이벤트 루프는 콜 스택과 태스크 큐를 관리하여 비동기 작업의 실행 순서를 결정합니다.

- 콜 스택 : 현재 실행 중인 함수의 호출을 추적합니다.

함수가 호출되면 스택에 추가되고, 함수가 완료되면 스택에서 제거됩니다.

- 태스크 큐 : 비동기 작업이 완료된 후 실행할 콜백 함수들이 대기하는 큐입니다.

이벤트 루프는 콜 스택이 비어있을 때 태스크 큐에서 대기 중인 작업을 콜 스택으로 이동시켜 실행합니다.

이로 인해 비동기 작업이 완료된 후에도 코드의 실행 순서가 보장됩니다.



4. 클로저 클로저는 함수가 외부 스코프의 변수를 기억할 수 있게 해주는 기능입니다.

클로저를 사용하면 함수의 실행 순서와 변수의 상태를 제어할 수 있습니다.

```javascript function makeCounter() { let count = 0; return function() { count++; console.log(count); }; } const counter = makeCounter(); counter(); // 1 counter(); // 2 ``` 위의 예제에서 `makeCounter` 함수는 내부 상태를 가진 클로저를 반환합니다.

`counter` 함수를 호출할 때마다 `count` 변수가 증가하며, 이는 클로저의 특성 덕분입니다.

결론 자바스크립트에서 함수의 실행 순서는 스코프, 비동기 처리, 이벤트 루프, 클로저와 같은 여러 요소에 의해 결정됩니다.

이러한 요소들을 이해하면 자바스크립트의 비동기 처리 모델과 함수 실행 흐름을 보다 잘 파악할 수 있습니다.

이러한 지식은 복잡한 애플리케이션을 개발할 때 매우 유용하며, 코드의 예측 가능성과 유지보수성을 높이는 데 기여합니다.