var, let, const (Hoisting)

변수 선언 키워드

• var, let, const는 모두 변수를 선언하는 키워드
• 서로 다른 특성과 사용법을 가지고 있음

var

• var로 선언된 변수는 해당 함수의 전체 범위에 걸쳐 유효(함수 외부에서 선언된 경우 전역 범위를 가짐)
• Hoisting : 변수 선언이 해당 범위의 최상단으로 끌어올려지는 현상
• 재선언 및 재할당 가능 : 같은 이름의 변수를 같은 범위 내(함수 내 or 전역 등)에서 다시 선언할 수 있음
• 함수 레벨의 유효 범위가 필요한 경우, 오래된 코드나 레거시 프로젝트에 주로 사용

let

• let으로 선언된 변수는 선언된 블록 내에서만 유효 ({})
• Hoisting 되지만 초기화 되지는 않음
• 재선언 불가능, 재할당 가능 : 같은 범위 내에서만 같은 이름의 변수를 다시 선언할 수 없음
• 대부분의 로컬 변수 선언에 사용
• 코드의 가독성과 유지 보수를 위해 var 대신 사용
• 반복문 내의 반복자에 주로 사용

const

• const로 선언된 변수는 선언된 블록 내에서만 유효 ({})
• Hoisting 되지만 초기화 되지는 않음
• 재선언 및 재할당 불가능 : 한 번 할당된 값은 변경할 수 없습니다. 단 객체나 배열의 내부 상태는 변경할 수 있음
• 변하지 않는 값에 사용
• 값의 재할당이 필요 없는 경우에 사용하여 프로그램의 안정성을 높임

요약

• var는 옛날에 자주 사용하던 선언 방법으로 최근에는 잘 사용하지 않음
• let과 const를 많이 사용하는데 const는 변하지 않는 값에, let은 변할 여지가 있는 값에 부여
• 일단 const로 전부 선언해놓고 변해야 하는 변수라면 let으로 바꿔주는 형식이 좋음

Hoisting

• 자바스크립트에서 변수나 함수 선언을 해당 스코프(변수와 함수의 유효 범위, 글로벌, 로컬(함수), 블록 스코프가 있음)의 최상단으로 끌어올리는 것
• 자바스크립트의 특징(코드를 실행하기 전 변수와 함수 선언을 메모리에 저장하는 방식)으로 인해 발생
• var, let, const 키워드로 선언된 변수는 모두 호이스팅됨(변수 호이스팅)

console.log(a); // ReferenceError
// let으로 a를 선언한 경우 임시 사각지대(TDZ)에 있기 때문에 참조를 하려고 하면 참조 오류가 뜸
let a = 10;
// a의 선언문 위치에서 a의 초기화와 값의 설정이 발생, a를 참조할 수 있음
console.log(a); // 10

• 함수 선언 방식으로 선언된 함수는 호이스팅되어 선언 전에도 호출 가능
• let과 const는 선언과 초기화가 동시에 일어나지 않고 실제 선언부를 만날 때 초기화가 이루어짐, 그 사이의 시간을 TDZ(Temporary Dead Zone)이라고 함, 즉 실행 컨텍스트에 변수가 선언은 되었으나 메모리가 할당되지 않아 그 사이에 참조하려고 하면 참조에러가 발생

Hoisting을 알아야 하는 이유

• 자바스크립트에서 변수와 함수의 가용성을 정확하게 파악할 수 있음
• 실행 시 발생할 수 있는 오류 예방 가능

변수 선언의 3단계

• 선언 : 변수를 생성하는 단계, (예 : let number)
• 초기화 : 변수에 기본값을 할당하는 단계 (예 : let number = 0)
• 할당 : 변수에 값을 할당하는 단계 (예 : let number = 5)