[JS] Closure

Minyoung's Conference·2022년 10월 19일
0

JavaScript

목록 보기
22/28
post-thumbnail
closure : 중단하다, 폐쇄하다
스코프의 개념에서 내부 함수에서 자신을 포함하는 외부 함수의 스코프에 접근할 수 있다고 배움.

var outer = function(){
  var a = 1;
  
  var inner = function() {
    var b = 5;
    var c = 6;
    
    a = a + b + c;
    console.log(a)
  }
  inner();
}

outer(); // 12

**만약 내부 함수가 외부 함수보다 오래 살아있는 경우에, 외부함수에 있던 변수들은 어떻게 될까?**

var outer = function(){
  var a = 1;
  
  var inner = function() {
    var b = 5;
    var c = 6;
    
    a = a + b + c;
    console.log(a)
  }
  return inner; //inner함수를 실행하지 않고 리턴하며
}

var newInner =  outer(); // outer함수를 새로운 변수에 담아 실행

newInner();

실행순서 : newInner() -> outer() -> inner()

그렇다면, outer함수가 실행되는 순간 inner를 리턴하며 outer는 수명이 끝나게 된다.
**, 내부함수가 외부함수보다 오래 살아남게 되는 것이다.

그러나 외부함수(outer)에 있던 a라는 변수에 접근해서 12라는 결과를 출력했다.
외부 함수의 변수들은 메모리에서 해제되지 않고, 가비지컬렉터로 사라지지 않았다.

Inner는 outer가 이미 반환된 후에도 outer의 a에 대한 접근 권한을 가진다.
- 함수는 자신을 포함하는 함수의 스코프에 접근할 수 있기 떄문이다.

그래서 정리하자면, 클로저는 폐쇄된 공간에 대한 접근 권한을 가진 함수를 말한다.
이러한 클로저의 특징을 이용한다면 비공개 데이터를 가진 객체를 만들어 볼 수 있다.**

 즉시 실행 함수 person을 만들어보자.
var person = (function() {
  var age = 15;
  return {
    name : "bradley",
    getAge: function() {
      console.log(age);
      return age;
    },
    setAge : function(val){
      age: val;
      console.log(age);
    }
  }
})();

person.getAge(); // 15
person.setAge(20); // 20 

person.age = 30; //  객체 접근 방식으로는 접근불가능하다. 
person.getAge(); // 15

setAge(), getAge() 함수를 통해서만 age값에 접근이 가능하게 되었다.

또 다른 예제 
function count(){
  var cnt = 0;
  
  return {
      func: function() {
        return cnt++;
      },
      setCount: function(newNumber) {
         cnt = newNumber;
      }
  }
}

var execute = count();
console.log(execute.func()); // 0
console.log(execute.func()); // 1
console.log(execute.func()); // 2

execute.setCount(10); //count값 변경
console.log(execute.func()); // 10
console.log(execute.func()); // 11
console.log(execute.func()); // 12


**[정리]
- 자바스크립트는 내부 함수에서 자신을 포함하는 외부 함수의 스코프에 접근할 수 있다.
- 내부 함수가 살아있는 상태에서 외부 함수가 파괴되면 외부함수의 변수들에 대한 접근 권한을 내부 함수만 가지게 된다.
- 이렇게 폐쇄된 공간에 대한 접근 권한을 가진 함수가 클로저이다.**

(인프런 "코딩인터뷰를 저격하는 JS 스나이퍼 양성학교" 참고)

profile
안녕하세요, FE 개발자 김민영입니다.

0개의 댓글