[JavaScript] - Scope

스코프(Scope)는 범위라는 뜻를 갖고 있다. 즉, 변수에 접근할 수 있는 범위를 의미한다.

• Scope is related to visibility of variables

함수가 실행되는 환경을 의미하는 콘텍스트(Context)와는 다른 개념이니 주의하자.

• Context is refers to the object to which a function belongs.

Global Scope

브라우저를 기준으로 변수가 함수 바깥이나 중괄호 바깥에 선언되었다면 전역 스코프에 정의된다고 볼 수 있다. Node.js의 경우 전역 스코프에 대해 다르게 정의한다.

전역 스코프에 정의된 변수를 전역 변수라고도 얘기한다. 전역 변수를 선언하면 코드 모든 곳에서 해당 변수를 사용할 수 있다.

var msg = 'hi'; //global variable
function printMsg() {
  console.log(msg);
}
printMsg();

var 을 사용해 전역 변수를 선언할 경우, 변수가 덮어씌워지는 현상이 발생할 수 있어서 사용에 주의가 필요하다. 그리고 각 함수들 안에서 전역 변수를 계속 바꾸는 것은 좋은 습관이 아니다. 가급적 전역 변수는 건드리지 말자.

Local Scope

전역 스코프와는 다르게, 특정 부분에서만 사용 가능한 변수는 지역 스코프(local scope) 내에 포함되어 있다고 할 수 있다.

자바스크립트에는 function scope와 block scope 두 개의 local scope가 존재한다. 여기서 말하는 block는 {...}을 의미하며, 이 블록을 벗어나면 블록 내부에 선언된 변수를 참조할 수 없다.

var은 function scoped이고, let과 const는 block scoped이다.

Function scope

function printAge(){
  if(true) {
  var age = 10;
  }
  console.log(age);
}
printAge(); //10

if문 안에 선언한 age변수를 if문 밖에서 가져올 수 있다. 왜냐면 var은 function scope 를 가지고 있기 때문에 선언된 함수의 내부 어느 곳에서라도 접근이 가능하기 때문이다. 위 코드가 만약 블록 스코프를 가졌다면 if 문 블록 내에서만 age 변수에 접근할 수 있으므로 printAge 함수 내부의 console.log에서 에러가 발생했을 것이다.

Block scope

{
  let age = 10;
}
console.log(age);//error

아까 scoped is related to visibility of variables라 했다. block scope라 함은 let 이 '블록 안에서만' visible한다는 말이다. 즉 블록 밖에서 접근하려 하면 에러가 생긴다.

하지만 var의 경우에는 다르다. var은 block scope가 아닌 function scope를 가지기 때문에 블록 안에서도, 밖에서도 visible하다.

{
  var age = 10;
}
console.log(age);//10

블록 밖에서 age변수에 접근 가능하다.

출처: https://jungpaeng.tistory.com/60