javascript 33가지 기본 컨셉: 6. Scope

Scope

스코프란 각 변수를 참조할 수 있는 범위를 나타냅니다. 한마디로 해당 변수를 사용할 수 있나 없나를 의미한다. 

Lexical Scope

js의 경우 각 변수들의 스코프가 결정될 때는 함수가 호출될 때가 아닌 선언될 때이다. 그래서 아래의 결과로 1이 호출된다.
함수가 선언될때 x의 스코프가 결정되기 때문에 bar는 가장 바깥의 x에 접근하게 된다.

let x = 1;

function foo() {
  let x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo();
bar();

Global Scope

어디서든지 접근하여 변수를 사용할 수 있다. 가장 최상위 단의 scope이다.

var a = 1;

function hi(){
 console.log(a);
}

hi();

1이 출력될 것이다. 

 

js에서 변수를 선언할 수 있는 방법은 세가지가 있는데 var, let, const가 있다. let, const는 es6부터 생겼는데 

 

Var

var는 함수 스코프이다. 함수 기준으로 스코프가 형성된다는 의미이다. 

var a = 1;

function ab(){
    var a = 3;
    console.log(a);
}

ab();

console.log(a);

ab()에서는 3을 출력하고 제일 밑에서는 1을 출력한다. 함수를 기준으로 서로 다른 scope로 구분되어서 이와 같은 결과가 나온다.

 

그래서 아래와 같은 경우에는 서로 같은 스코프로 인식하여 모두 3이 출력된다. 

var a = 1;

if(true){
    var a = 3;
    console.log(a);
}

console.log(a);

 

let, const

let, const는 block을 기준으로 scope를 만듭니다. 그래서 아래와 같은 경우에는 3, 1이 출력된다. 

let a = 1;

if(true){
    let a = 3;
    console.log(a);
}

console.log(a);

 

주의할 점

scope에 있는 변수들을 참조할 때 참조하려는 변수가 없으면 더 큰 scope에서 찾은 후 있으면 사용한다. 하지만 반대의 경우에는 error가 발생한다. 

아래의 예를 보면 바로 이해가 될 것이다. 

let a = 1;

if(true){
    console.log(a);
}

console.log(a);

1과 1이 출력된다. if(true)안의 scope에서는 a가 없기 때문에 밖의 scope에서 찾은 후 let a = 1;을 참조하는 것을 알 수 있다.

반대의 경우에는 어떻게 될까?

if(true){
    let a = 1;
}
console.log(a);

if문안의 a를 선언해준 후 밖에서 참조하려고 하는데 안에 값을 참조할 수 없어서 오류가 발생한다. 

요약하자면 안에서 밖의 스코프를 참조할 수 있지만 밖에서 안의 스코프를 참조할 수 없다. 이 점을 유의하자!!