[JS] Scope

ShinJuYong·2022년 3월 16일

TIL js

공부한것들

목록 보기

10/33

Scope

스코프가 뭔데?

Scope(유효 범위)는 참조 대상 식별자를 찾아내기 위한 규칙이다.

즉 JS엔진에서 변수가 선언되면서 식별자를 찾을때 스코프규칙을 따른다는것이다.

스코프의 구분

Global Scope(전역 스코프)
코드 전체에서 참조가 가능하다.
Local Scope(지역 스코프)
코드 블록{},()이 만든 스코프로 함수 자신과 하위 함수에서 참조가 가능하다.
Global Variable(전역 변수)
전역에 선언된 변수이며, 어디에서든 참조가 가능하다
Local variable(지역 변수)
지역(함수)내에서 선언된 변수이고, 그 지역과 그 지역 하위에서만 참조가 가능하다

JS에서의 Scope

대부분의 (C언어 파생)언어들은 블록-레벨 스코프를 가진다

int main(void)
{
	if(1)
    {
    	int x = 5;
        printf("x = %d\n", x);
    }
    printf("x = %d\n", x);  //identifier 'x' error!
    return 0;
}

하지만 Javascript는 ES6이전까지는 함수-레벨 스코프를 따랐다.
ES6이후에는 let키워드를 이용해 블록-레벨 스코프를 사용할수 있다.

var x = 0;
{
  var x = 1;
  console.log(x); // 1
}
console.log(x);   // 1

let y = 0;
{
  let y = 1;
  console.log(y); // 1
}
console.log(y);   // 0

Global scope(전역 스코프)

전역에 변수를 선언하면 이 변수는 어디서든지 참조가 가능한 변수가 된다.
var로 선언한 전역 변수는 window의 property가 된다.

var global = 'global';

function foo() {
  var local = 'local';
  console.log(global);
  console.log(local);
}
foo();

console.log(global);
console.log(local); // Uncaught ReferenceError: local is not defined

변수 global은 함수의 밖에서 선언됐지만, 함수 안에서 사용이 가능하다.

이러한 전역 변수의 사용은 변수 이름이 중복될 수 있으며
의도치 않은 재할당으로 인한 코드를 예측을 까다롭게 많드므로 최대한 사용을 자제해야한다.

렉시컬 스코프

함수의 선언부에 따라서 상위 스코프를 결정하는것

var x = 1;

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

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

foo(); // 1
bar(); // 1

bar()의 상위 스코프는 전역 스코프이므로 전역 변수 x의값 1을 출력한다

최소한으로 전역변수를 사용해보자.

전역 변수의 사용을 억제하는법은 전역변수 객체를 만들어 사용하는것이다.

var MYAPP = {}

MYAPP.args = {
	n1 : "nnnn",
  	n2 : "nnnnn",
};

console.log(MYAPP.args.n1)

즉시실행함수를 통해서도 억제가 가능하다.

(function () {
  var MYAPP = {};

  MYAPP.student = {
    name: 'Lee',
    gender: 'male'
  };

  console.log(MYAPP.student.name);
}());

console.log(MYAPP.student.name);
// 위의 함수는 실행이되고 증발하기에 전역으로 사용해도 후에 남지않는다.