JavaScript Scope

JavaScript Scope

 : Scope는 범위라는 의미입니다. 자바스크립트에서는 '변수의 유효범위'를 의미합니다. 크게 전역 스코프와 지역 스코프(블록 스코프, 함수 스코프)로 나뉩니다. 모든 변수는 스코프를 갖는데 이런 관점에서 전역 변수와 지역 변수로 나뉘게 됩니다. 

구분	설명	스코프	변수
전역	코드 전체 영역	전역 스코프	전역 변수
지역	함수 몸체 내부	지역 스코프	지역 변수

 

전역 스코프(global scope)와 전역변수(global variable)

 : 전역은 사전의 의미로 '어느 구역 전부' 를 말합니다. 전역 스코프는 전체범위를 의미하며 전역 스코프 내의 전역 변수는 어느 위치에서나 접근할 수 있다는 의미입니다.

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

//어디 위치에서 console.log를 출력해도 똑같이 상단에 선언된 전역변수 x의 1을 결과로 반환.

 

지역 스코프(local scope)와 지역 변수(global variable)

  지역 스코프는 '함수 내부의 일부 구역'을 의미합니다. 지역 스코프에서 만들어진 지역 변수는 일부 위치에서만 참조 가능합니다. 각 중괄호마다 동일한 변수명을 선언 및 할당할 수 있고, 각 변수는 중괄호{} 안의 지역 변수가 됩니다. 그래서 각 중괄호 안에서 console.log를 했을 때 해당 중괄호{} 안에서 선언된 지역 변수를 우선적으로 참조해 결과를 반환합니다.

let x = 1;
{
  let x = 100;
  console.log(x); // 100
    {
    let x = 500;
    console.log(x); // 500
    }
}
console.log(x);   // 1

//

 

함수 스코프(function-level scope)

 : 예전에는 var를 통해서 변수선언을 했는데 이런 경우 함수 스코프만을 지역변수로 적용하고 나머지는 모두 전역변수로 적용하는 규칙을 기본적으로 따르게 됩니다. 아래 예시에서 x는 함수 밖과 안에서 둘다 선언되었는데 안에서 선언된 x가 전역함수로 적용되어 함수 밖에서 console.log해도 1로 반환됩니다. 하지만 동일한 상황의 y는 함수 스코프가 적용되어 블록을 벗어나면 적용되지 않습니다. 의도치 않은 전역변수와 지역변수 적용의 문제가 생길 수 있어 현재는 사용하지 않습니다.

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


var y = 0;

function example{
  var y = 1;
  console.log(y); // 1
}
console.log(y);   // 0

 

블록 스코프(block scope)

  var 변수로 인한 전역변수 이슈로 새로운 변수 선언 키워드인 let과 const가 도입됩니다. 새로운 키워드는 모든 코드 블록(function, if, for, while 등)을 지역 스코프로 인정하는 블록 스코프를 따르게 됩니다. 이전에는 함수 안에 var로 선언시 전역변수로 적용됐지만 let이나 const를 사용시 블록 안의 지역변수로 적용되어 블록을 벗어나면 반환되지 않습니다.

let x = 1;
{
  let x = 10;
  let y = 100;
  console.log(y); // 100
}
console.log(x);   // 1
console.log(y); // ReferenceError: y is not defined

 

Scope Pollution

  블록 스코프라도 let이나 const를 생략할 경우 가장 가까운 변수 x를 찾아서 재할당 하기 때문에 지역변수로 사용하고자 할 때는 선언을 명확하게 해야 합니다. 

let x = 1;
{
  x = 100;
  console.log(x); // 100
}
console.log(x);   // 100

 

정리

• Scope는 변수의 유효범위이다.
• 전역 스코프와 지역 스코프로 나뉘며 어떤 스코프에서 선언되느냐에 따라 전역변수와 지역변수가 된다.
• var로 선언한 변수는 함수 스코프를 기본으로 적용한다. 블록을 벗어나 전역변수가 되기 때문에 사용하지 않는다.
• let과 const는 블록 스코프를 기본으로 적용한다. 블록 안에서만 사용가능한 지역변수가 된다.
• 블록 안에서 선언을 생략하고 재할당 하면 선언된 동일한 변수명 중 가장 가까이 있는 변수에 재할당된다.

 

참고

모던 자바스크립트 튜토리얼 - 변수의 유효범위와 클로저

생활코딩 - 유효범위

제로초 - 함수의 범위(scope)

TCPSCHOOL.COM 변수의 유효범위

MDN 스코프

PoiemaWeb - 스코프

Xedni's Lab - 스코프