08. 자바스크립트의 Scope 에 대한 이해

이번에는 자바스크립트의 Scope 에 대해서 알아봅시다. Scope 란, 우리가 변수 혹은 함수를 선언하게 될 때 해당 변수 또는 함수가 유효한 범위를 의미합니다. Scope 는 총 3가지 종류가있습니다.

1. Global (전역) Scope: 코드의 모든 범위에서 사용이 가능합니다.

2. Function (함수) Scope: 함수 안에서만 사용이 가능합니다.

3. Block (블록) Scope: if, for, switch 등 특정 블록 내부에서만 사용이 가능합니다.

Scope 이해

예시를 통한 Scope 이해

한번, 예시 코드를 보고 Scope 를 이해해봅시다.

const value = 'hello!';   // Global Scope

function myFunction() {
  console.log('myFunction ');
  console.log(value);
}

function otherFunction() {
  console.log('otherFunction ');
  const value = 'bye!';  // Function Scope
  console.log(value);
}

myFunction();
otherFunction();

console.log('global scope ');
console.log(value);

위 코드의 결과는 다음과 같습니다.

// 결과)
myFunction
hello!
otherFunction
bye!
global scope
hello

또 다른 예시를 확인해봅시다.

const value = 'hello!';   // Global Scope

function myFunction() {
  const value = 'bye!';    // Function Scope
  const anotherValue = 'world';   // Function Scope
  function functionInside() {
    console.log('functionInside ');
    console.log(value);
    console.log(anotherValue);
  }
  functionInside();
}


myFunction()
console.log('global scope ');
console.log(value);
console.log(anotherValue);

위 코드의 결과는 다음과 같습니다.

// 결과)
functionInside
bye!
world
global scope
hello!
ReferenceError: anotherValue is not defined

이제, 또 다른 예시를 알아봅시다.

const value = 'hello!';           // Global Scope

function myFunction() {
  const value = 'bye!';           // Function Scope
  if (true) {
    const value = 'world';        // block scope
    console.log('block scope: ');
    console.log(value);
  }
  console.log('function scope: ');
  console.log(value);
}

myFunction();
console.log('global scope: ');
console.log(value);

위 코드의 결과는 다음과 같습니다.

// 결과)
block scope: 
world
function scope:
bye!
global scope:
hello!

const 로 선언한 값은 Block Scope 로 선언이 됩니다. 따라서, if 문 같은 블록 내에서 새로운 변수/상수를 선언하게 된다면, 해당 블록 내부에서만 사용이 가능하며, 블록 밖의 범위에서 똑같은 이름을 가진 값이 있다고 해도 영향을 주지 않습니다.

let 또한 마찬가지 입니다.

하지만 var 는 어떨까요?

var 변수인 경우

var 는 Function Scope 로 선언이 되므로, if 문 블록 내부에서 선언한 value 값이 블록 밖의 value 에도 영향을 미치게 됩니다.

var value = 'hello!';

function myFunction() {
  var value = 'bye!';
  if (true) {
    var value = 'world';
    console.log('block scope: ');
    console.log(value);
  }
  console.log('function scope: ');
  console.log(value);
}

myFunction();
console.log('global scope: ');
console.log(value);

위 코드의 결과는 다음과 같습니다.

// 결과)
block scope:
world
function scope:
world
global scope:
hello!