오늘 다루는 var와 let의 차이, 스코프 개념은 자바스크립트를 다루는데 있어서 가장 기본적이고 중요한 지식이므로 잘 기억해두시길 바랍니다.

var, let

var와 let은 변수 등을 선언할 때 사용하는 선언입니다. var, let으로 선언된 변수는 지난 포스트에서 봤던 const와는 다르게 값의 변경이나 재선언이 가능한 변수가 됩니다.

var num1 = 1;
let num2 = 2;

num1 = 10; //가능
num2 = 10; //가능

var와 let의 차이, 스코프

스코프란 변수나 함수가 스크립트 내부의 어떤 위치에서 참조될 수 있는 가를 말하는 개념입니다. 자바스크립트는 스크립트 내부에서 어느 곳이든 변수를 선언할 수 있지만, 선언된 위치에 따라 두 가지 경우의 스코프를 가지고 있습니다.

1. 스크립트 내부 어디에서든 참조가 가능한 글로벌 스코프
2. 정의된 구역 내부에서만 참조가 가능한 로컬 스코프

글로벌 스코프

글로벌 스코프는 스크립트 내에서 어떤 내부에도 포함되어있지 않게 선언된 변수가 갖는 스코프입니다. 그 이름처럼 스크립트 전체에서 글로벌 스코프를 가진 변수에 접근할 수 있습니다.

var num1 = 1;

function getSum() {
  return num1 + num1;
}

로컬 스코프

로컬 스코프는 변수가 선언된 특정 구역 내에서만 접근할 수 있는 변수입니다. 이런 변수들을 로컬 스코프를 가진 지역 변수라고도 합니다. 로컬 스코프는 또 다시 함수 스코프와 블록 스코프로 나뉘어 집니다.

함수 스코프

함수 스코프는 함수 내에서 변수를 선언한 것으로, 함수 내부에서만 변수에 접근 할 수 있는 것 입니다. 즉, 함수 외부에서는 변수에 접근할 수 없다는 것 입니다.

무엇보다 잠시 후 나올 블록 스코프와의 가장 큰 차이점은 var, let, const로 선언한 변수들은 모두 함수 내부에서만 사용가능하다는 것 입니다.

블록 스코프

블록 스코프는 중괄호{}(조건문, 반복문 등)에서 변수를 선언한 것으로, 블록 내부에서만 변수에 접근할 수 있는 것입니다.

함수 스코프와의 가장 큰 차이점은 let, const로 선언된 변수는 블록 내에서만 접근할 수 있고, var로 선언되었다면 블록 밖에서도 접근할 수 있다는 점이 다릅니다.

let globalVar = 1;	//글로벌 스코프

function getAdd() {
    let localVar = 2;	//로컬 스코프
    return localVar + globalVar;
}

console.log(getAdd());
console.log(globalVar);
console.log(localVar);	//에러!:로컬 스코프 외부에서 참조시도

글로벌과 로컬 스코프는 엄격하게 구분한다.

자바스크립트에서 글로벌 스코프와 로컬 스코프는 엄격하게 구분됩니다. 다음 코드를 보겠습니다.

let variable = 1;  //글로벌 스코프 변수 variable

function getValue() {
    let variable = 2; //로컬 스코프 변수 variable
    return variable;
}

console.log(getValue());
console.log(variable);

변수 선언은 중복 정의를 허용하지 않거나, 이름이 같을 경우 나중에 선언된 값으로 덮여씌워진다고 했습니다. 하지만 위에 결과에선 각자 다른 변수를 가리키고 있습니다.

이처럼 스코프가 다를 경우 이름이 같더라도, 다른 변수로 취급한다라는 점을 알 수 있습니다.

선언 명령을 생략한 변수

변수를 선언할 때 선언 명령(var, let, const)를 생략하면 글로벌 스코프로 인식이됩니다. 이전 예제에서 let명령을 없애고 한 번 사용해보겠습니다.

variable = 1;

function getValue() {
    variable = 2;
    return variable;
}

console.log(getValue());
console.log(variable);

두 변수가 모두 글로벌 스코프를 가지고 동일한 이름을 가져, 동일한 변수라고 판단되어 나중에 값이 덮여 씌워졌습니다.

그래서 위와같은 혼란 상황을 없애고, 로컬 변수를 정의하기 위해서는 반드시 let또는 var, const 명령을 이용한 변수 선언을 해야합니다.

함수 인자의 스코프

function 함수명(인자){}

인자는 함수 내부에서 사용되는 변수입니다. 인자는 기본적으로 로컬 스코프로 인식되어 동작됩니다. 그러나 변수가 기본형이냐 참조형이냐에 따라서 내부 동작에 차이가 있습니다.

인자가 기본형 변수일 경우 로컬 스코프로 동작하고, 인자가 참조형 변수일 경우 글로벌 스코프처럼동작합니다. 참조형 변수도 일단 로컬 스코프로 받아오기는 하지만, 결국 메모리 값의 주소를 참조하는 변수이기 때문에 함수 내에서 참조형 변수 인자의 값 변경을 시도하면, 외부에 있는 변수값도 변하는 동작을 하게됩니다.

let 명령

let명령은 ES6에서 추가된 변수 선언 명령입니다. let은 var와 다르게 블록 스코프를 지원합니다.

프로그래밍의 기본 규칙으로, 변수의 스코프는 좁을수록 좋다라는 것이 있는데요. 이 규칙에 따라 가장 좁은 범위인 블록 스코프 단위의 변수 선언, 접근을 위해 var보다는 let명령을 사용하는 것이 좋다라고 할 수 있습니다.

앞으로 자바스크립트 시리즈에서 특정 경우를 제외하고는 무조건 let명령을 이용한 예제를 만들도록 하겠습니다. 또한, var에 대해서 아예 몰라도 된다는 이야기는 아니니까, let과 var의 차이정도는 알아두시길 바랍니다.