클로저, 진짜 알고 활용하고 있을까?

function createCounter() {
  let count = 0 // 외부에서 직접 접근 불가능한 변수

  return function () {
    count++ // 클로저를 통해 count 변수에 접근
    return count
  }
}

const counter = createCounter()
console.log(counter()) // 출력: 1
console.log(counter()) // 출력: 2

function createBankAccount(initialBalance) {
  let balance = initialBalance // 외부에서 직접 접근 불가능한 변수

  return {
    // 입금 메서드
    deposit(amount) {
      if (amount <= 0) {
        return '유효한 입금액이 아닙니다.'
      }
      balance += amount
      return `${amount}원이 입금되었습니다. 현재 잔액: ${balance}원`
    },

    // 출금 메서드
    withdraw(amount) {
      if (amount <= 0) {
        return '유효한 출금액이 아닙니다.'
      }
      if (amount > balance) {
        return '잔액이 부족합니다.'
      }
      balance -= amount
      return `${amount}원이 출금되었습니다. 현재 잔액: ${balance}원`
    },

    // 잔액 확인 메서드
    getBalance() {
      return `현재 잔액: ${balance}원`
    },
  }
}

const myAccount = createBankAccount(10000)
console.log(myAccount.getBalance()) // 출력: 현재 잔액: 10000원
console.log(myAccount.deposit(5000)) // 출력: 5000원이 입금되었습니다. 현재 잔액: 15000원
console.log(myAccount.withdraw(3000)) // 출력: 3000원이 출금되었습니다. 현재 잔액: 12000원
console.log(myAccount.balance) // 출력: undefined (직접 접근 불가)

function Counter() {
  const [count, setCount] = useState(0)

  return <button onClick={() => setCount(count + 1)}>클릭 수: {count}</button>
}

useEffect(() => {
  // 이 콜백 함수는 클로저를 통해 count 변수를 캡처
  document.title = `클릭 수: ${count}`

  // 클린업 함수도 클로저를 통해 이전 count 값에 접근 가능
  return () => {
    console.log(`이전 클릭 수는 ${count}였습니다.`)
  }
}, [count]) // 의존성 배열

function setupButtons() {
  const buttons = [
    { id: 'btn1', message: '버튼 1을 클릭했습니다!' },
    { id: 'btn2', message: '버튼 2를 클릭했습니다!' },
    { id: 'btn3', message: '버튼 3을 클릭했습니다!' },
  ]

  buttons.forEach((button) => {
    const element = document.getElementById(button.id)

    // 클로저: 각 이벤트 핸들러는 자신의 button.message를 기억
    element.addEventListener('click', function () {
      alert(button.message)
    })
  })
}

setupButtons()

function fetchUserData(userId) {
  const requestTime = Date.now()
  const requestId = `request_${Math.random().toString(36).substr(2, 9)}`

  console.log(`${requestId}: ${userId} 사용자 정보 요청 시작`)

  return fetch(`/api/users/${userId}`)
    .then((response) => {
      // 비동기 콜백에서도 requestTime, requestId, userId에 접근 가능
      console.log(`${requestId}: 응답 수신 (${Date.now() - requestTime}ms)`)
      return response.json()
    })
    .then((data) => {
      // 여러 단계의 비동기 처리 후에도 변수들에 접근 가능
      console.log(
        `${requestId}: ${userId} 사용자 데이터 처리 완료 (총 ${Date.now() - requestTime}ms)`
      )
      return {
        ...data,
        processingTime: Date.now() - requestTime,
      }
    })
    .catch((error) => {
      // 에러 처리에서도 동일한 변수들에 접근 가능
      console.error(`${requestId}: ${userId} 사용자 정보 요청 실패 (${Date.now() - requestTime}ms)`)
      throw error
    })
}

// 사용 예
fetchUserData(123).then((userData) => {
  console.log(`사용자 이름: ${userData.name}, 처리 시간: ${userData.processingTime}ms`)
})

// 디바운스 함수 구현
function debounce(func, wait) {
  let timeout

  // 반환되는 함수가 클로저
  return function executedFunction(...args) {
    // 이전 타임아웃을 클리어 (이전 호출 취소)
    clearTimeout(timeout)

    // 새로운 타임아웃 설정
    timeout = setTimeout(() => {
      func(...args) // wait 밀리초 후에 원본 함수 실행
    }, wait)
  }
}

// 실제 사용 예: 검색 입력 처리
const searchInput = document.getElementById('search-input')
const originalSearchFunction = (event) => {
  const searchTerm = event.target.value
  console.log(`검색어 "${searchTerm}"로 API 요청 중...`)
  // API 요청 로직
}

// 300ms 디바운스 적용
const debouncedSearch = debounce(originalSearchFunction, 300)

// 이벤트 리스너 등록
searchInput.addEventListener('input', debouncedSearch)

