JavaScript 기초 강의 4편: 함수의 고급 사용법 (클로저, 콜백 함수, 화살표 함수)

1. 클로저(Closure)

클로저는 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합입니다. 클로저는 함수가 외부 함수의 변수에 접근할 수 있는 기능을 제공합니다. 클로저는 자바스크립트에서 정보 은닉이나 함수 내부 상태 유지에 사용됩니다.

클로저의 기본 예제

function createCounter() {
    let count = 0; // 외부 함수의 변수

    return function() { // 내부 함수 (클로저)
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

코드 설명

• createCounter 함수는 count라는 변수를 가지고 있으며, 내부 함수가 반환됩니다.
• 반환된 함수는 count 변수에 접근할 수 있는 클로저로, count의 상태를 유지합니다.

클로저의 유용성

• 클로저는 상태를 캡처하여 다른 곳에서 사용 가능한 독립적인 함수를 제공합니다.
• 비공개 데이터를 유지하고 정보 은닉을 구현할 수 있습니다.

---

2. 콜백 함수(Callback Function)

콜백 함수는 다른 함수의 인자로 전달되어 실행되는 함수입니다. 콜백 함수는 비동기 작업이나 이벤트 처리, 함수의 유연한 확장성에 자주 사용됩니다.

콜백 함수의 기본 예제

function greet(name, callback) {
    console.log(`Hello, ${name}!`);
    callback();
}

function sayGoodbye() {
    console.log("Goodbye!");
}

greet("Alice", sayGoodbye);
// 출력:
// Hello, Alice!
// Goodbye!

비동기 콜백 예제

console.log("1");

setTimeout(() => {
    console.log("2"); // 1초 후 실행
}, 1000);

console.log("3");

// 출력 순서:
// 1
// 3
// 2

콜백 함수의 장점

• 비동기 작업 처리: 콜백 함수는 비동기 작업이 완료된 후 실행되어, 코드가 멈추지 않고 실행될 수 있습니다.
• 유연한 함수 설계: 함수의 동작을 확장하거나 특정 작업 후에 실행할 동작을 지정할 수 있습니다.

---

3. 화살표 함수(Arrow Function)

화살표 함수는 ES6에서 도입된 간결한 함수 표현식으로, function 키워드를 사용하지 않고 함수를 정의할 수 있습니다. 특히 this 키워드의 동작이 기존 함수와 다르게 렉시컬 스코프를 따릅니다.

화살표 함수 기본 문법

// 기존 함수 표현식
const add = function(a, b) {
    return a + b;
};

// 화살표 함수
const addArrow = (a, b) => a + b;

console.log(add(2, 3)); // 5
console.log(addArrow(2, 3)); // 5

여러 줄 블록 코드

한 줄로 표현할 수 없는 함수는 중괄호와 return 키워드를 사용해야 합니다.

const multiply = (a, b) => {
    let result = a * b;
    return result;
};

this의 동작 차이

화살표 함수는 this를 자신의 스코프가 아닌 외부 렉시컬 컨텍스트에서 가져옵니다.

function traditionalFunction() {
    console.log(this);
}

const arrowFunction = () => {
    console.log(this);
};

const obj = {
    method: traditionalFunction,
    arrowMethod: arrowFunction
};

obj.method(); // 객체 obj를 가리킴
obj.arrowMethod(); // 전역 객체(브라우저에서는 window)를 가리킴

코드 설명

• traditionalFunction은 호출한 객체를 가리키지만, arrowFunction은 외부 컨텍스트의 this를 참조합니다.

---

4. 실전 예제: 콜백과 클로저 활용

예제: 비동기 데이터 처리

function fetchData(callback) {
    setTimeout(() => {
        let data = "데이터 로딩 완료!";
        callback(data);
    }, 1000);
}

fetchData(result => {
    console.log(result); // "데이터 로딩 완료!"
});

 

예제: 클로저를 활용한 클릭 이벤트

function createButtonHandler(buttonId) {
    let clickCount = 0;

    return function() {
        clickCount++;
        console.log(`Button ${buttonId} clicked ${clickCount} times`);
    };
}

const buttonHandler = createButtonHandler("btn1");
document.getElementById("btn1").addEventListener("click", buttonHandler);

---

요약

이번 강의에서는 JavaScript 함수의 고급 사용법인 클로저, 콜백 함수, 화살표 함수를 배웠습니다. 클로저는 함수의 상태 유지를 가능하게 하고, 콜백 함수는 비동기 작업을 처리하며, 화살표 함수는 간결하고 명확한 함수 정의를 제공합니다. 다음 강의에서는 JavaScript의 비동기 프로그래밍에 대해 자세히 알아보겠습니다.