클로저 | 실행컨텍스트

 

클로저는 자바스크립트의 핵심 개념으로, 데이터 보호 및 상태 유지와 같은 중요한 프로그래밍 패턴을 구현하는 데 활용된다. 

---

1. 캡슐화 (Encapsulation)

• 정의: 데이터와 그 데이터를 조작하는 함수를 하나의 단위로 묶는 기법.
• 클로저는 캡슐화를 구현하는 자바스크립트의 방법 중 하나이다.
  • 데이터 접근 제한: 외부에서 함수 내부의 변수를 직접 변경할 수 없도록 보호.
  • 독립성: 스코프에 종속되지 않는 변수를 유지하여 외부 코드의 영향을 방지.

---

2. 데이터 은닉 (Data Hiding)

• 보호 의미:
  • 클로저로 캡슐화된 데이터는 외부 코드에서 임의로 변경할 수 없다.
  • 데이터는 정의된 함수(메서드)를 통해서만 조작 가능한다.
• 이점:
  • 변수 값을 안전하게 유지.
  • 의도치 않은 코드의 변경을 방지하여 코드 안정성을 높임.

---

3. 상태 유지

• 클로저는 함수가 생성될 때의 환경(스코프) 을 기억하며, 해당 환경의 변수 상태를 유지한다.
• 이를 통해:
  • 특정 데이터나 상태를 함수 호출 간에 유지 가능.
  • 예: 카운터, 캐시, 설정값 등을 저장하는 데 활용.

---

클로저로 캡슐화, 데이터 은닉, 상태 유지 

 

function createCounter() {
    let count = 0; // 은닉된 변수 (외부에서 접근 불가)

    return {
        increment: function () {
            count += 1;
            return count; // 상태 유지
        },
        decrement: function () {
            count -= 1;
            return count;
        },
        getCount: function () {
            return count; // 캡슐화된 데이터 접근
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
console.log(counter.getCount());  // 1

 

 

 

• count는 클로저에 의해 은닉되어 외부에서 접근할 수 없다.
• increment, decrement, getCount 메서드를 통해서만 데이터 변경 및 접근 가능.
• count 값은 함수 호출 간에 상태가 유지된다.

 

let globalLet = 'HelloWorld'; // 전역 변수
function outer() {
    let localLet = '지역변수'; // outer 함수 내부의 지역 변수
    console.log(globalLet); // 전역 변수 접근
    console.log(localLet);  // 지역 변수 접근
}

outer(); // outer 함수 호출

 

 

실행 과정

1. 전역 컨텍스트 생성
   • globalLet 변수가 전역 변수 환경에 등록된다.
   • outer 함수가 전역 실행 컨텍스트에 등록된다.
   • outer 함수가 호출되지 않았으므로 아직 함수의 실행 컨텍스트는 생성되지 않았다.
2. outer 함수 호출
   • outer 함수가 호출되면 새로운 실행 컨텍스트가 생성된다.
   • 실행 컨텍스트는 두 가지 중요한 구성 요소를 포함한다:
     • Variable Environment (변수 환경): 함수 내부에서 정의된 변수들이 저장된다.
     • Scope Chain (스코프 체인): 함수가 선언된 위치에 따라 접근할 수 있는 스코프의 리스트이다.

 

 

outer 실행 컨텍스트의 구조

 

'outer 실행 컨텍스트': {
    'VariableEnvironment': {
        localLet: '지역변수'
    },
    'ScopeChain': [
        'outer 변수 환경',
        '전역 변수 환경'
    ]
}

 

 

 

• VariableEnvironment
  • outer 함수 내부에서 선언된 localLet이 저장된다.
    • localLet: '지역변수'
• ScopeChain
  • 함수가 선언된 위치에 따라 접근할 수 있는 스코프들의 리스트이다.
    • 첫 번째로 outer 변수 환경 (현재 함수의 변수 환경)이 포함된다.
    • 다음으로 전역 변수 환경이 포함된다.
  • 이 스코프 체인은 변수를 검색하는 데 사용된다:
    • console.log(globalLet) → 전역 변수 환경에서 globalLet을 찾음.
    • console.log(localLet) → outer의 변수 환경에서 localLet을 찾음.

 

 

 

 

let globalVar = '전역변수'; // 전역 변수 선언
function outer() {
    console.log(globalVar); // 전역 변수 출력
    function inner() {
        var innerVar = '내부함수변수'; // inner 함수의 지역 변수 선언
        console.log(innerVar); // inner 함수의 지역 변수 출력
    }
    inner(); // inner 함수 호출
}
outer(); // outer 함수 호출

 

 

 

실행 순서

1. 전역 실행 컨텍스트 생성

• 전역 스코프가 생성되고, 전역 변수와 함수가 등록된다.
  • globalVar → '전역변수'
  • outer → 함수 정의
• 코드 실행이 시작되면서 outer() 호출로 이동한다.

2. outer 함수 실행

• outer 함수의 실행 컨텍스트가 생성된다.
  • 변수 환경: 현재 함수 내의 지역 변수와 매개변수를 저장.
  • 스코프 체인: 전역 스코프를 포함.
• 함수 본문 실행:
  1. console.log(globalVar) → 전역 스코프에서 globalVar 검색 후 값 출력 ('전역변수').
  2. 내부 함수 inner가 정의됨.

3. inner 함수 호출

• inner 함수의 실행 컨텍스트가 생성된다.
  • 변수 환경: inner 함수 내에서 선언된 변수 저장 (innerVar).
  • 스코프 체인: inner의 지역 스코프와 outer의 스코프, 그리고 전역 스코프 포함.
• 함수 본문 실행:
  1. var innerVar = '내부함수변수'; → 지역 변수 선언.
  2. console.log(innerVar) → innerVar의 값을 출력 ('내부함수변수').

---

출력 순서

1. outer 함수의 첫 번째 console.log
   • 출력: '전역변수'
2. inner 함수의 console.log
   • 출력: '내부함수변수'