Code States TIL 7일차 - Scope 와 Closure

오늘은 Javascript의 Scope 와 Closure에 대해 배웠습니다.
Scope는 선언한 변수의 유효범위에 대한 것입니다.
var : 선언된 함수 내부, 변경 가능, 재선언 가능
let : 선언된 괄호 내부, 변경 가능, 재선언 불가
const: 선언된 괄호 내부, 변경 불가, 재선언 불가

예를 들면

var a=3;
if(a>2) var a=5;
console.log(a) // output : 5

function f(a){
  var a=3;
  console.log(a);
}
f(4); //output : 3

는 문제없이 작동합니다. (다만 f(a)의 경우 a의 값에 상관없이 항상 3을 출력합니다.)

let a=3;
if(a>2) let a=5;// SyntaxError를 일으킵니다.

function f(a){
  let a=3;// SyntaxError를 일으킵니다.
  console.log(a);
}
f(4); //output : 3

와 같이 이미 선언된 변수이름이라 다시 선언할 수 없다는 메시지와 함께 컴파일도 되지 않는 모습을 보입니다.

Closure는 "외부 함수의 변수에 접근할 수 있는 내부 함수 또는 이러한 작동 원리를 일컫는 용어"라고 합니다.

function outerFunc(){
  let outerVar = 0;
  console.log(outerVar);
  function innerFunc(){
    outerVar++;
	console.log(outerVar);
  }
  return innerFunc;
}
let a=outerFunc(); // output: 0
a(); // output: 1
a(); // output: 2

a에 outerFunc()을 할당하게 되면 함수 innerFunc가 할당되어 함수처럼 기능합니다. 이것으로 외부함수 outerFunc의 변수 outerVar를 조작하거나 값을 가져올 수 있습니다. 객체를 이용하면 좀 더 다양한 작용이 가능합니다.

function outerFunc(){
  let outerVar = 0;
  return {
    inc: function(){
      outerVar++;
    },
	dec: function(){
      outerVar--;
    },
  	getV: function(){
      return outerVar;
    }
  }
}
let a=outerFunc(); 
a.inc();
a.getV(); // => 1
a.dec();
a.getV(); // => 0

같은 식으로 사용도 가능하다고 합니다. Closure의 장점은 외부에서 다른 방법으로 접근할 수 없는 변수를 만들고 이를 다룰 수 있다는 점입니다. 마치 C++의 class가 생각나는 사용법입니다. 또 다른 사용법은 두 변수를 입력받는 함수에서 한 가지 변수가 한가지로 고정되는 경우 (ex: a+b를 계산할 때 a는 항상 1000이고 b만 계속 변하는 경우)에 반복을 줄이기 위해 쓸 수 있다고 합니다.