💻 다시 보는 클로저

waterglasses·2022년 3월 31일

TIL 데브코스 클로저 프로그래머스

TIL

목록 보기

10/50

오늘은 전체적으로 궁금했던 질문과 답, 그리고 간단한 정리만 하였습니다.

📃 오늘 공부한 것

클로저

우선 저번에 정리했던 클로저를 다시 보고 왔다.

💻 TIL 01 | 호이스팅 그리고 클로저

클로저는 얼마나 잘 이해하느냐에 따라 작서하는 코드의 퀄리티, 품질 등에 대해 큰 영향을 끼친다고 한다. 또한 함수와 함수가 선언된 어휘적 환경의 조합이라고도 한다.

클로저에 대한 예시 하나만 보고가자.

function Counter() {
  let count = 0;
  function increase() {
    count++;
  }
  function printCount() {
    console.log(`count: ${count}`);
  }
  return {
    increase,
    printCount,
  };
}

const counter = Counter();
counter.increase();
counter.increase();
counter.printCount(); // count: 2

console.log(counter.count); // undefined

여기서 counter.count를 출력해보면 undefined가 나온다. 그 이유는 외부에서는 Counter 함수 내의 count에 접근할 수 없기 때문이다.
위와 같이 작성한다면 private 한 효과를 볼 수 있다.

여기서 잠깐 🖐🏻

만약에 Counter 함수에서 count 변수도 같이 리턴한다면??

내가 예상한 답은 count 변수에 접근할 수 있기 때문에 counter.count는2가 출력될 것이라고 생각하였다.
그렇지만 결과는 0이 나왔다.

이유는?⁉️
숫자는 원시형이기 때문에 Counter 함수에서 객체 리터럴을 반환할 때, count 변수와 완전히 분리된다. 하지만 함수는 참조형이기 때문에 increase나 printCount를 counter 객체의 메소드로 실행해도, 결국 Counter 함수 내부에 정의한 그 함수들이기 때문에 내부 변수(count)에 접근할 수 있습니다.
그래서 마지막 콘솔 출력은 0이 된다는 것을 알 수 있습니다.

🔥 오늘의 느낀점

2주동안 자바스크립트 문법에 대해 배웠음에도 불구하고 오늘 공부한 예시들을 보면서 계속 헷갈렸다. 확실히 예시와 같이 보니까 확 체감했다. 문제 해설을 보면서 궁금했던 점을 처음으로 슬랙 채널에 물어보았는데 다들 쉽게 이해할 수 있도록 말씀해주셔서 빨리 이해할 수 있었다. 감동🥰