"스코프와 클로저, 5살 아이에게 쉽게 설명하는 JavaScript"

스코프와 클로저, 5살 아이에게 설명하기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • 초보 개발자, JavaScript 개념 이해를 위한 학습자
  • 난이도: 기초 수준 (구체적인 코드 예제 없이 개념 중심 설명)

핵심 요약

  • 스코프: "변수는 자신이 선언된 공간(예: 함수 내부)에서만 접근 가능하다"
  • 클로저: "함수가 자신이 생성된 환경(예: 외부 함수의 변수)을 기억하고 유지한다"
  • 실무 활용: React hooks, 이벤트 핸들러 등에서 활용 가능

섹션별 세부 요약

1. 스코프의 개념

  • 변수 toyplayRoom() 함수 내부에서만 접근 가능하다.
  • 외부에서 toy를 참조하면 오류 발생 (예: console.log(toy)).
  • 스코프는 "어디서 어떤 변수를 사용할 수 있는지" 정의한다.

2. 클로저의 작동 방식

  • makeToy() 함수에서 생성된 toyName 변수는 내부 함수에 의해 유지된다.
  • 외부 함수가 종료되어도 내부 함수는 toyName 값을 기억한다.
  • 예: play() 함수는 Buzz라는 이름을 계속 기억한다.

3. 실무 예제 및 도전 과제

  • box() 함수의 secret 변수는 내부 함수에서만 접근 가능하다.
  • outer()inner() 함수에서 a 변수의 스코프 범위가 다르다.
  • 코드 테스트를 통해 스코프와 클로저의 행동을 직접 확인할 수 있다.

결론

  • 스코프는 변수의 접근 범위를, 클로저는 데이터의 유지 방식을 정의한다.
  • 실무에서는 클로저를 활용해 비공개 상태를 유지하거나, React hooks과 같은 기능을 구현할 수 있다.
  • 예제 코드를 직접 실행해보며 스코프와 클로저의 작동 원리를 체험하라.