[JavaScript] 9. 스코프

스코프

스코프란 식별자의 유효범위를 의미합니다.

각 변수는 선언된 위치에 따라 다른 코드에서 참조할 수 있는 범위가 정해집니다.

var, let, const키워드에 따라서 스코프 범위가 다르기 때문에 이를 신경써서 코드를 작성해야 합니다.

스코프의 종류

스코프는 전역 스코프와 지역 스코프가 있습니다.

전역 스코프는 코드 전체에 대한 스코프를 가집니다.

따라서 어디서든지 참조할 수 있습니다.

지역 스코프는 변수가 선언된 지역 내, 혹은 그 하위 스코프에서 참조할 수 있습니다.

var

var 키워드를 통해 선언된 변수는 함수 내부만을 지역 스코프로 가집니다.

이를 함수 레벨 스코프라고 합니다.

아래 예제는 전역 스코프와 함수 레벨 스코프를 가지는 변수를 참조합니다.

function print(x, y, z) {
  console.log(`${x} ${y} ${z}`);
}

var x = 'global';
print(x, y, z); // ReferenceError: y, z are not defined

function outer() {
  var y = 'outer local';
  print(x, y, z); // ReferenceError: z is not defined
  
  function inner() {
    var z = 'inner local';
    print(x, y, z); // 'global outer local inner local'
  }
  inner();
}
outer();

print(x, y, z); // ReferenceError: y, z are not defined

이 외 블록문에서 var는 전역 스코프를 가집니다.

var i = 0;

for (var  i = 0; i < 3; i++) ;

console.log(i); // 3

JavaScript는 Lexical Scope를 따릅니다.

Lexical Scope란 함수가 정의된 위치에 따라 상위 스코프를 결정하는 것입니다.

아래 예제에서 함수가 정의된 위치에 따라 test2 함수의 상위 스코프는 전역 스코프가 됩니다.

따라서 test2에서 접근하는 변수 x의 값은 전역 스코프에 위치하는 변수 x가 됩니다.

code>

var x = 1;

function test1() {
  var x = 10;
  console.log(x);
}

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

test1();
test2();

result>

10
1

let / const

let과 const로 선언된 변수는 블록 레벨 스코프를 가집니다.

이는 중괄호로 씌워진 블록 내부를 지역 스코프로 인정합니다.

let x = 1;

{
  let x = 2;
  let y = 3;
}

console.log(x); // 1
console.log(y); // Reference Error