[JavaScript] 변수란? var, let, const의 차이점

변수(variable)란?

변수는 간단하게 데이터를 저장하는 곳입니다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말합니다.

사용하는 이유

흔히 이름, 나이와 같은 데이터를 저장할 수도 있고 DOM의 셀렉터로 찾은 HTML 요소도 저장할 수 있습니다. document.querySelector와 같은 셀렉터를 탐색하는 명령어를 매번 사용하면 사용할 때마다 DOM을 탐색해야 하지만 여러 번 사용하게 될 때 변수에 저장해두면 한 번만 탐색하고 저장한 데이터를 바로바로 사용하니 JavaScript의 동작속도를 조금 더 빠르게 할 수 있습니다.

var

• 함수(function) 레벨 스코프입니다.

function test() {
  var age = 22;
}
console.log(age); // age is not defined

함수 안에서 선언한 var 변수는 밖에서 사용할 수 없습니다.(지역 변수)

함수 밖에서 선언한 var 변수는 함수 안에서 사용할 수 있습니다.(전역 변수)

 

• 중복 선언이 가능합니다.

var age = 22;
var age = 23;
console.log(age); // 23

 

• 재할당이 가능합니다.

var age = 22;
age = 23;
console.log(age); // 23

 

• 호이스팅 현상이 일어납니다.

console.log(name); // undefined
var name = 'john';

Error가 발생하진 않지만 undefined로 출력하며 실행은 가능합니다.

let

• 블록(block) 레벨 스코프입니다.

if문과 같은 {} 안에서 생성한 변수들은 밖에서 사용할 수 없습니다.

 

• 중복 선언이 불가능합니다.

let age = 22;
let age = 22; // Identifier 'age' has already been declared

 

• 재할당이 가능합니다.

let age = 22;
age = 23;
console.log(age); // 23

const

• 블록(block) 레벨 스코프입니다.
• 중복 선언이 불가능합니다.
• 재할당이 불가능합니다.

const name = 'john';
name = 'jon'; // Assignment to constant variable.

 

	스코프	재선언	재할당
var	function () {}	O	O
let	{ block level }	X	O
const	{ block level }	X	X

식별자 네이밍 규칙

• 변수의 이름(식별자)에 특수문자를 제외한 문자, 숫자, 언더바(_), $기호를 포함할 수 있다.
• 식별자는 숫자로 시작할 수 없다.
• 예악어는 식별자로 사용할 수 없다.
  • if, for, case, let, var, const, this 등등
• 한글도 가능하지만 영어로 작성하는것을 권장한다.
• 변수명을 봤을때 존재 목적을 명확히 알 수 있는 이름으로 지어야한다.

네이밍 컨벤션

식별자를 명명하는데 여러가지 유형이 존재합니다.

• 카멜 케이스(camelCase)
• 스네이크 케이스(snake_case)
• 파스칼 케이스(PascalCase)
• 헝가리언 케이스(typeHungarianCase) - type과 변수명을 같이 작성하는 케이스