// 🌍 전역 스코프 예시
var globalMessage = "나는 어디서든 보여!";

function showMessage() {
    console.log(globalMessage); // ✅ 접근 가능
}

// ⚙️ 함수 스코프 예시
function outerFunction() {
    var functionScoped = "나는 함수 안에서만 살아!";
    console.log(functionScoped); // ✅ 접근 가능
}
// console.log(functionScoped); // ❌ ReferenceError!

// 📦 블록 스코프 예시 (ES6+)
{
    let blockScoped = "나는 블록 안에서만!";
    const alsoBlock = "나도 블록 안에서만!";
    console.log(blockScoped); // ✅ 접근 가능
}
// console.log(blockScoped); // ❌ ReferenceError!

// ⚠️ var의 함정 — 블록을 무시해버림!
{
    var sneaky = "나는 블록을 탈출해!";
}
console.log(sneaky); // ✅ "나는 블록을 탈출해!" — var는 블록 스코프 무시!

// 렉시컬 스코프 예시
let name = "전역 이름";

function outer() {
    let name = "outer의 이름";
    
    function inner() {
        // inner는 outer 안에서 '정의'되었으므로
        // outer의 name에 접근할 수 있어!
        console.log(name); // "outer의 이름"
    }
    
    return inner;
}

const myFunc = outer();
myFunc(); // "outer의 이름" 출력

// 왜? inner가 outer 안에서 '정의'되었기 때문!
// myFunc()가 어디서 호출되든 상관없어.

// 스코프 체인 실제 예시
const globalVar = "나는 전역!";

function outer() {
    const outerVar = "나는 outer!";
    
    function middle() {
        const middleVar = "나는 middle!";
        
        function inner() {
            // inner 스코프에서 변수 탐색 순서:
            // 1. inner 스코프 → 없음
            // 2. middle 스코프 → 없음  
            // 3. outer 스코프 → 없음
            // 4. 전역 스코프 → ✅ 발견!
            console.log(globalVar);  // "나는 전역!"
            
            // middle 스코프에서 발견!
            console.log(middleVar);  // "나는 middle!"
            
            // outer 스코프에서 발견!
            console.log(outerVar);   // "나는 outer!"
        }
        
        inner();
    }
    
    middle();
}

outer();

// 클로저를 이용한 데이터 은닉
function createBankAccount(initialBalance) {
    // 이 변수는 외부에서 직접 접근 불가!
    let balance = initialBalance;
    let transactionHistory = [];
    
    return {
        // 잔액 조회 (읽기만 가능)
        getBalance() {
            return balance;
        },
        
        // 입금
        deposit(amount) {
            if (amount <= 0) {
                throw new Error("입금액은 0보다 커야 합니다!");
            }
            balance += amount;
            transactionHistory.push({
                type: "입금",
                amount,
                balance,
                date: new Date().toISOString()
            });
            return `입금 완료! 현재 잔액: ${balance}원`;
        },
        
        // 출금
        withdraw(amount) {
            if (amount > balance) {
                throw new Error("잔액이 부족합니다!");
            }
            balance -= amount;
            transactionHistory.push({
                type: "출금",
                amount,
                balance,
                date: new Date().toISOString()
            });
            return `출금 완료! 현재 잔액: ${balance}원`;
        },
        
        // 거래 내역 조회
        getHistory() {
            return [...transactionHistory]; // 복사본 반환 (원본 보호!)
        }
    };
}

const myAccount = createBankAccount(10000);

console.log(myAccount.getBalance()); // 10000
console.log(myAccount.deposit(5000)); // "입금 완료! 현재 잔액: 15000원"
console.log(myAccount.withdraw(3000)); // "출금 완료! 현재 잔액: 12000원"

// balance에 직접 접근 불가!
console.log(myAccount.balance); // undefined — 보호됨! 🔒
// myAccount.balance = 999999; // 이래도 실제 balance는 변하지 않아!

// 모듈 패턴 (IIFE + 클로저)
const UserModule = (function() {
    // private 변수들
    let users = [];
    let nextId = 1;
    
    // private 함수
    function validateUser(user) {
        return user.name && user.email && user.email.includes('@');
    }
    
    // public API 반환
    return {
        addUser(name, email) {
            const user = { id: nextId++, name, email };
            if (!validateUser(user)) {
                throw new Error("유효하지 않은 사용자 정보입니다!");
            }
            users.push(user);
            return user;
        },
        
        getUser(id) {
            return users.find(u => u.id === id) || null;
        },
        
        getAllUsers() {
            return [...users]; // 복사본 반환
        },
        
        getUserCount() {
            return users.length;
        }
    };
})(); // IIFE: 즉시 실행 함수 표현식

