closure(클로져)

1. 클로저란?

: 주변의 상태(lexical environment)의 참조와 함께 번들로 묶인 함수의 조합, inner함수에서 outer함수의 스코프에 접근을 가능하게 해줌, 함수가 생성될 때마다 생성

• 즉, 함수가 선언될 때 외부의 lexical environment를 참조하게 되는 현상
  (lexical environment: 함수의 실행 컨텍스트가 생성될 때 함께 생성, 함수의 지역변수의 정보와 상위 스코프에 대한 정보를 포함)

function outer(){
  const name = 'kylie';
  console.log(name); // kylie
}
console.log(name); // error

function outer(){
 const name = 'kendall';
 console.log(name); // kendall
 return function inner(){
 	const greeting = 'hello'
   console.log(greeting, name);
 }
}
const getKendall = outer(); // kendall
getKendall(); // hellokendall

• outer 함수가 종료 되었으나, inner 함수에서 name에 접근 가능
  -> why? 클로져때문 (inner 함수 선언 시 주변의 lexical environment, 즉 outer의 lexical environment와 함께 번들로 묶였기 때문)

2. 클로저가 필요한 이유

2-1. 전역변수 감소

• 클로져를 사용하지 않은 경우(전역변수 사용)

const btn = document.querySelector('button');
btn.addEventListener('click', handleClick);

let count = 0;
function handleClick(){
  count++;
  return count;
}

• 클로져를 사용한 경우

const btn = document.querySelector('button');
btn.addEventListener('click', handleClick);

function handleClick(){
  let count = 0;
  return function (){
    count++;
    return count;
  }
}

2-2. 재사용률 증가

const newTag = function(open, close){
	return function(content){
      return open+content+close;
    }
}

const bold = newTag('<b>','</b>');
const italic = newTag('<i>','</i>');

console.log(bold(italic("This is my content!")));
// <b><i>This is my content!</i></b>

• 클로져를 이용한 함수 newTag로 가독성과 재사용성을 높인 코드 구현

3. 착각하기 쉬운 클로저

function outer(){
  let name = 'kylie';
  if(true){
    let city = 'seoul';
    return function inner(){
      console.log(city);
    };
  }
}

• 위의 코드는 단순히 함수를 리턴할 뿐, 클로저가 아님!
  🌟 클로저는 inner 함수가 outer 함수의 지역변수를 사용했을 때만
  (console.log(city) 대신 console.log(name)이 들어갔다면)

Closure은 다른 함수 안에 정의된 내부 함수로서 (1)외부 함수의 식별자를 참조하고, 동시에 (2)외부 함수보다 생명주기가 긴 중첩함수

참고자료
https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
https://velog.io/@proshy/JS%ED%81%B4%EB%A1%9C%EC%A0%B8closure%EC%99%80-%ED%81%B4%EB%A1%9C%EC%A0%B8%EC%9D%98-%EC%82%AC%EC%9A%A9-%EC%98%88%EC%A0%9C
https://seo-tory.tistory.com/48