Javascript var, let, const 변수 선언

변수(variable)란??

데이터(data)를 저장할 수 있는 메모리 공간 의미, 값은 변경 가능

변수의 선언과 초기화

• const, let, var 키워드를 사용하여 변수를 선언
• 선언되지 않은 변수를 사용하려고 하거나 접근하려고 하면 오류가 발생
• 선언되지 않은 변수를 초기화할 경우에는 자동으로 선언을 먼저 한 후 초기화를 진행
• 선언된 변수는 나중에 초기화할 수도 있고, 선언과 동시에 초기화 가능.
• 쉼표(,) 연산자를 이용하여 여러 변수를 동시에 선언하거나 초기화 가능

var month; // month라는 이름의 변수 선언
date = 25; // date라는 이름의 변수를 예약어 없이 묵시적으로 선언

var date = 25; // 변수의 선언과 동시에 초기화
month = 12;    // 변수의 초기화

var month, date;             // 여러 변수를 한 번에 선언
var hours = 7, minutes = 15; // 여러 변수를 선언과 동시에 초기화
month = 10, date = 5;        // 여러 변수를 한 번에 초기화

var / let / const

진짜... 실무에서도 신입 때 사수들이 코드리뷰 해주면서 정말 많이 물어보는 질문 중에 하나이다!

신입 때 어버버버 했던 기억에, 이직 하고나서는 이런 정말 기초 중에 기초, 기본 중에 기본이 되는 개념들을

절대로 잊지 말자는 취지에 이 부분을 꼭 포스팅 하게됐다!!

 

Javascript에서는 var, let, const 3가지 방식의 변수 선언 방식이 있다.

결론부터 얘기해보자면,

var	재선언, 업데이트 가능, 선언 범위는 전역 or 함수, 호이스팅 시 undefined로 초기화
let	재선언 불가, 업데이트는 가능, 블록범위, 호이스팅 시 초기화 X
const	재선언, 업데이트 모두 불가능(일정한 상수값 유지), 블록범위, 호이스팅 시 초기화 X

역시 코드를 보면서 알아보는게 좋을 것 같다.

아래의 코드를 통해 기존 var 선언 방식의 특징에 대해서 알아보겠다.

var name = 'yourname'
console.log(name) // yourname

var name = 'myname'
console.log(name) // myname

변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다.
하지만 코드량이 많아지면, 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다.

(물론 요즘은 툴 기능들이 좋아서 warning 표시가 나올거임.)

그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 const 이다.

let name = 'yourname'
console.log(name) // yourname

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

let으로 선언시 name이 이미 선언 되었다는 에러 메세지가 나온다. (const도 마찬가지)
let은 변수 재선언이 되지 않지만, 재할당이 가능하다.

const name = 'yourname'
console.log(name) // yourname

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

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

const는 변수 재선언, 변수 재할당 모두 불가능하다.

호이스팅(Hoisting)

• 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미
• var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성
• 자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅
• 하지만, var 로 선언된 변수와는 달리 let 로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생
• let으로 선언된 변수가 에러나는 이유는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문!!!

console.log(test1); // undefined
var test1;

console.log(test2); // Error: Uncaught ReferenceError: test2 is not defined
let test2;

• 참고로, 변수는 선언 단계 > 초기화 단계 > 할당 단계 에 걸쳐 생성
• var 으로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어지므로, 변수 선언문 이전에 변수를 참조 가능

console.log(foo); // undefined

var foo;
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

• let 로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행
• 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않아, 변수 선언문 이전에 변수를 참조 불가

console.log(foo); // ReferenceError: foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

변수의 타입과 초깃값

• 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입 가능
• 이렇게 한 변수에 다른 타입의 값을 여러 번 대입할 수는 있지만, 한 번 선언된 변수를 재선언 불가
• 선언만 되고 초기화하지 않은 변수는 undefined 값

var num = 10;        // 변수의 선언과 함께 초기화
num = [10, 20, 30];  // 배열 대입
var num;             // 이 재선언문은 제외됨.

var num;  			 // undefined
num = 10; 			 // 10

변수의 이름

• 자바스크립트에서 변수는 이름을 가지고 식별하므로, 변수의 이름은 식별자(identifier)
• 변수의 이름은 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)로만 구성
   

Reference

https://www.tcpschool.com/javascript/js_datatype_basic

코딩교육 티씨피스쿨

https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

var, let, const 차이점