UserModule.addUser("김철수", "kim@example.com");
UserModule.addUser("이영희", "lee@example.com");

console.log(UserModule.getUserCount()); // 2
console.log(UserModule.getUser(1)); // { id: 1, name: "김철수", ... }

// users 배열에 직접 접근 불가!
console.log(UserModule.users); // undefined 🔒

// 팩토리 함수 예시 1: 승수 생성기
function createMultiplier(multiplier) {
    // multiplier를 클로저로 기억!
    return function(number) {
        return number * multiplier;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);
const tenTimes = createMultiplier(10);

console.log(double(5));    // 10
console.log(triple(5));    // 15
console.log(tenTimes(5));  // 50

// 팩토리 함수 예시 2: API 요청 생성기
function createApiClient(baseUrl, apiKey) {
    // baseUrl과 apiKey를 클로저로 기억!
    const headers = {
        'Authorization': `Bearer ${apiKey}`,
        'Content-Type': 'application/json'
    };
    
    return {
        async get(endpoint) {
            const response = await fetch(`${baseUrl}${endpoint}`, {
                method: 'GET',
                headers
            });
            return response.json();
        },
        
        async post(endpoint, data) {
            const response = await fetch(`${baseUrl}${endpoint}`, {
                method: 'POST',
                headers,
                body: JSON.stringify(data)
            });
            return response.json();
        }
    };
}

// 각 서비스별 클라이언트 생성
const userApi = createApiClient('https://api.example.com/users', 'user-api-key-123');
const productApi = createApiClient('https://api.example.com/products', 'product-api-key-456');

// 사용할 때는 간단하게!
// userApi.get('/profile');
// productApi.post('/create', { name: '새 상품' });

// 부분 적용 (Partial Application)
function partial(fn, ...presetArgs) {
    return function(...laterArgs) {
        return fn(...presetArgs, ...laterArgs);
    };
}

// 예시: 로그 함수
function log(level, timestamp, message) {
    console.log(`[${level}] ${timestamp}: ${message}`);
}

// 레벨을 미리 고정한 로거 생성
const errorLog = partial(log, 'ERROR');
const infoLog = partial(log, 'INFO');
const warnLog = partial(log, 'WARN');

// 타임스탬프도 고정한 로거
const now = new Date().toISOString();
const errorLogNow = partial(log, 'ERROR', now);

errorLog('2024-01-01', '서버 오류 발생!');
// [ERROR] 2024-01-01: 서버 오류 발생!

infoLog('2024-01-01', '사용자 로그인 성공');
// [INFO] 2024-01-01: 사용자 로그인 성공

errorLogNow('데이터베이스 연결 실패');
// [ERROR] 2024-01-01T...: 데이터베이스 연결 실패

// 커링 기본 개념
// 일반 함수
function add(a, b, c) {
    return a + b + c;
}
console.log(add(1, 2, 3)); // 6

// 커링된 함수
function curriedAdd(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
        };
    };
}
// 또는 화살표 함수로 더 간결하게:
const curriedAddArrow = a => b => c => a + b + c;

console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAddArrow(1)(2)(3)); // 6

// 커링의 진짜 힘: 재사용 가능한 함수 조각 만들기
const add10 = curriedAdd(10);
const add10and20 = add10(20);

console.log(add10(5)(3));    // 18
console.log(add10and20(5));  // 35
console.log(add10and20(10)); // 40

// 실용적인 커링 예시: 데이터 필터링
const filter = predicate => array => array.filter(predicate);
const map = transform => array => array.map(transform);

const isAdult = user => user.age >= 18;
const getName = user => user.name;

const getAdultNames = array => map(getName)(filter(isAdult)(array));

const users = [
    { name: "김철수", age: 25 },
    { name: "이영희", age: 16 },
    { name: "박민준", age: 30 },
    { name: "최지은", age: 15 }
];

console.log(getAdultNames(users)); // ["김철수", "박민준"]

// 범용 curry 함수 구현
function curry(fn) {
    return function curried(...args) {
        // 충분한 인자가 모이면 실행
        if (args.length >= fn.length) {
            return fn.apply(this, args);
        }
        // 아직 인자가 부족하면 더 받을 준비
        return function(...args2) {
            return curried.apply(this, args.concat(args2));
        };
    };
}

// 사용 예시
const curriedMultiply = curry((a, b, c) => a * b * c);

console.log(curriedMultiply(2)(3)(4));    // 24
console.log(curriedMultiply(2, 3)(4));    // 24
console.log(curriedMultiply(2)(3, 4));    // 24
console.log(curriedMultiply(2, 3, 4));    // 24

