Var

Scope: 선언이 전역 범위 혹은 함수 범위로 지정
var 변수가 함수 외부에서 선언될 때의 범위는 전역. 함수 블록 외부에서 var를 사용하여 선언된 모든 변수를 전체 윈도우 상에서 사용 가능
var 변수가 함수 내에서 선언 될 때에는 함수 범위로 지정됩니다. 해당 함수 내에서만 사용하고 접근 가능

예제 코드

var tester = "hey hi";

function newFunction() {
	var hello = "hello";
}

console.log(hello); // error: hello is not defined

var 변수는 재선언되고, 업데이트 될 수 있습니다.

같은 범위 내에서라면 아래의 두 경우와 같이 수정이 가능, 에러가 발생하지 않습니다.

var greeter = "hey hi";
var greeter = "say Hello instead";

var greeter = "hey hi";
greeter = "say Hello instead";

var의 호이스팅

hoisting: 변수와 함수 선언이 맨 위로 이동되는 자바스크립트 매커니즘

console.log(greeter);
var greeter = "say Hello";

라고 선언된다면, 자바스크립트는 다음과 같이 해석합니다.

var greeter;
console.log(greeter); // greeter is undefined
greeter = "say Hello";

var 변수는 범위 내에서 맨 위로 올려지고, 값은 undfined 으로 초기화 됩니다.

var의 문제점

var greeter = "hey hi";
var times = 4;

if (times > 3) {
	var greeter = "say Hello instead";
}

console.log(greeter); // "say Hello instead"

제일 위에서 greeter를 선언하였더라도, if문을 타게 되므로 greeter가 재선언 후 재할당 됩니다.

Let

var선언에 대한 개선을 반영한 let이 현재 변수 선언에서 선호되고 있습니다.

방금 다루었던 var의 문제점을 해결할 수 있었던 이유에 대해 살펴봅시다.

블록 범위 let

블록은 {} 로 바인딩 된 코드 청크인데요. 하나의 블록은 중괄호 속에 존재하며, 중괄호 안에 있는 것은 모두 블록범위 입니다.

let으로 선언된 변수는 해당 블록 내에서만 사용 가능합니다.

let greeting = "say Hi";
let times = 4;

if (times > 3) {
	let hello = "say Hello instead";
	console.log(hello); // "say Hello instead"
}
console.log(hello) // hello is not defined

let은 업데이트 될 수 있지만, 재선언은 불가능하다.

let greeting = "say Hi";
greeting = "say Hello instead";

위와 같은 업데이트는 가능합니다.

let greeting = "say Hi";
let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

위와 같은 재선언은 불가능합니다.

그러나 동일한 변수가 다른 범위 내에서 정의된다면, 에러는 더 이상 발생하지 않습니다.

let greeting = "say Hi";
if (true) {
	let greeting = "say Hello instead";
	console.log(greeting); // "say Hello instead"
}
console.log(greeting); // "say Hi"

let의 호이스팅

var와 마찬가지로 let 선언은 맨 위로 끌어올려집니다.

undefined으로 초기화되는 var와 다르게 let의 키워드는 초기화되지 않습니다.

선언 이전에 let 변수를 사용하려고 시도한다면 Reference Error 가 발생 할 것 입니다.

Const

const로 선언된 변수는 일정한 상수 값을 유지합니다.

const 선언은 let 선언과 몇 가지 유사점을 공유합니다.

블록 범위 const

let 선언 처럼 const 선언도 선언된 블록 범위 내에서만 접근 가능합니다.

const는 업데이트도, 재선언도 불가능

const greeting = "say Hi";
greeting = "say Hello instead";// error: Assignment to constant variable.

const greeting = "say Hi";
const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

const의 호이스팅

let과 마찬가지로 const 선언도 맨 위로 끌어올려 지지만, 초기화 되지는 않습니다.

총정리

var는 전역 범위, 또는 함수 범위. let과 const는 블록 범위
var는 범위 내에서 업데이트 및 재선언 가능. let은 업데이트 가능, 재선언 불가능. const는 업데이트와 재선언 모두 불가능
세 가지 모두 최상위로 호이스팅 됩니다. 하지만 var 변수만 undefined로 초기화 되고 let, const는 초기화되지 않습니다. (선언 전 사용하려고 할 시 reference error 발생)
var와 let은 초기화 하지 않은 상태에서 선언할 수 있지만, const는 선언 중에 초기화 해야 한다.

← Go home