1.5클로저

1. 정의

자바스크립트의 기능 중 하나로, 안에 있는 함수가 바깥 함수의 변수에 접근할 수 있다는 개념.

• 함수가 선언될 당시의 환경을 기억했다가 나중에 호출 되었을때 원래의 환경에 따라 수행되는 함수

2. 세부

함수 내에서 함수를 정의하고 사용하면 클로저.

즉, 안에 있는 함수가 그 함수를 감싸고 있는 바깥 함수의 변수에 접근하는 것.

함수 안에 있는 함수는

• 자기 함수 블록 안의 스코프에 접근 권한 있음
• 자기 밖의 함수에 정의된 변수에 접근 권한이 있음
• 나아가 글로벌 변수에도 접근 권한이 있음

javascript
function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log('Outer Variable:', outerVariable);
    console.log('Inner Variable:', innerVariable);
  };
}

const newFunction = outerFunction('outside');
newFunction('inside');

위의 예시를 보면,

• outerFunction(’outside’)를 부르면 innerFunction을 return하는데,
• innerFunction은 newFunction으로 할당되고
• newfunction이 ‘inside’라는 argument를 부여받고호출될때, newFunction은 여전히 outerFunction 안에 있는 outerVariable에 접근할 수 있음

3. 용례

데이터 보안을 위해 주로 쓰임(private variable이나 private function을 숨길때)

javascript
function createCounter() {
  let count = 0;
  return {
    increment: function () {
      count++;
      return count;
    },
    decrement: function () {
      count--;
      return count;
    },
  };
}

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

4. 주의사항

유명한 예시

javascript
**for (var i = 1; i <= 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}**

이 함수는 6만 5번 log함. 왜냐면 var 키워드가 block scope를 만드는게 아니라서 모든 함수가 실행될때마다 i를 공유해서.

javascript
for (let i = 1; i <= 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000);
}

let을 써서 해결한다.