자바스크립트 함수의 생명주기

📌 자바스크립트 함수의 생명주기 (팩트 정리)

자바스크립트 함수는 실행 흐름에 따라 선언 → 호출 → 실행 → 종료 단계를 거치며 동작한다.

---

🚀 1️⃣ 함수의 생명주기 단계

단계	설명	주요 개념
선언 (Definition)	함수를 정의하는 단계	function 키워드, 함수 표현식, 화살표 함수
호출 (Invocation)	함수를 실행하는 단계	실행 컨텍스트(Execution Context) 생성
실행 (Execution)	함수 내부 코드 실행	콜스택(Call Stack)에 추가됨
종료 (Termination)	return 또는 코드 실행 종료	콜스택에서 제거됨

---

1️⃣ 선언 (Definition) - 함수 정의

✅ 함수가 정의되는 단계
✅ 선언 방식:

• function 키워드 사용
• 함수 표현식 (const func = function() {})
• 화살표 함수 (const func = () => {})

function greet(name) {
    return `Hello, ${name}!`;
}

---

2️⃣ 호출 (Invocation) - 함수 실행 요청

✅ 함수를 실행하는 과정
✅ 함수가 호출되면 실행 컨텍스트(Execution Context)가 생성됨

console.log(greet("Alice")); // "Hello, Alice!"

---

3️⃣ 실행 (Execution) - 함수 내부 코드 실행

✅ 실행 컨텍스트가 콜스택(Call Stack)에 추가됨
✅ 매개변수와 변수가 처리됨

function add(a, b) {
    return a + b;
}
console.log(add(3, 5)); // 8

✅ 실행 과정:
1️⃣ add(3, 5) 호출 → 실행 컨텍스트 생성
2️⃣ return a + b; 실행 → 8 반환
3️⃣ 실행이 끝나면 콜스택에서 제거됨

---

4️⃣ 종료 (Termination) - 함수가 끝나는 시점

✅ return 실행 시 즉시 함수 종료
✅ return이 없으면 undefined 반환
✅ 실행이 끝나면 콜스택에서 제거됨

function example(num) {
    if (num > 10) {
        return "Greater than 10"; // 여기서 종료됨
    }
    console.log("This will only run if num is 10 or less.");
    return "10 or less";
}

console.log(example(15)); // "Greater than 10"
console.log(example(5));  // "10 or less"

✅ return이 실행되면 이후 코드가 실행되지 않음.

---

⚡ 추가 개념 (중요 개념 정리)

1️⃣ 호이스팅 (Hoisting)

✅ function 선언 방식의 함수는 호출 전에 사용 가능
✅ 함수 표현식(익명 함수)은 호이스팅되지 않음

console.log(square(5)); // 25
function square(num) {
    return num * num;
}

console.log(add(5, 3)); // ❌ 오류 발생
const add = function(a, b) { return a + b; };

---

2️⃣ 콜스택 (Call Stack)

✅ 자바스크립트는 실행할 함수를 "스택(Stack) 구조"로 관리
✅ 함수가 호출되면 스택에 추가(push) → 실행 완료 후 제거(pop)

function first() {
    console.log("First");
}
function second() {
    first();
    console.log("Second");
}
second();

✅ 실행 순서:
1️⃣ second() 호출 → 콜스택에 추가
2️⃣ first() 호출 → 콜스택에 추가
3️⃣ "First" 출력 → first() 제거
4️⃣ "Second" 출력 → second() 제거

---

3️⃣ 클로저 (Closure)

✅ 함수가 종료된 후에도 외부 변수를 기억하는 현상
✅ Lexical Scope(정적 스코프) 기반으로 동작

function outer() {
    let count = 0;
    return function inner() {
        count++;
        return count;
    };
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

✅ counter()를 실행할 때마다 count 값이 유지됨 (클로저 동작).

---

📌 return 동작 원리

✅ return이 실행되면 즉시 함수 종료
✅ 이후 코드는 실행되지 않음

function check(num) {
    if (num > 10) {
        return "Too big";
    }
    console.log("Checking number...");
    return "Valid";
}

console.log(check(15)); // "Too big"
console.log(check(5));  // "Checking number..." → "Valid"

✅ return이 실행된 후에는 함수 바디를 빠져나감.

---

📌 최종 정리

개념	설명
선언 (Definition)	함수가 정의되는 과정 (function 키워드, 화살표 함수)
호출 (Invocation)	함수가 실행되는 과정 (실행 컨텍스트 생성)
실행 (Execution)	내부 코드가 실행되고 콜스택에 추가됨
종료 (Termination)	return이 실행되면 즉시 종료, 콜스택에서 제거됨
호이스팅 (Hoisting)	function 선언 방식은 호출 전에 사용 가능, 함수 표현식은 불가능
콜스택 (Call Stack)	실행할 함수가 스택에 추가되고, 실행이 끝나면 제거됨
클로저 (Closure)	함수가 종료된 후에도 외부 변수를 기억하는 현상
return 동작	실행 즉시 함수 종료, 이후 코드 실행 안 됨

✅ 함수의 실행 흐름과 return 동작을 정확히 이해하면, 자바스크립트 실행 원리를 깊이 있게 이해할 수 있음! 🚀

추가 질문 있으면 언제든 물어봐 😊