JavaScript 기초 <7. 콜백 함수와 클로저(Closure)의 이해>

자바스크립트 JavaScript

7. 콜백 함수와 클로저(Closure)의 이해 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. 콜백 함수(Callback Function)란?

콜백 함수란 다른 함수의 인자로 전달되어 특정 시점에 실행되는 함수입니다.
즉, 함수가 다른 함수에게 실행을 위임하는 형태라고 볼 수 있습니다.

📌 콜백 함수는 비동기 처리, 이벤트 핸들링, 배열 메서드 등에서 자주 사용됨!

---

 

2. 콜백 함수의 기본 사용법

콜백 함수는 보통 함수의 매개변수(parameter)로 전달되어 실행됩니다.

function processUserInput(callback) {
    let name = "Alice";
    callback(name);
}

function greet(userName) {
    console.log(`안녕하세요, ${userName}님!`);
}

processUserInput(greet); // "안녕하세요, Alice님!"

✅ 콜백 함수의 특징:
✔ 함수를 다른 함수의 매개변수로 전달할 수 있음
✔ 필요할 때 호출되어 원하는 동작을 수행

📌 콜백 함수는 비동기 프로그래밍에서 특히 중요함!

---

 

3. 콜백 함수의 활용 예제

✅ 1) 배열 메서드에서 사용되는 콜백 함수

forEach, map, filter 등 배열 메서드는 콜백 함수를 활용하여 동작합니다.

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((num) => {
    console.log(num * 2);
});

✅ 결과:

 

2
4
6
8
10

✅ 2) 이벤트 핸들러에서 콜백 함수 사용

document.getElementById("btn").addEventListener("click", function () {
    console.log("버튼이 클릭되었습니다!");
});

✅ 결과: "버튼이 클릭되었습니다!"

📌 콜백 함수는 비동기 작업에서 특히 유용함!

---

✅ 여기까지 콜백 함수의 개념과 기본 사용법을 배웠습니다!
👉 "그렇다면, 클로저(Closure)란 무엇이고, 왜 중요한가?"
✅ 2부에서 클로저의 개념, 내부 동작 원리, 실무에서의 활용법까지 상세히 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. 클로저(Closure)란?

클로저란 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)을 함께 기억하는 것을 의미합니다.
즉, 함수가 생성될 당시의 변수를 기억하고 유지할 수 있는 기능입니다.

📌 클로저를 사용하면 외부 함수의 변수를 계속 유지할 수 있음!

---

 

2. 클로저의 기본 예제

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log(`외부 변수: ${outerVariable}, 내부 변수: ${innerVariable}`);
    };
}

const newFunction = outerFunction("Hello");
newFunction("World"); 
// "외부 변수: Hello, 내부 변수: World"

✅ 결과: "외부 변수: Hello, 내부 변수: World"

📌 내부 함수 innerFunction은 outerVariable을 계속 기억하고 있음!

---

 

3. 클로저의 활용 예제

✅ 1) 상태 유지 (카운터 만들기)

function createCounter() {
    let count = 0;
    
    return function () {
        count++;
        console.log(`현재 카운트: ${count}`);
    };
}

const counter = createCounter();
counter(); // "현재 카운트: 1"
counter(); // "현재 카운트: 2"

✅ 클로저를 활용하면 함수 실행 후에도 count 변수가 유지됨!

---

 

4. 클로저의 장점과 주의할 점

✅ 장점:
✔ 데이터 은닉 (외부에서 직접 접근할 수 없는 private 변수 구현)
✔ 상태 유지 (함수 실행 이후에도 변수가 사라지지 않음)

🚨 주의할 점:

• 메모리 누수 가능성 → 불필요한 클로저는 참조를 해제하여 메모리 누수를 방지해야 함

📌 클로저는 강력하지만, 필요할 때만 사용해야 함!

---

✅ 지금까지 클로저의 개념, 내부 동작 원리, 활용법을 상세히 배웠습니다!
👉 "그렇다면, 비동기 프로그래밍에서 콜백 함수 대신 Promise와 async/await는 어떻게 사용할까?"
✅ 다음 회차에서 비동기 처리와 Promise, async/await의 활용법을 배워봅시다! 🚀