스코프와 클로저, 5살 아이에게 설명하기
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 초보 개발자, JavaScript 개념 이해를 위한 학습자
- 난이도: 기초 수준 (구체적인 코드 예제 없이 개념 중심 설명)
핵심 요약
- 스코프: "변수는 자신이 선언된 공간(예: 함수 내부)에서만 접근 가능하다"
- 클로저: "함수가 자신이 생성된 환경(예: 외부 함수의 변수)을 기억하고 유지한다"
- 실무 활용: React hooks, 이벤트 핸들러 등에서 활용 가능
섹션별 세부 요약
1. 스코프의 개념
- 변수
toy
는playRoom()
함수 내부에서만 접근 가능하다. - 외부에서
toy
를 참조하면 오류 발생 (예:console.log(toy)
). - 스코프는 "어디서 어떤 변수를 사용할 수 있는지" 정의한다.
2. 클로저의 작동 방식
makeToy()
함수에서 생성된toyName
변수는 내부 함수에 의해 유지된다.- 외부 함수가 종료되어도 내부 함수는
toyName
값을 기억한다. - 예:
play()
함수는Buzz
라는 이름을 계속 기억한다.
3. 실무 예제 및 도전 과제
box()
함수의secret
변수는 내부 함수에서만 접근 가능하다.outer()
와inner()
함수에서a
변수의 스코프 범위가 다르다.- 코드 테스트를 통해 스코프와 클로저의 행동을 직접 확인할 수 있다.
결론
- 스코프는 변수의 접근 범위를, 클로저는 데이터의 유지 방식을 정의한다.
- 실무에서는 클로저를 활용해 비공개 상태를 유지하거나, React hooks과 같은 기능을 구현할 수 있다.
- 예제 코드를 직접 실행해보며 스코프와 클로저의 작동 원리를 체험하라.