클로저 [Closure]

Yedam Lee·2023년 3월 28일
0

🔍 클로저란?

클로저는 함수함수가 선언된 어휘적 환경의 조합입니다.
쉽게말해 외부함수의 변수에 접근할 수 있는 내부함수를 일컫습니다. 이는 스코프 체인으로 표현되기도 합니다.

스코프(Scope)란?
Scope를 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있습니다. 즉, 스코프(Scope)란 ‘변수에 접근할 수 있는 범위’입니다.

📚 클로저의 활용

정보의 은닉

클로저의 핵심은 스코프를 이용해서, 변수의 접근 범위를 닫는(폐쇄) 것에 있다.
내부함수에서는 외부함수 스코프에 선언된 변수에 접근이 기능하지만, 외부함수 스코프에서 내부함수 스코프로 접근이 불가능하다. 따라서 바깥에서 쉽게 바뀌면 안 되는 값을 내부함수에 넣어 사용하면 정보를 은닉할 수 있다.

전역변수 사용 억제

전역변수는 예상치 못한 Side Effect를 일으킬 수 있기에 최대한 줄이는 것이 좋다.
하지만 프로그램 구현 시 함수 하나에 사용하는 전역변수가 필요한 순간이 있다. 이럴 때 클로저가 유용하게 사용된다.

// Counter 예제
const btn = document.querySelector('button')
btn.addEventListener('click',handleClick)

let count = 0
function handleCilck(){
  count++
  return count
}

//위와 같은 경우에 count를 전역변수로 사용해줘야 count가 증가를 해줄 수 있음
//이럴경우 클로져를 사용해서 해결할 수 있다.


// Counter Closure 예제
const btn = document.querySelector('button')
btn.addEventListener('click',handleClick())

function handleCilck(){
  let count = 0
  return function (){
    count++
    return count
  }
}
// 위와 같이 작성해 준다면 외부함수(handleClick)의 lexical environment를 참조하는 함수를 
// btn의 콜백함수로 이용해 전역객체 없이 구현할 수 있다.

🤔 클로저의 단점

  • 메로리를 소모한다.
  • Scope 생성에 따른 퍼포먼스 손해가 있다.
profile
프론트엔드 개발자

0개의 댓글