// 즉시 실행 함수를 이용한 모듈 패턴
const ShoppingCart = (function () {
  // 비공개 변수 (클로저를 통해 보호됨)
  let items = []
  let total = 0

  // 비공개 함수
  function calculateTotal() {
    total = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
  }

  // 공개 인터페이스
  return {
    // 상품 추가
    addItem(name, price, quantity = 1) {
      items.push({ name, price, quantity })
      calculateTotal()
      return this // 메서드 체이닝 지원
    },

    // 상품 제거
    removeItem(name) {
      const index = items.findIndex((item) => item.name === name)
      if (index !== -1) {
        items.splice(index, 1)
        calculateTotal()
      }
      return this
    },

    // 장바구니 정보 출력
    getCartInfo() {
      return {
        itemCount: items.length,
        total: total,
        items: [...items], // 원본 배열을 직접 노출하지 않고 복사본 반환
      }
    },

    // 장바구니 비우기
    clearCart() {
      items = []
      total = 0
      return this
    },
  }
})()

// 사용 예
ShoppingCart.addItem('노트북', 1200000).addItem('마우스', 35000, 2).addItem('키보드', 120000)

console.log(ShoppingCart.getCartInfo())
// { itemCount: 3, total: 1390000, items: [...] }

// 좋지 않은 예
function createFunction(data) {
  const hugeArray = new Array(10000).fill('불필요한 데이터')
  const necessaryValue = data.value

  return function () {
    // hugeArray는 사용하지 않지만, 이론적으로는 접근 가능하므로
    // 메모리에서 해제되지 않을 수 있음
    return necessaryValue * 2
  }
}

// 개선된 예
function createFunction(data) {
  // 필요한 값만 지역 변수로 저장
  const necessaryValue = data.value

  return function () {
    return necessaryValue * 2
  }
}

// 이벤트 핸들러에서의 예
function setupHandler(element) {
  // 큰 데이터
  const largeData = new Array(1000000).fill('데이터')

  function handleClick() {
    // largeData 사용
    console.log('데이터 크기:', largeData.length)
  }

  element.addEventListener('click', handleClick)

  // 핸들러 제거 함수 반환
  return function cleanup() {
    element.removeEventListener('click', handleClick)
    // 명시적으로 참조 해제는 불필요하지만, 의도를 명확히 하기 위해 포함
    // handleClick = null;
  }
}

const cleanup = setupHandler(document.getElementById('myButton'))

// 나중에 정리할 때
cleanup()

// 좋지 않은 예: 글로벌 변수 사용
let counter = 0
function incrementCounter() {
  return ++counter
}

// 개선된 예: IIFE와 클로저 사용
const counter = (function () {
  let count = 0 // 비공개 변수

  return function () {
    return ++count
  }
})()

// 사용
console.log(counter()) // 1
console.log(counter()) // 2

// 명확한 수명 주기 관리: 컴포넌트 기반 접근법
function createComponent() {
  // 컴포넌트 상태
  const state = {
    data: [],
    isLoading: false,
  }

  // 비공개 메서드
  function fetchData() {
    state.isLoading = true
    // 데이터 가져오기 로직...
  }

  // 공개 API
  const api = {
    initialize() {
      fetchData()
    },

    update() {
      // 업데이트 로직...
    },

    // 정리 메서드 - 명시적으로 참조 해제
    destroy() {
      state.data = null
      // 다른 정리 작업...
    },
  }

  return api
}

// 사용
const myComponent = createComponent()
myComponent.initialize()

// 필요 없어지면 명시적으로 정리
myComponent.destroy()

function createFunction() {
  const unused = '사용되지 않는 변수'
  const used = '클로저에서 사용되는 변수'

  return function () {
    return used // 오직 used 변수만 클로저에 필요
  }
}

const fn = createFunction()
console.log(fn()) // "클로저에서 사용되는 변수"

const counter = (function () {
  let count = 0

  return function () {
    // 반복적인 count 변수 접근은 최적화된다
    return ++count
  }
})()

// 반복 호출에서 최적화 효과가 발휘된다
for (let i = 0; i < 1000000; i++) {
  counter()
}

function createObjectFactory() {
  // 클로저 환경의 일부
  const shared = { x: 1 }

  return function () {
    // 항상 같은 방식으로 객체를 생성하면 최적화된다
    return { y: shared.x + 1 }
  }
}

const factory = createObjectFactory()
// 동일한 패턴으로 객체 생성 시 히든 클래스 최적화가 적용된다
const obj1 = factory()
const obj2 = factory()

function createMultiplier(factor) {
  // 클로저를 반환
  return function (x) {
    return x * factor
  }
}

const double = createMultiplier(2)
const triple = createMultiplier(3)

// 같은 인자로 반복 호출 시 엔진이 최적화
let result = 0
for (let i = 0; i < 100000; i++) {
  // JIT 컴파일러가 이 호출을 최적화할 수 있음
  result += double(i)
}