// 실용 예시: 가격 계산기
const calculatePrice = curry((taxRate, discount, basePrice) => {
    return basePrice * (1 + taxRate) * (1 - discount);
});

const withKoreanTax = calculatePrice(0.1);  // 10% 세금
const withKoreanTaxAndDiscount = withKoreanTax(0.2);  // 20% 할인

console.log(withKoreanTaxAndDiscount(10000)); // 8800
console.log(withKoreanTaxAndDiscount(50000)); // 44000

// 메모이제이션 없는 피보나치 — 엄청 느려!
function fibSlow(n) {
    if (n <= 1) return n;
    return fibSlow(n - 1) + fibSlow(n - 2);
}
// fibSlow(40) → 약 1억 번 이상의 함수 호출! 😱

// 메모이제이션 적용 피보나치
function memoize(fn) {
    const cache = new Map(); // 클로저로 캐시 유지!
    
    return function(...args) {
        const key = JSON.stringify(args);
        
        if (cache.has(key)) {
            console.log(`캐시 히트! key: ${key}`);
            return cache.get(key);
        }
        
        const result = fn.apply(this, args);
        cache.set(key, result);
        return result;
    };
}

// 메모이제이션된 피보나치
const fib = memoize(function(n) {
    if (n <= 1) return n;
    return fib(n - 1) + fib(n - 2); // 재귀 호출도 캐시 활용!
});

console.time('fib(40)');
console.log(fib(40)); // 102334155
console.timeEnd('fib(40)'); // 거의 즉시!

console.time('fib(40) 재호출');
console.log(fib(40)); // 102334155 — 캐시에서 즉시 반환!
console.timeEnd('fib(40) 재호출'); // 0ms에 가까움!

// 실용적인 메모이제이션 예시: API 결과 캐싱
function createCachedFetcher(ttl = 5 * 60 * 1000) { // 기본 5분 캐시
    const cache = new Map();
    
    return async function fetchWithCache(url) {
        const now = Date.now();
        
        if (cache.has(url)) {
            const { data, timestamp } = cache.get(url);
            
            // TTL 내에 있으면 캐시 반환
            if (now - timestamp < ttl) {
                console.log(`캐시에서 반환: ${url}`);
                return data;
            }
            
            // TTL 만료 시 캐시 삭제
            cache.delete(url);
        }
        
        console.log(`실제 요청: ${url}`);
        const response = await fetch(url);
        const data = await response.json();
        
        cache.set(url, { data, timestamp: now });
        return data;
    };
}

const cachedFetch = createCachedFetcher(60000); // 1분 캐시

// 같은 URL 여러 번 호출해도 1분 내에는 캐시 반환!
// await cachedFetch('https://api.example.com/users');
// await cachedFetch('https://api.example.com/users'); // 캐시 반환!

// 고급: WeakMap을 이용한 메모이제이션 (객체 인자용)
function memoizeWithWeakMap(fn) {
    const cache = new WeakMap();
    
    return function(obj) {
        if (cache.has(obj)) {
            return cache.get(obj);
        }
        const result = fn(obj);
        cache.set(obj, result);
        return result;
    };
}

// ❌ 유명한 클로저 버그 — var를 쓸 때
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); // 5, 5, 5, 5, 5 출력! 😱
    }, 1000);
}
// 왜? var는 함수 스코프라 루프가 끝난 후 i = 5가 되어버림!
// 모든 setTimeout 콜백이 같은 i를 참조하고 있어!

// ✅ 해결책 1: let 사용 (블록 스코프)
for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); // 0, 1, 2, 3, 4 출력! ✅
    }, 1000);
}
// let은 블록 스코프라 각 반복마다 새로운 i가 생성돼!

// ✅ 해결책 2: IIFE로 클로저 생성 (레거시 코드 대응)
for (var i = 0; i < 5; i++) {
    (function(j) { // j는 각 반복의 i 값을 캡처!
        setTimeout(function() {
            console.log(j); // 0, 1, 2, 3, 4 출력! ✅
        }, 1000);
    })(i);
}

// ✅ 해결책 3: bind 사용
for (var i = 0; i < 5; i++) {
    setTimeout(console.log.bind(null, i), 1000);
    // 0, 1, 2, 3, 4 출력! ✅
}

// 실전 예시: 버튼 클릭 핸들러에 데이터 바인딩
function setupButtons(items) {
    items.forEach((item, index) => {
        const button = document.createElement('button');
        button.textContent = item.name;
        
        // 클로저로 item과 index를 캡처!
        button.addEventListener('click', function() {
            console.log(`클릭된 아이템: ${item.name}, 인덱스: ${index}`);
            handleItemClick(item);
        });
        
        document.body.appendChild(button);
    });
}

