기본 콘텐츠로 건너뛰기

라벨이 Closure인 게시물 표시

자바스크립트 클로저(Closure) 완벽 가이드: 원리부터 jQuery 실전 패턴까지

JAVASCRIPT / ENGINEERING 자바스크립트 클로저(Closure) 완벽 가이드: 원리부터 jQuery 실전 패턴까지 클로저의 핵심 원리인 스코프 체인과 상태 유지를 이해하고, 메모리 누수 방지법과 jQuery 플러그인 확장 등 실무 레거시 코드 분석에 필요한 핵심 패턴을 정리합니다. 📑 목차 1. 클로저(Closure)의 핵심 개념과 원리 2. 상태 유지와 캡슐화: 카운터 예제 3. 메모리 누수(Memory Leak) 관리 4. 실전 응용: jQuery 플러그인과 IIFE 패턴 1. 클로저(Closure)의 핵심 개념과 원리 자바스크립트에서 클로저는 함수와 그 함수가 선언될 당시의 렉시컬 환경(Lexical Environment)의 조합 을 의미합니다. 쉽게 정의하면, 내부 함수가 외부 함수의 변수(스코프)를 기억하고, 외부 함수가 종료된 후에도 계속 접근할 수 있는 메커니즘 입니다. 다음은 가장 기본적인 클로저의 형태입니다. function test(name) { var text = name + ' 님'; // 내부 함수(클로저)가 외부 변수 text를 참조 var tk = function() { console.log(text); }; return tk; } var myFunc = test('개발자'); myFunc(); // 출력: "개발자 님" 위 코드에서 test 함수는 실행이 끝났지만, 반환된 tk 함수는 여전히 text 변수를 기억하고 있습니다. 이는 함수가 생성될 때의 스코프 체인 을 유지하기 때문입니다. 2. 상...