2020-12-9 JS 클로저

클로저

클로저를 이해하기 위해서는 일급객체, 변수범위, 중첩함수를 알아야한다.
일급객체란 인자와 함수의 리턴값으로 사용, 수정되고 변수에 할당하는 것을 포함한다. JS에서 클로저를 만들기 위해서는 함수를 변수에 대입하고 리턴값으로 리턴하는 작업이 필요하기 때문이다.
변수범위 : JS의 변수들은 지역, 전역의 범위를 가진다. 함수내에 정의한 변수는 지역변수이고, 함수내에서만 사용이 가능하다. 함수 밖에 속한 변수는 전역변수로 윈도우(window)객체에 속한다.
- ```
let name = "jimmy";

function printName() {
  let name = "hello";
  console.log(name);
}
printName();
console.log(name);

// hello
// jimmy
```
- 같은 이름을 가진 지역변수, 전역변수가 존재할때 이는 서로 다른 변수이다. 함수내에서 전역변수와 같은 이름의 지역변수를 정의하면 전역변수가 가려지기 때문이다. 함수내부에서 var키워드를 사용하지 않으면 전역변수
변수의 수명은 전역변수는 윈도우, 웹페이지가 살아있는 동안, 지역변수는 함수가 생성되고 리턴될때 지워진다.

중첩함수는 함수내에서 함수를 정의하고 사용하는 것을 말한다.

var global_name = "global";

function printName() {
  var outer_name = "outer";
  function showName() {
    var inner_name = "inner";
    console.log(global_name);
    console.log(outer_name);
    console.log(inner_name);
  }
  showName();
}
printName();
// result
global
outer
inner

// case2
var global_name = "global";

function printName() {
  var outer_name = "outer";
  function showName() {
    var inner_name = "inner";
    console.log(global_name);
    console.log(outer_name);
    console.log(inner_name);
  }
  return showName;
}
var print = printName();
print();
// result
global
outer
inner

js는 함수를 일급객체로 취급하기 때문에 함수를 변수에 저장하고 반환할 수 있다.
위의 예시에서 var print = printName()으로 반환받은게 클로저이다. 여기서 특징 printName()함수 내에서 정의된 지역변수인 outer_name이 자신의 수명이 끝나는 printName()을 호출 후에 print()를 해도 살아있다는 점이다.
클로저는 자신을 포함하고 있는 외부함수의 인자, 지역변수 등을 외부함수가 종료된 후에도 사용할 수 있다. 이런 변수를 자유변수라고 한다. 자유변수를 가진 코드를 클로저라고 한다.

익명함수 사용예시

function makeGreeting(name) {
  var greeting = "hello";
  return function() {
    console.log(greeting + name);
  }
}

var g1 = makeGreeting("jimmy");
g1();
// result
hello jimmy

여기서도 makeGreeting()의 인자와 내부의 지역변수 모두 캡쳐되서 자유변수가 됬다.

즉시실행함수를 통해 페이지당 하나만 설정할수도 있다.
함수표현식을 사용하면 클로저와 콜백으로 사용될 수 있다.

Written on December 9, 2020