// 고급: 이벤트 핸들러 팩토리
function createClickHandler(itemId, onSuccess, onError) {
    let clickCount = 0; // 클로저로 클릭 횟수 추적!
    
    return async function handleClick(event) {
        clickCount++;
        console.log(`${itemId} 클릭 횟수: ${clickCount}`);
        
        // 더블 클릭 방지
        if (clickCount > 1) {
            console.log('이미 처리 중입니다!');
            return;
        }
        
        try {
            const result = await processItem(itemId);
            onSuccess(result);
        } catch (error) {
            onError(error);
        } finally {
            clickCount = 0; // 처리 완료 후 리셋
        }
    };
}

// 이벤트 위임 + 클로저
function createEventDelegator(container, selector, handler) {
    // handler를 클로저로 캡처
    container.addEventListener('click', function(event) {
        const target = event.target.closest(selector);
        if (target && container.contains(target)) {
            handler(target, event);
        }
    });
}

// 클로저를 이용한 반응형 상태 관리
function createReactiveState(initialState) {
    let state = { ...initialState };
    const listeners = new Map();
    
    function notify(key, newValue, oldValue) {
        if (listeners.has(key)) {
            listeners.get(key).forEach(listener => {
                listener(newValue, oldValue);
            });
        }
        // 전체 변경 리스너
        if (listeners.has('*')) {
            listeners.get('*').forEach(listener => {
                listener({ key, newValue, oldValue });
            });
        }
    }
    
    return {
        // 상태 읽기
        get(key) {
            return state[key];
        },
        
        // 상태 쓰기 (변경 감지!)
        set(key, value) {
            const oldValue = state[key];
            if (oldValue === value) return; // 변경 없으면 무시
            
            state[key] = value;
            notify(key, value, oldValue);
        },
        
        // 변경 구독
        subscribe(key, listener) {
            if (!listeners.has(key)) {
                listeners.set(key, new Set());
            }
            listeners.get(key).add(listener);
            
            // 구독 취소 함수 반환 (클로저!)
            return function unsubscribe() {
                listeners.get(key).delete(listener);
            };
        },
        
        // 전체 상태 스냅샷
        getState() {
            return { ...state };
        }
    };
}

// 사용 예시
const store = createReactiveState({
    count: 0,
    userName: "김철수",
    isLoggedIn: false
});

// count 변경 구독
const unsubCount = store.subscribe('count', (newVal, oldVal) => {
    console.log(`count 변경: ${oldVal} → ${newVal}`);
});

// 전체 변경 구독
store.subscribe('*', ({ key, newValue }) => {
    console.log(`상태 변경 감지: ${key} = ${newValue}`);
});

store.set('count', 1);
// "count 변경: 0 → 1"
// "상태 변경 감지: count = 1"

store.set('userName', '이영희');
// "상태 변경 감지: userName = 이영희"

// 구독 취소
unsubCount();
store.set('count', 2); // count 리스너는 더 이상 호출 안 됨!
// "상태 변경 감지: count = 2" (전체 리스너만 호출)

// 비동기 클로저 예시 1: 재시도 로직
function createRetryFetcher(maxRetries = 3, delay = 1000) {
    // maxRetries와 delay를 클로저로 캡처!
    
    return async function fetchWithRetry(url, options = {}) {
        let lastError;
        
        for (let attempt = 1; attempt <= maxRetries; attempt++) {
            try {
                console.log(`시도 ${attempt}/${maxRetries}: ${url}`);
                const response = await fetch(url, options);
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }
                
                return await response.json();
                
            } catch (error) {
                lastError = error;
                console.log(`시도 ${attempt} 실패: ${error.message}`);
                
                if (attempt < maxRetries) {
                    // 지수 백오프: 재시도마다 대기 시간 증가
                    const waitTime = delay * Math.pow(2, attempt - 1);
                    console.log(`${waitTime}ms 후 재시도...`);
                    await new Promise(resolve => setTimeout(resolve, waitTime));
                }
            }
        }
        
        throw new Error(`${maxRetries}번 시도 후 실패: ${lastError.message}`);
    };
}

const robustFetch = createRetryFetcher(3, 500);
// robustFetch('https://api.example.com/data');

// 비동기 클로저 예시 2: 요청 취소 가능한 fetcher
function createCancellableFetch() {
    let currentController = null;
    
    return {
        async fetch(url, options = {}) {
            // 이전 요청 취소
            if (currentController) {
                currentController.abort();
            }
            
            currentController = new AbortController();
            
            try {
                const response = await fetch(url, {
                    ...options,
                    signal: currentController.signal
                });
                currentController = null;
                return await response.json();
                
            } catch (error) {
                if (error.name === 'AbortError') {
                    console.log('요청이 취소되었습니다.');
                    return null;
                }
                throw error;
            }
        },
        
        cancel() {
            if (currentController) {
                currentController.abort();
                currentController = null;
            }
        }
    };
}

