스코프 , 스코프체인 , 클로저

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

outer();

a를 콘솔에 찍어보려고 할 때 a를 먼저 찾아야하는데 이때 scope를 사용하게 됩니다

 

scope는 table 형식으로 변수를 저장하고 있다고 이해하면 쉬운데 결국 scope는 변수의 값을 찾아올 때 들여다 보는 곳입니다

 

예를들면..

 

var A	1

이때 이 scope는 outer라는 이름으로 정의되어있어 변수 A를 찾아올 때 우선 outer에 scope를 확인하게 됩니다.

function outer() {
	var a = 1;
		

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

outer();

이렇게 작성하면 어떻게 나올까?

콘솔에 2가 나온다. 즉 여기서 javascript는 함수단위로 scope를 만든다고 이해할 수 있다. → es6에서는 조금 다르니 참고

이렇게 scope가 각각 만들어짐

outer용

var A	1

inner용

var A	1

function outer() {
	var a = 1;
	var b = "B";

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

outer();

이렇게 된다면 어떻게 될까?

 

우선 inner에서 변수 b를 찾아본 후 없다면 outer를 찾아본다

 

javascript 자체에서 outer안에 inner를 정의해놓았기 때문에 inner가 없다면 outer를 찾아가게 된다. 이렇게 다른 함수를 찾아갈 수 있도록 js에서는 위 스코프 표에 다음 찾아볼 함수를 표시해놓는다. 이렇게 연결되는 것을 스코프 체인이라고 한다

var c = "X"

function outer() {
	var a = 1;
	var b = "B";

	function inner() {
		var a = 2;
		console.log(a);
		console.log(b);
		console.log(c);
	}
	inner();
}

outer();

이렇게되어있다면 inner → outer → global 순으로 갈 것이다.

이게 스코프체인이라고 이해하면 된다

 

마지막으로 클로저입니다

var c = "X"

function outer() {
	var a = 1;
	var b = "B";

	function inner() {
		console.log(b);
	}
	return inner;
}

var someFunction = outer();
someFunction();

이렇게 실행했을 때 someFunction에서는 outer에서 return 값인 inner 함수를 받게 되는데 이때 someFunction을 실행시켰을 때 다른 언어들을 생각해보면 에러가 뜰 것이라고 예측할 수 있다.

 

왜냐하면 outer()를 실행시키고 scope는 소멸되어 b라는 변수가 없어졌을 것이라고 생각하게 되는데 javascript에서는 만들어진 scope를 없애지 않는다. 이렇게 스코프를 없애지않고 유지시켜 주는 것을 클로저라고 한다