클로저와 스코프

코파일럿한테 스코프와 클로저를 그림한장으로 만들어달랬더니 이렇게 만들어줌ㅋㅋㅋ 뭔가 허접한데 또 직관적이기도 하고(?)

 

 

나의 최애동료 지유님이 추천해준 일주일에 한번씩 기술면접을 위한 질문을 메일로 보내주는 매일메일을 알게되었다!

첫 질문부터 모르는 질문이여서 당황스럽긴한데 뭐 당연한걸수도,,(이제 개발을 배운데다, 면접준비는 안했으니까)

덕분에 이렇게 하나하나씩 찾아보면서 블로그에 쌓아나가면 좋을것같아 쓴다

 

아무튼 잡담은 치우고 클로저와 스코프가 뭐냐

함수의 일급객체,,렉시컬 스코프 블라블르 어렵게 말해봐야 어짜피 읽히지도 않을거 빡대가리도 이해할수있게 최대한 풀어써보았다.

일단 스코프부터 알고 클로저를 아는게 이해하기 좋을거같다

 

 

 

 

스코프(Scope): “변수가 살아있는 공간”

스코프는 변수에 접근할수있는 범위를 말한다. 크게 전역스코프, 지역스코프가 있다 (이건 변수랑 똑같구먼)

 

let globalVar = "전역";

function myFunc() {
  let localVar = "지역";
  console.log(globalVar); // 가능
  console.log(localVar);  // 가능
}

console.log(globalVar); // 가능
console.log(localVar);  // ❌ 오류! 지역 스코프 밖이니까

 

 

 

 

클로저(Closure): “함수가 기억하는 외부 변수”

클로저는 함수가 선언될 당시 스코프를 기억해 함수가 실행된 이후(또는 종료된 이후)에도 그 변수에 접근할수 있게 해주는 기능이다.

 

function outer() {
  let count = 0;

  function inner() {
    count++;
    console.log(count);
  }

  return inner;
}

const counter = outer(); // outer 실행 → inner 반환
counter(); // 1
counter(); // 2
counter(); // 3

 

여기서 inner는 outer의 변수 count를 쓰고있다(그렇다면 count는 지역스코프이다)

그러나 함수 outer가 종료된 후에도 inner가 count를 기억하고 있기때문에

counter() 함수를 계속 실행하면 count값이 호출되는것이다. 이거시 바로 클로저라는것! 오호이~!

 

 

 

 

좀 생소하고 헷갈리는 기능이지만 그러면

언제 클로저를 활용하는게 좋을까?

1. 외부에서 직접접근을 못하고 함수로만 조작하게 만들수있기때문에 데이터를 숨길때 좋다

2. 콜백, 이벤트핸들러, setTimeout 등 비동기작업에 자주 활용된다. 

function sayLater(message) {
  setTimeout(function() {
    console.log(message);
  }, 1000);
}

sayLater('Hello, world!');

//message는 sayLater의 지역변수이다.
//setTimeout의 함수는 message를 받아와야하기때문에 클로저가 만들어짐
//그래서 sayLater가 종료되도 message는 살아있고 1초뒤에 출력이 되는것

 

3. 함수가 실행된 이후에도 내부상태를 유지할수 있는 특성이 있기때문에 모듈패턴을 만들기 좋다.

그럼 모듈패턴이 또 뭐시냐..

내부상태에서 쉽게 접근못하게 숨기 필요한 기능만 노출하는 구조

모듈패턴으로 만들면 유지보수에 좋다구한당