const searchFetcher = createCancellableFetch();
// 검색창에서 타이핑할 때마다 이전 요청 취소하고 새 요청!
// searchFetcher.fetch(`/api/search?q=${query}`);

// 비동기 클로저 예시 3: 디바운스와 스로틀
// 디바운스: 마지막 호출 후 일정 시간이 지나야 실행
function debounce(fn, delay) {
    let timeoutId; // 클로저로 타이머 ID 유지!
    
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

// 스로틀: 일정 시간 내에 최대 한 번만 실행
function throttle(fn, limit) {
    let lastRun = 0; // 클로저로 마지막 실행 시간 유지!
    let timeoutId;
    
    return function(...args) {
        const now = Date.now();
        const remaining = limit - (now - lastRun);
        
        if (remaining <= 0) {
            clearTimeout(timeoutId);
            lastRun = now;
            fn.apply(this, args);
        } else {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => {
                lastRun = Date.now();
                fn.apply(this, args);
            }, remaining);
        }
    };
}

// 실제 사용 예시
const handleSearch = debounce(async (query) => {
    console.log(`검색 실행: ${query}`);
    // const results = await searchApi(query);
}, 300);

const handleScroll = throttle(() => {
    console.log('스크롤 처리:', window.scrollY);
}, 100);

// document.addEventListener('scroll', handleScroll);
// searchInput.addEventListener('input', e => handleSearch(e.target.value));

// ❌ 메모리 누수 예시
function createLeakyHandler() {
    const hugeData = new Array(1000000).fill('데이터'); // 큰 데이터!
    
    return function handler(event) {
        // hugeData를 사용하지도 않는데 클로저로 참조하고 있어!
        console.log('클릭!');
    };
}

const button = document.getElementById('myButton');
const handler = createLeakyHandler();
button.addEventListener('click', handler);
// handler가 살아있는 한 hugeData도 메모리에 유지됨! 😱

// ✅ 메모리 누수 방지
function createEfficientHandler() {
    const hugeData = new Array(1000000).fill('데이터');
    
    // 필요한 데이터만 추출해서 사용
    const processedData = hugeData.length; // 필요한 정보만 추출
    // hugeData는 이 함수 실행 후 GC 대상이 됨!
    
    return function handler(event) {
        console.log(`클릭! 데이터 수: ${processedData}`);
    };
}

// ✅ 이벤트 리스너 정리
class Component {
    constructor(element) {
        this.element = element;
        this.handlers = []; // 핸들러 목록 관리
        
        this.setupEvents();
    }
    
    setupEvents() {
        const clickHandler = this.handleClick.bind(this);
        const scrollHandler = throttle(this.handleScroll.bind(this), 100);
        
        this.element.addEventListener('click', clickHandler);
        window.addEventListener('scroll', scrollHandler);
        
        // 나중에 정리할 수 있도록 저장
        this.handlers.push(
            { target: this.element, type: 'click', handler: clickHandler },
            { target: window, type: 'scroll', handler: scrollHandler }
        );
    }
    
    handleClick(event) {
        console.log('클릭!');
    }
    
    handleScroll(event) {
        console.log('스크롤!');
    }
    
    // 컴포넌트 제거 시 이벤트 리스너 정리!
    destroy() {
        this.handlers.forEach(({ target, type, handler }) => {
            target.removeEventListener(type, handler);
        });
        this.handlers = [];
        this.element = null;
    }
}

// 실전 패턴 1: 플러그인 시스템
function createPluginSystem() {
    const plugins = new Map();
    const hooks = new Map();
    
    return {
        // 플러그인 등록
        register(name, plugin) {
            if (plugins.has(name)) {
                throw new Error(`플러그인 '${name}'이 이미 등록되어 있습니다.`);
            }
            plugins.set(name, plugin);
            
            // 플러그인 초기화
            if (typeof plugin.install === 'function') {
                plugin.install(this);
            }
            
            return this; // 체이닝 지원!
        },
        
        // 훅 등록
        addHook(hookName, callback) {
            if (!hooks.has(hookName)) {
                hooks.set(hookName, []);
            }
            hooks.get(hookName).push(callback);
            
            return function removeHook() {
                const hookList = hooks.get(hookName);
                const index = hookList.indexOf(callback);
                if (index > -1) hookList.splice(index, 1);
            };
        },
        
        // 훅 실행
        async runHook(hookName, ...args) {
            if (!hooks.has(hookName)) return args[0];
            
            let result = args[0];
            for (const hook of hooks.get(hookName)) {
                result = await hook(result, ...args.slice(1)) ?? result;
            }
            return result;
        },
        
        // 플러그인 가져오기
        getPlugin(name) {
            return plugins.get(name);
        }
    };
}

