변수 선언자 var, let, const 비교

Introduction

ES6(ES2015)이전에는 변수를 선언할 수 있는 키워드가 var뿐이었지만, ES6에서는 let, const 키워드가 추가되어 이를 이용해서도 변수를 선언할 수 있게 되었다.
var, let, const를 비교하여 차이점을 알아보자.

자바스크립트는 데이터의 타입에 상관없이 담는 그릇이 똑같다.
이런 특성 편하기도 하지만, 이러한 편함 때문에 개발을 할 때 결국은 사전에 특정 오류를 못잡는 상황이 발생한다.

var

한번 선언된 변수명에 데이터를 재할당이 가능하고, 동일한 변수명으로 재선언 또한 가능하다.

var name = 'Tom';
console.log(name); // Tom

name = 'Nick';
console.log(name); // Nick

var name = 'Jack';
console.log(name); // Jack

var를 사용하면 위와 같이 데이터를 재할당하거나, 변수명을 중복으로 선언하고 데이터를 넣어도 에러가 나지 않는다.
유연한 변수 선언이 가능하다고 하기엔 중복 선언의 위험이 더 크기 때문에 단점으로 여겨진다.
ES6 이후에 이 문제를 보완하기 위해서 let과 const가 추가되었다.

let

한번 선언된 변수명에 데이터를 재할당이 가능하고, 동일한 변수명으로 재선언은 불가능하다.

let name = 'Tom';
console.log(name); // Tom

name = 'Nick';
console.log(name); // Nick

let name = 'Jack';
console.log(name); // Uncaught SyntaxError: Identifier 'name' has already been declared

let은 데이터를 재할당 하는 것은 가능하지만, 변수명을 중복으로 선언하면 위와 같이 에러가 발생한다.

const

변하지 않는 값, 변수를 선언하는 시점에 값을 할당하고, 데이터를 재할당하거나 동일한 변수명으로 재선언하는 것 둘다 불가능하다

const name = 'Tom';
console.log(name); // Tom

name = 'Nick';
console.log(name); // Uncaught TypeError: Assignment to constant variable.

const name = 'Jack';
console.log(name); // Uncaught SyntaxError: Identifier 'name' has already been declared

const은 데이터 재할당과 변수명을 중복으로 선언하는 것 둘다 에러가 발생한다.

scope(스코프)

scope(스코프)란 유효한 참조 범위를 말한다.
자바스크립트는 var로 선언한 변수의 스코프와 let, const로 선언한 변수의 스코프가 다르다.

var : function-scoped (함수 레벨 스코프)

var는 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주한다.

function foo() {
  var x = 10;
  console.log(x);
}
foo(); // 10
console.log(x); // Uncaught ReferenceError: x is not defined

foo 함수 내부에서 선언된 x변수는 함수 내부에서만 참조가 가능하며, 외부에서 참조시 에러가 발생한다.

if(true) {
  var x = 10;
}
console.log(x); // 10

하지만, 함수를 제외한 영역에서 var로 선언한 변수는 전역 변수로 취급된다.
if문, for문, while문, try/catch문 등의 코드 블럭{ ... } 내부에서 var로 선언된 변수도 전역 변수로 간주한다.

그러나, let과 const는 다르다.

let, const : block-scoped (블록 레벨 스코프)

let, const는 함수 내부는 물론, if문이나 for문 등의 코드 블럭{ ... } 에서 선언된 변수도 지역변수로 취급한다.

// let
if(true) {
  let x = 10;
}
console.log(x); // Uncaught ReferenceError: x is not defined

if(true) {
  const y = 10;
}
console.log(y); // Uncaught ReferenceError: y is not defined

if문의 블럭 내부에서 let, const로 선언된 변수는 외부에서 참조되지 않음을 알 수 있다.

var는 함수 내부에 선언된 변수만 지역 변수로 인정하는 함수 레벨 스코프이다.
let, const는 블록 내부에서 선언된 변수까지도 지역변수로 인정하는 블록 레벨 스코프이다.

💡 블록은 if문이나 for문 등에서 중괄호{ } 로 둘러싸인 코드 영역을 말한다.

변수명 작성 규칙

1. 카멜 표기법(camelCase) - 두단어 이상의 결합이 될 때 두번 째 단어부터 단어의 첫번째 알파벳만 대문자로 변경. 나머지는 전부 소문자

var userName = "John Doe";

2. 스네이크 표기법(snakecase) - 두단어 이상 결합시 단어와 단어 사이에 언더바()

var user_name = "John Doe";

3. 파스칼 표기법(PascalCase) - 모든 단어의 첫 알파벳을 대문자

var UserName = "John Doe";

4. 헝가리언 표기법 - 변수명 제일 앞에 데이터의 타입에 해당하는 영단어 추가하고 그 뒤로는 카멜표기법

var strUserName = "John Doe"; // 데이터가 문자인 경우 - str

결론

구글 자바스크립트 스타일 가이드에 따르면..
1. const와 let을 이용해서 변수를 선언한다.
2. 값을 재할당하는 경우가 아니라면, const를 디폴트로 사용한다.
3. var는 사용하면 안된다.

즉, const, let를 사용하자!