(JavaScript)var, let, const 총 정리

ES5까지 변수를 선언할 수 있는 방법은 var키워드를 사용하는 것이었다. var는 중복 선언이 가능하므로 동일한 이름의 변수가 이미 선언한것을 모르고 변수를 중복 선언하면서 값까지 할당하면 의도치않게 먼저 선언된 변수 값이 변경되는 부작용을 초래한다. ES6부터 변수를 선언할 수 있는 방법으로 const, let키워드를 사용할 수 있다.

var 이름 = 'kim'
// var 이름 -> 선언
// 이름 = 'kim' -> 할당

---

💻 var

📘 함수 레벨 스코프

var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다.

📘 변수호이스팅

var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수선언문이 스코프의 선두고 끌어올려진 것 처럼 동작한다.

console.log(나이) //undefined
var 나이 = 30;
console.log(나이); //30

📘 중복선언 o (재선언이 가능함)

var bar = 123;
var bar = 456; //456
}

📘 범위 function

function 함수(){ // 변수 이름은 function 안에서만 존재
var 이름 ='kim';
}
console.log(이름); //ReferenceError

---

💻 let

📘 블록 레벨 스코프

let 키워드로 선언한 변수는 모든 코드 블록(함수, if문, for문, while문, try/catch문 등)을 지역스코프로 인정하는 블록레벨스코프를 따른다.

let foo = 1; //전역 변수
{
   let foo = 2; //지역 변수
   let bar = 3; //지역 변수
}
console.log(foo); //1
console.log(bar); //ReferenceError

📘 변수호이스팅 X

let 키워드로 서넌한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다. let 키워드로 선언한 변수를 변수 선언문 이전에 참조하면 참조에러(ReferenceError)가 발생한다. let키워드로 선언한 변수는 '선언 단계'와
'초기화 단계'가 분리되어 진행된다.

📘 중복선언 x

let bar = 123;
let bar = 456; //SyntaxError
}

📘 범위 {}

if (true){
let 이름 = 'Park';
}

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

---

💻 const

📘 재할당 금지

const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야한다.

const foo = 1;
foo = 2; //TypeError

const키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다.
=> const 키워드는 재할당을 금지할 뿐 "불변"을 의미하지는 않는다.

const person = {
	name : 'Lee'
}
// 객체는 변경 가능한 값. 따라서 재할당 없이 변경이 가능하다.
person.name = 'Kim';
console.log(person); //{name : "Kim"}

📘 범위 {}

// 수정불가능한 오브젝트를 만들고 싶으면?
const 사람 = {이름:'kim'}
Object.freeze(사람);

💡 변수선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해서 사용하는 것이 좋다.