// 사용 예시
const app = createPluginSystem();

// 로깅 플러그인
const LoggerPlugin = {
    install(system) {
        system.addHook('beforeRequest', (url) => {
            console.log(`[LOG] 요청 시작: ${url}`);
            return url;
        });
        
        system.addHook('afterRequest', (response) => {
            console.log(`[LOG] 요청 완료:`, response);
            return response;
        });
    }
};

// 인증 플러그인
const AuthPlugin = {
    install(system) {
        system.addHook('beforeRequest', (url) => {
            const token = localStorage.getItem('token');
            return token ? `${url}?token=${token}` : url;
        });
    }
};

app.register('logger', LoggerPlugin)
   .register('auth', AuthPlugin);

// 실전 패턴 2: 상태 머신 (State Machine)
function createStateMachine(config) {
    const { initial, states } = config;
    let currentState = initial;
    const listeners = new Set();
    
    function transition(event) {
        const stateConfig = states[currentState];
        
        if (!stateConfig || !stateConfig.on || !stateConfig.on[event]) {
            console.warn(`상태 '${currentState}'에서 이벤트 '${event}'를 처리할 수 없습니다.`);
            return false;
        }
        
        const nextState = stateConfig.on[event];
        const prevState = currentState;
        
        // exit 액션 실행
        if (stateConfig.exit) {
            stateConfig.exit({ from: prevState, to: nextState, event });
        }
        
        currentState = nextState;
        
        // enter 액션 실행
        const nextStateConfig = states[nextState];
        if (nextStateConfig && nextStateConfig.enter) {
            nextStateConfig.enter({ from: prevState, to: nextState, event });
        }
        
        // 리스너 알림
        listeners.forEach(listener => {
            listener({ from: prevState, to: nextState, event });
        });
        
        return true;
    }
    
    return {
        send: transition,
        
        getState() {
            return currentState;
        },
        
        matches(state) {
            return currentState === state;
        },
        
        onTransition(listener) {
            listeners.add(listener);
            return () => listeners.delete(listener);
        }
    };
}

// 주문 상태 머신 예시
const orderMachine = createStateMachine({
    initial: '대기중',
    states: {
        '대기중': {
            on: { '결제완료': '결제됨' },
            enter: () => console.log('주문 대기 중...')
        },
        '결제됨': {
            on: { '배송시작': '배송중', '취소': '취소됨' },
            enter: () => console.log('결제 완료! 배송 준비 중...')
        },
        '배송중': {
            on: { '배송완료': '완료됨' },
            enter: () => console.log('배송 시작!')
        },
        '완료됨': {
            enter: () => console.log('배송 완료! 감사합니다 🎉')
        },
        '취소됨': {
            enter: () => console.log('주문이 취소되었습니다.')
        }
    }
});

orderMachine.onTransition(({ from, to, event }) => {
    console.log(`상태 변경: ${from} → ${to} (이벤트: ${event})`);
});

orderMachine.send('결제완료');
// "결제 완료! 배송 준비 중..."
// "상태 변경: 대기중 → 결제됨 (이벤트: 결제완료)"

orderMachine.send('배송시작');
// "배송 시작!"
// "상태 변경: 결제됨 → 배송중 (이벤트: 배송시작)"

// 성능 최적화 예시 1: 지연 초기화 (Lazy Initialization)
function createExpensiveResource() {
    let resource = null; // 아직 초기화 안 함!
    
    return {
        getResource() {
            // 처음 호출될 때만 초기화!
            if (resource === null) {
                console.log('리소스 초기화 중... (한 번만 실행됨)');
                resource = {
                    data: new Array(10000).fill(0).map((_, i) => i * i),
                    timestamp: Date.now()
                };
            }
            return resource;
        },
        
        resetResource() {
            resource = null; // 필요시 리셋 가능
        }
    };
}

const expensiveResource = createExpensiveResource();
// 아직 초기화 안 됨!

// 처음 사용할 때만 초기화
const r1 = expensiveResource.getResource(); // "리소스 초기화 중..."
const r2 = expensiveResource.getResource(); // 캐시에서 반환 (초기화 없음!)
console.log(r1 === r2); // true — 같은 객체!

