[JavaScript] 스코프(Scope)개념

- 개요

안녕하세요. 이번 시간에는 자바스크립트에서 스코프(Scope)에 대해 알아보겠습니다.

 

- 개념

Scope라는 단어를 우리나라 말로 해석하면 '범위'라는 뜻을 가지고 있습니다. 즉, 스코프(Scope)는 '변수에 접근할 수 있는 범위'라고 할 수 있습니다. 

 

자바스크립트에서는 2가지 타입의 스코프가 있습니다. 전역(Global) 스코프와 지역(Local) 스코프

 

전역 스코프(Global Scope)는 말 그대로 전역에 선언되어 있어서 어느 곳에서든 해당 변수에 접근을 할 수 있습니다.

반대로 지역 스코프(Local Scope)는 말 그대로 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에서는 해당 변수에 접근할 수 없습니다.

 

/**
 * @author Ryan
 * @description 해당 javascript 파일 전체에 적용되는 전역 스코프
 */

//전역 스코프에 선언 "전역 변수"
const hi = "Hi"

function Hi() {
  console.log(hi)
}

function Bye() {
  /**
   * @author Ryan
   * @description Bye() 함수 지역 스코프
   */

  //Bye 함수 안에 선언된 "지역 변수"
  const bye = "Bye"
  console.log(bye)
}

Hi()
Bye()

/**
 * - 실행 결과 -
 * Hi
 * Bye
 */

 

위 hi 변수와 bye 변수에 차이는 변수를 참조할 수 있는 범위입니다.

 

만약 bye라는 변수를 Bye() 함수 밖에서 참조하면 "ReferenceError: bye is not defined" bye라는 변수가 선언되지 않았다는 Error가 발생합니다.

 

function Bye() {
  /**
   * @author Ryan
   * @description Bye() 함수 지역 스코프
   */

  //Bye 함수 안에 선언된 "지역 변수"
  const bye = "Bye"
  console.log(bye)
}

Bye()

console.log(bye)

/**
 * - 실행 결과 -
  /Users/sinhangug/ryan/dev/language/javascript.js:27
  console.log(bye)
              ^

  ReferenceError: bye is not defined
      at Object.<anonymous> (/Users/sinhangug/ryan/dev/language/javascript.js:27:13)
      at Module._compile (internal/modules/cjs/loader.js:1085:14)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
      at Module.load (internal/modules/cjs/loader.js:950:32)
      at Function.Module._load (internal/modules/cjs/loader.js:790:12)
      at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
      at internal/main/run_main_module.js:17:47
 */

 

전역 스코프와 지역 스코프에 차이는 변수에 접근할 수 있는 범위라고 생각하시면 됩니다.

 

이번 시간에는 스코프(Scope)에 대해 알아봤습니다. 어렵지 않은 개념이라고 생각합니다.

 

하지만 ECMAScript6(ES6)에서 let과 const가 생기면서 스코프에 대한 개념이 한층 더 추가됐습니다.

 

다음 시간에 더 자세히 알아보겠습니다.