[JavaScript] 스코프

 

 

 

자바스크립트에서의 변수 스코프는 자바에서의 스코프와 유사하다.

변수를 선언할 때 var키워드를 사용할 시 전역 변수로 취급될 수 있음에 유의하자.

 

 

렉시컬 스코프

 

 

자바스크립트는 렉시컬 스코프 방식을 따른다.

주어진 상황에서 결과값이 어떻게 출력되는지 예측해보자.

 

var x = 1;

function foo(){
  var x = 10;
  bar();
}

function bar(){
  console.log(x);
}

foo();
bar();

 

 

정답은 1 1 이다.

 

자바스크립트에서 함수의 스코프를 정의할 때 함수를 어디서 호출한지는 중요하지 않고, 함수가 정의된 위치에 따라 상위 스코프를 결정한다.

 

bar함수는 전역에서 정의된 함수이다. bar함수가 정의될 때 이미 스코프가 결정됐기에 전역변수로 선언된 1을 출력하게 된다.

 

 

 

함수 안에서의 변수

 

 

function foo(){
  var x = 1234;
  return x;
}

console.log(x);

 

 

변수 호이스팅에 의해서 var x에는 undefined이 선언되어있을 것 같지만, 결과는 그렇지 않다. 실행 시 오류가 발생한다.

 

지금까지 알고 있었던 변수 호이스팅은 전역 변수에 대해서만 발생하고, 함수 내부에서 선언한 변수는 함수가 호출된 직후에 실행된다. (undefined로 초기화함)

 

즉 정리해보면, 변수 호이스팅은 스코프 단위로 발생한다고 할 수 있다.

 

 

전역 변수 줄이기

 

 

 

전역 변수가 많아지게 되면 상태를 변경할 수 있는 시간도 길고 기회도 많다는 것을 의미한다.

뿐만 아니라 전역 변수의 검색 속도도 느리고 오류가 발생할 수 있는 가능성도 높아지니 전역 변수의 사용을 최대한 억제해야 한다.

 

1. 즉시 실행 함수

 

모든 코드를 즉시 실행 함수화하면 변수는 지역 변수가 된다.

 

 

2. 객체 활용

 

let variables = {};

variables.a = "b";

 

전역 변수로 사용할 변수들을 프로퍼티로 관리한다.

 

 

// 클로저 배우고 더 추가하기

 

 

3. ES6 모듈

 

독자적인 모듈 스코프를 사용한다. 

var키워드로 선언한 변수는 더 이상 전역 변수가 아니게 된다.