// 성능 최적화 예시 2: 전역 변수 지역화
function processLargeArray(arr) {
    // 전역 Math 객체를 지역 변수에 캐싱
    const { floor, sqrt, abs } = Math;
    const len = arr.length; // length도 캐싱
    
    const results = new Array(len);
    
    for (let i = 0; i < len; i++) {
        // 매번 Math.floor, Math.sqrt 탐색 없이 바로 접근!
        results[i] = floor(sqrt(abs(arr[i])));
    }
    
    return results;
}

// 성능 최적화 예시 3: 함수 합성 최적화
function compose(...fns) {
    // fns 배열을 클로저로 캡처
    return function(x) {
        return fns.reduceRight((acc, fn) => fn(acc), x);
    };
}

function pipe(...fns) {
    return function(x) {
        return fns.reduce((acc, fn) => fn(acc), x);
    };
}

// 사용 예시
const processUser = pipe(
    user => ({ ...user, name: user.name.trim() }),
    user => ({ ...user, email: user.email.toLowerCase() }),
    user => ({ ...user, age: parseInt(user.age) }),
    user => ({ ...user, isAdult: user.age >= 18 })
);

const user = processUser({
    name: "  김철수  ",
    email: "KIM@EXAMPLE.COM",
    age: "25"
});
console.log(user);
// { name: "김철수", email: "kim@example.com", age: 25, isAdult: true }

// 버그 1: 루프에서의 클로저 (이미 봤지만 다시!)
// ❌ 문제
const funcs = [];
for (var i = 0; i < 3; i++) {
    funcs.push(function() { return i; });
}
console.log(funcs[0]()); // 3 (예상: 0)
console.log(funcs[1]()); // 3 (예상: 1)
console.log(funcs[2]()); // 3 (예상: 2)

// ✅ 해결: let 사용
const funcs2 = [];
for (let i = 0; i < 3; i++) {
    funcs2.push(function() { return i; });
}
console.log(funcs2[0]()); // 0 ✅
console.log(funcs2[1]()); // 1 ✅
console.log(funcs2[2]()); // 2 ✅

// 버그 2: this 바인딩과 클로저 혼동
class Timer {
    constructor() {
        this.count = 0;
    }
    
    // ❌ 문제: 일반 함수에서 this가 달라짐
    startBroken() {
        setInterval(function() {
            this.count++; // this가 Timer 인스턴스가 아님!
            console.log(this.count); // NaN 또는 에러
        }, 1000);
    }
    
    // ✅ 해결 1: 화살표 함수 (this를 렉시컬로 바인딩)
    startFixed1() {
        setInterval(() => {
            this.count++; // 화살표 함수는 외부 this를 사용!
            console.log(this.count);
        }, 1000);
    }
    
    // ✅ 해결 2: self 패턴 (클로저 활용)
    startFixed2() {
        const self = this; // this를 클로저로 캡처!
        setInterval(function() {
            self.count++;
            console.log(self.count);
        }, 1000);
    }
    
    // ✅ 해결 3: bind 사용
    startFixed3() {
        setInterval(function() {
            this.count++;
            console.log(this.count);
        }.bind(this), 1000);
    }
}

// 버그 3: 클로저가 예상치 못한 변수를 캡처
function createAdders(numbers) {
    return numbers.map(function(num) {
        return function(x) {
            return num + x; // num은 각 반복의 값을 올바르게 캡처!
        };
    });
}
// map의 콜백은 매번 새로운 스코프를 만들기 때문에 괜찮아!
const adders = createAdders([1, 2, 3]);
console.log(adders[0](10)); // 11 ✅
console.log(adders[1](10)); // 12 ✅
console.log(adders[2](10)); // 13 ✅

// 클로저 방식
function createCounter(initial = 0) {
    let count = initial;
    
    return {
        increment() { return ++count; },
        decrement() { return --count; },
        reset() { count = initial; return count; },
        getCount() { return count; }
    };
}

// 클래스 방식
class Counter {
    #count; // ES2022 private field
    #initial;
    
    constructor(initial = 0) {
        this.#count = initial;
        this.#initial = initial;
    }
    
