스코프와 클로저

🔸 스코프란?

아래 코드를 출력해보면 outer()에는 1이 출력됨.
1은 어떻게 찾을 수 있을까? 🤔
console.log(a); 콘솔에 a를 찍으라 했으니 이 a에 무슨 값이 들어가 있는지 찾아야 함. 이 때 무슨 값이 들어있는지 찾는 곳이 바로 스코프 임.

function outer() {
	let a = 1;
  console.log(a);
}

outer();

스코프는 아래 표 같이 그려져 있음. A라는 변수에는 1이 들어있다 라는 것을 표시한 것. 변수나 함수명에 들어있는 값을 찾을 때 들여다보는 곳이 스코프임. 이 스코프는 어디에 들어있을까? => outer 함수에 속해있음 고로 js는 `함수 단위`로 `스코프`가 생성됨

< outer 스코프>

a	1
ㅤ	ㅤ
ㅤ	ㅤ
ㅤ

또 다른 예제를 보면 아래 코드를 작성했을 시 B가 출력되고 outer에 B가 추가되고 inner의 스코프가 하나 더 생김.
console.log(b); 에서 b를 찾는 것이니 inner에서 먼저 b를 찾아보고 없으면 inner가 속해있는 outer에서 b를 찾아봄

function outer() {
	let a = 1;
  	let b = 'B'

  	function inner() {
    let a = 2;
    console.log(a);
    }
  inner();
}

outer();

< outer 스코프>

a	1
b	B
ㅤ	ㅤ
ㅤ

< inner 스코프>

a	2
	ㅤ
ㅤ	ㅤ
ㅤ

🔸 글로벌 스코프란?

let d = 'X' 라는 글로벌 스코프를 추가한다면 console.log(d);에서 X가 출력됨. 또한 글로벌 스코프 또한 생성됨.

🔸 스코프 체인?

inner -> outer -> global 순으로 스코프를 확인하게 되고 이렇게 스코프끼리 연결되어 있는 것을 스코프 체인 이라고 부름.

let d = 'X';

function outer() {
	let a = 1;
  	let b = 'B'

  	function inner() {
    let a = 2;
    console.log(d);
    }
  inner();
}

outer();

< global 스코프>

d	X
	ㅤ
ㅤ	ㅤ
ㅤ

🔸 클로저란?

쉽게 말해 생성한 시점의 스코프 체인을 계속 들고 있다는 것. 원래는 함수 내부에 선언한 변수는 함수가 끝나면 사라지지만, 클로저가 스코프를 계속 들고 있으므로 그 함수 내부의 변수를 참조할 수 있게 됨.

클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다.
클로저는 이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게하는 폐쇄성을 갖는다.

순서 1,2.
outer function이 하는 일은 inner function을 리턴하는 것.
순서 3,4,5.
inner에서는 console.log(b)를 출력함. b의 출력 값은 'B'
순서 6.
someFun은 outer에서 return 값을 받는것 = inner를 받는 것임. 그러고 someFun()을 실행.

보통은 outer 내부에서 선언한 let b='B' 라는 변수는 outer를 실행했을 때 inner를 return 하면 사라진다고 생각하지만 let someFun = outer();에선 'B'가 찍힘. 이 말인즉슨 생성한 시점에 스코프 체인을 계속 들고 있다는 것< 이것이 클로저~

let d = 'X';

//순서 1.
function outer() {
	let a = 1;
  	//순서 5. b 출력 값은 'B'
  	let b = 'B'
	
    //순서 3.
  	function inner() {
    let a = 2;
      //순서 4. b를 출력
    console.log(b);
    }
  //순서 2.
  return inner
}

//순서 6.  
let someFun = outer();
someFun();

출처 : https://www.youtube.com/watch?v=MbYShFxp-j0