스코프란?

var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프도 다르게 동작한다.
스코프는 변수 그리고 함수와 깊은 관련이 있다.

예제

function add(x, y) {
  // 매개변수는 함수 몸체 내부에서만 참조할 수 있다.
  // 즉, 매개변수의 스코프는 함수 몸체 내부다
  console.log(x, y)
  return x + y;
}

add(2, 5);

// 매개변수는 함수 몸체 내부에서만 참조할 수 있다.

console.log(x, y); // ReferenceError: x is not defined

변수는 코드의 가장 바깥 영역뿐 아니라 코드 블록이나 함수 몸체 내에서도 선언할 수 있다. 이때 코드 블록이나 함수는 중첩될 수 있다.

var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수

if (true) {
  var var2 = 2; // 코드 블록 내에서 선언한 변수
  if (true) {
    var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수.
  }
}

function foo() {
  var var4 = 4; // 함수 내에서 선언한 변수
  
  function foo1() {
    var var5 = 5; // 중첩된 함수 내에서 선언한 변수.
  }
}

console.log(var1); // 1
console.log(var2); // 2
console.log(var3); // 3
console.log(var4); // ReferenceError: x is not defined
console.log(var5); // ReferenceError: x is not defined

모든 식별자(변수 이름, 함수 이름, 클래스 이름 등) 은 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다.

예제

var x = 'global';

function foo() {
var x = 'local';
  console.log(x); // local
}

foo(); 

console.log(x); // global

코드의 문맥과 환경

코드가 어디서 실행되며 주변에 어떤 코드가 있는지를 렉시컬 환경 이라고 부른다. 즉, 코드의 문맥은 렉시컬 환경으로 이뤄진다. 이를 구현한 것이 실행 컨텍스트이며, 모든 코드는 실행 컨텍스트에서 평가되고 실행된다. 스코프는 실행 컨텍스트와 깊은 관련이 있다.

만약 스코프라는 개념이 없다면 같은 이름을 갖는 변수는 충돌을 일으키므로 프로그램 전체에서 하나밖에 사용할 수 없다.

식별자는 어떤 값을 구별할 수 있어야 하므로 유일해야 한다. 따라서 식별자인 변수 이름은 중복될 수 없다. 즉, 하나의 값은 유일한 식별자에 연결되어야 한다.

예를 들어 파일 이름은 하나의 파일을 구별하여 식별할 수 있는 식별자다. 식별자인 파일 이름은 유일해야 한다. 하지만 우리는 컴퓨터를 사용할 때 하나의 파일 이름만 사용하지는 않는다. 식별자인 파일 이름을 중복해서 사용할 수 있는 이유는 폴더라는 개념이 존재하기 때문이다. 만약 폴더가 없다면 파일 이름은 유일해야 한다. 컴퓨터 전체를 통틀어 하나의 파일 이름만 사용해야 한다면 파일 이름을 만드는 것이 무척이나 번거롭게 된다.

이와 마찬가지로 프로그래밍 언어에서는 스코프를 통해 식별자인 변수 이름은 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 된다. 스코프 내에서 식별자는 유일해야 하지만 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다. 즉 스코프는 네임스페이스다.

var 키워드로 선언한 변수의 중복 선언

var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용된다. 이는 의도치 않게 변수값이 재할당되어 변경되는 부작용을 발생시킨다.

예제

function foo() {
var x = 1;
  // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다
  // 아래 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.

var x = 2;
  console.log(x); // 2
}
foo();

하지만 let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.

예제

function bar() {
  let x = 1;
  // let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.

 let x = 2; // SyntaxError: Identifier 'x' has already been declard
}
bar();