    increment() { return ++this.#count; }
    decrement() { return --this.#count; }
    reset() { this.#count = this.#initial; return this.#count; }
    getCount() { return this.#count; }
}

// 성능 비교
const closureCounter = createCounter(0);
const classCounter = new Counter(0);

// 클로저: 각 인스턴스마다 메서드 복사본 생성
// 클래스: 프로토타입 체인으로 메서드 공유 (메모리 효율적!)

// 하지만 클로저는 진짜 private!
// 클래스의 #field는 완전한 private이지만
// 클로저의 변수는 더 강력한 캡슐화를 제공해

// 클로저를 활용한 완전한 이벤트 버스 구현
function createEventBus() {
    // private 상태들
    const events = new Map();
    const onceEvents = new Map();
    let eventHistory = [];
    const maxHistorySize = 100;
    
    // private 함수: 히스토리 추가
    function addToHistory(eventName, data) {
        eventHistory.push({
            event: eventName,
            data,
            timestamp: Date.now()
        });
        
        // 최대 크기 초과 시 오래된 것 제거
        if (eventHistory.length > maxHistorySize) {
            eventHistory.shift();
        }
    }
    
    // private 함수: 리스너 실행
    async function executeListeners(listeners, data) {
        const results = [];
        for (const listener of listeners) {
            try {
                const result = await listener(data);
                results.push({ success: true, result });
            } catch (error) {
                results.push({ success: false, error: error.message });
                console.error('이벤트 리스너 오류:', error);
            }
        }
        return results;
    }
    
    return {
        // 이벤트 구독
        on(eventName, listener) {
            if (typeof listener !== 'function') {
                throw new TypeError('리스너는 함수여야 합니다!');
            }
            
            if (!events.has(eventName)) {
                events.set(eventName, new Set());
            }
            events.get(eventName).add(listener);
            
            // 구독 취소 함수 반환 (클로저!)
            return function off() {
                const listeners = events.get(eventName);
                if (listeners) {
                    listeners.delete(listener);
                    if (listeners.size === 0) {
                        events.delete(eventName);
                    }
                }
            };
        },
        
        // 한 번만 실행되는 이벤트 구독
        once(eventName, listener) {
            if (!onceEvents.has(eventName)) {
                onceEvents.set(eventName, new Set());
            }
            onceEvents.get(eventName).add(listener);
            
            return function off() {
                const listeners = onceEvents.get(eventName);
                if (listeners) {
                    listeners.delete(listener);
                }
            };
        },
        
        // 이벤트 발행
        async emit(eventName, data) {
            addToHistory(eventName, data);
            
            const results = [];
            
            // 일반 리스너 실행
            if (events.has(eventName)) {
                const listenerResults = await executeListeners(
                    events.get(eventName),
                    data
                );
                results.push(...listenerResults);
            }
            
            // once 리스너 실행 후 제거
            if (onceEvents.has(eventName)) {
                const onceListeners = onceEvents.get(eventName);
                const onceResults = await executeListeners(onceListeners, data);
                results.push(...onceResults);
                onceEvents.delete(eventName); // 실행 후 제거!
            }
            
            return results;
        },
        
        // 이벤트 히스토리 조회
        getHistory(eventName) {
            if (eventName) {
                return eventHistory.filter(h => h.event === eventName);
            }
            return [...eventHistory];
        },
        
        // 특정 이벤트의 리스너 수 조회
        listenerCount(eventName) {
            const regular = events.get(eventName)?.size ?? 0;
            const once = onceEvents.get(eventName)?.size ?? 0;
            return regular + once;
        },
        
        // 모든 리스너 제거
        removeAllListeners(eventName) {
            if (eventName) {
                events.delete(eventName);
                onceEvents.delete(eventName);
            } else {
                events.clear();
                onceEvents.clear();
            }
        },
        
        // 이벤트 목록 조회
        eventNames() {
            return [...new Set([
                ...events.keys(),
                ...onceEvents.keys()
            ])];
        }
    };
}

// 사용 예시
const bus = createEventBus();

// 사용자 로그인 이벤트 구독
const unsubLogin = bus.on('user:login', async (user) => {
    console.log(`환영합니다, ${user.name}님!`);
    // await updateLastLoginTime(user.id);
});

// 한 번만 실행되는 초기화 이벤트
bus.once('app:init', (config) => {
    console.log('앱 초기화:', config);
});

// 알림 이벤트 구독
bus.on('notification', (notification) => {
    console.log(`새 알림: ${notification.message}`);
});

// 이벤트 발행
await bus.emit('app:init', { version: '1.0.0', env: 'production' });
// "앱 초기화: { version: '1.0.0', env: 'production' }"

await bus.emit('app:init', { version: '1.0.0' });
// 아무것도 출력 안 됨! (once라서 한 번만 실행)

await bus.emit('user:login', { id: 1, name: '김철수' });
// "환영합니다, 김철수님!"

await bus.emit('notification', { message: '새 메시지가 도착했습니다!' });
// "새 알림: 새 메시지가 도착했습니다!"

console.log(bus.getHistory('user:login'));
// [{ event: 'user:login', data: { id: 1, name: '김철수' }, timestamp: ... }]

// 구독 취소
unsubLogin();
await bus.emit('user:login', { id: 2, name: '이영희' });
// 아무것도 출력 안 됨! (구독 취소됨)