scope & variable

scope

변수에 대해 정리하기 전에 먼저 scope 에 대해 간단하게 정리해보자.

scope 란 변수에 접근할 수 있는 범위를 의미한다. 전역 스코프global 와 지역 스코프local 의 두 가지 타입으로 나뉜다. 전역 스코프는 말 그대로 코드 전역에 선언되어 어디에서든지 해당 변수에 접근할 수 있는 권한이 부여된다. 지역 스코프는 해당 블록에서만 변수에 접근할 수 있다.

 

const x = 17;

function scopeTest() {
    var x = 11;
    console.log(x);
}

scopeTest() // 11
console.log(x); // 17

variable

변수를 선언하는데에는 var, let, const 세 가지의 방법이 있다.

var

var 를 이용한 변수 선언은 함수가 시작할 때 처리된다. 함수 본문 내에서 var 를 이용하여 선언한 변수는 선언 위치와 상관없이 함수 본문이 시작되는 최상위 지점으로 끌어올려진다. 블록 기준으로 스코프가 생기지 않기 때문에 한번 선언되면 전역적으로 영향을 미칠 수 있어 선언되기 이전의 변수에도 영향을 끼칠 수 있었다. 이를 호이스팅 hoisting 이라고 한다. 이러한 특징 덕분에, var 로 선언한 변수는 선언 전에 사용하여도 error 가 발생하지 않는다.

hoisting 은 선언에서만 이루어지고 할당=에는 일어나지 않는다. 아래의 예제 코드를 보면 이해할 수 있다.

 

function sayHi() {
    var phrase; // 선언은 함수 시작 시 처리된다.
    console.log(phrase); // undefined 출력
    // var phrase; << 여기에 선언해도 hoisting 되기 때문에 상관 없음.
    phrase = "Hello"; // 할당은 실행 흐름이 해당 코드에 도달했을 때 처리된다.
  }

sayHi(); // Hello 가 아닌 undefined 가 출력된다.

 

이러한 단점을 보완하기 위해, es2015(ES6) 이후 let 과 const 가 추가되었다.

let

let 은 var 와 거의 유사하게 동작한다. 다만 let 은 hoisting 의 적용을 받되 실행되는 블록에서만 유효한 범위를 갖는 지역 변수를 선언한다. 선언과 동시에 임의의 값으로 초기화할 수도 있다.

 

function varTest() {
    var x = 1;
    if (true) {
      var x = 2;  // var = 블록 기준으로 스코프가 생기지 않으므로 상위 블록과 같은 변수 = 1에서 2로 변수가 바뀐다.
      console.log(x);  // 2
    }
    console.log(x);  // 2 
  };

function letTest() {
    let x = 1;
    if (true) {
      let x = 2;  // let = 블록에서만 유효하므로 상위 블록과 다른 변수 = 두 x 는 다른 변수이다 = 별개로 동작한다.
      console.log(x);  // 2
    }
    console.log(x);  // 1
  };

 

변수 재할당이 가능하고, 선언과 초기화가 분리되어 이루어지므로 이전의 변수에 영향을 끼치지는 않지만 같은 변수를 같은 함수나 블록 범위 내에서 재선언하면 syntax error 가 발생한다. 따라서 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명만 사용하여 참조해야 한다.

 

function varTest() {
    var x = 1;
    var x = 2;
    console.log(x); // 2
}

function letTest() {
    let x = 1;
    let x = 2;
    console.log(x); // SyntaxError: Identifier 'x' has already been declared
}

const

변하지 않는 변수인 상수를 선언할 때에는 let 대신 const 를 사용한다.
const 역시 let 과 마찬가지로 블록 범위 내에서만 유효한 범위를 갖는다. 상수의 값은 재선언 및 재할당이 불가능하다. 즉 immutable 하다는 뜻이다.

결론

var 의 특성 때문에 되도록이면 const, let 을 이용하여 선언을 하는 편이 근래의 트랜드라고 한다.