자바스크립트 - scope(스코프)란?

 

scope란?

변수에 접근할 수 있는 범위를 의미한다.

이 범위는 변수의 접근성을 관리하는 정책이며, scope에는 global(전역)와 local(지역) 2개의 범위가 존재한다.

 

global(전역) scope

const name = "Lim"; // 전역 스코프
function print(){
	console.log(name); // Lim
}

print();
console.log(name); // Lim

먼저 name이라는 변수를 정의하고 print 함수 블록 안과 밖에 console.log(name)을 출력하면 둘 다 같은 값이 나온다.

따라서, 변수 name은 전역 스코프라고 볼 수 있다.

전역 scope로 선언된 변수는 모든 범위에서 사용할 수 있다. 

 

local(지역) scope

코드 블록 내부에서 변수를 선언하고, 외부에서 console.log(bool) 했을 때 오류가 발생한다. 

if (true){
// "if" block scope
    const bool = "true";
    console.log(bool); // "true"
}

console.log(bool); // ReferenceError: message is not defined

그 이유는 코드 블록 { ... } 안에서만 변수 bool을 사용할 수 있다.

코드 블록은 if문 뿐만 아니라 for, while문도 범위를 만들 수 있고, 또 코드 블록만 독립적으로 만들 수 있다.

독립형 코드 블록

{
  // block scope
  const bool = "true";
  console.log(bool); // "true"
}
console.log(bool); // throws ReferenceError

이러한 것을 지역 scope라 하고, 해당 지역과 그 지역의 하부 지역에서만 접근할 수 있으며 그 지역을 벗어나면 접근할 수 없는 것이 특징이다.

 

const, let, var의 가능 범위

const와 let은 코드 블록 범위에 속하고, var는 블록 범위에 속하지 않는다.

if (true) {
  // "if" block scope
  var count = 0;
  console.log(count); // 0
}
console.log(count); // 0

var로 선언된 count 변수가 if 코드 블록 내에서 뿐만 아니라, 코드 블록 밖에서도 출력된다.

그 이유는 var의 scope는 블록 범위가 아닌 함수 범위에 속하기 때문이다.

function hello() {
  // "hello" function scope
  var message = 'hello!';
  console.log(message); // 'hello!'
}

hello();
console.log(message); // throws ReferenceError

그렇기 때문에 변수 message는 함수 범위 내에서 액세스 할 수 있지만 외부에서는 액세스 할 수 없다.

function hello() {
  // "hello" function scope
  const two = 2;
  let count = 0;
  function hi() {}

  console.log(two);   // 2
  console.log(count); // 0
  console.log(hi);  // function
}

hello();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(hi);  // throws ReferenceError

이와 같이 같은 방식으로 함수 내부에서 선언된 let, const 변수들 또한 함수 범위 내에서 액세스 할 수 있지만 외부에서는 액세스 할 수 없다.

 

중첩 범위

function hello() {
  // "hello" function scope(외부 범위)
  const message = 'hello!';

  if (true) {
    // "if" code block scope(내부 범위)
    const name = 'Lim';
    console.log(message); // 'hello!'
  }

  console.log(name); // throws ReferenceError
}

hello();

if 코드 블록 범위는 hello() 함수 범위 내에서 중첩된다.

모든 유형의 범위들은 중첩이 가능하다.

다른 범위 내에 포함된 범위를 inner scope(내부 범위)라 하고, if 코드 블록 범위는 hello() 함수 범위의 inner scope(내부 범위)이다.

반대로 다른 범위를 감싸는 범위를 outerscope(외부 범위)라고 하고, hello()함수 범위는 if코드 블록 범위의 outer scope(외부 범위)라고 볼 수 있다.

외부 범위에 선언된 변수는 내부 범위에 액세스 할 수 있지만, 내부 범위에 선언된 변수는 외부 범위에서 액세스 할 수가 없다.

 

범위를 통한 변수 분리

범위는 변수를 분리하며, 좋은 범위는 이름이 같은 변수를 가질 수 있다.

즉, scope를 잘 활용하면 변수 이름을 재사용할 수 있다는 뜻이다.

function fnc1() {
  // "fnc1" function scope
  let count = 0;
  console.log(count); // 0
}

function fnc2() {
  // "fnc2" function scope
  let count = 1;
  console.log(count); // 1
}

fnc1();
fnc2();

이렇게 두 개의 count는 각각 다른 함수 범위 안에 존재하기 때문에 서로 다른 count로 인식한다.

 

정리!

scope는 변수의 가용성을 관리하는 정책이며, 범위 내에 정의된 변수는 해당 범위 내에서만 액세스 할 수 있지만 외부에서는 액세스 할 수 없다.

자바스크립트에서 범위는 코드 블록, 함수, 모듈로 작성된다.

const 및 let변수는 코드 블록 또는 모듈의 기능에 의해 범위가 되며, var변수만 함수 또는 모듈에 의해 범위가 된다.

범위는 중첩될 수 있고, 내부 범위 내에서 외부 범위의 변수에 액세스 할 수 있다.