var let const 차이점

1. 변수 선언

var

장점 : 변수를 여러번 선언할 수 있어 테스트 같은 간단한 검증에 사용하기 편리하다.
단점 : 코드가 길어질수록 오류를 찾기 힘들게 되며, 원하는 값이 들어가지 않을 수 있다.

var age = 29
console.log(age) //29

var age = 30
console.log(age) //30

이를 보완하기 위하여 추가된 변수 선언 방식이 let과 const이다. (immutable 의 여부)

let

변수에 값을 재할당 할 수 있다.

let age = 29
console.log(age) //29

let age = 30
console.log(age) //Uncaught SyntaxError: Identifier 'name' has already been declareddeclared

age = 31
console.log(age) //31

const

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

let age = 29
console.log(age) //29

let age = 30
console.log(age) //Uncaught SyntaxError: Identifier 'name' has already been declareddeclareddeclared

age = 31
console.log(age) //Uncaught TypeError: Assignment to constant variable.

2. 호이스팅

호이스팅이란 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

• 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
  -자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
  -함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
  -유효 범위: 함수 블록 {} 안에서 유효
• 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
  -실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
  -실제 메모리에서는 변화가 없다.

var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.

console.log("age"); // undefined
var age;

console.log("age"); // Error: Uncaught ReferenceError: bar is not defined
let age;

변수는 총 선언 단계 -> 초기화 단계 -> 할당 단계에 걸쳐 생성된다.

var는 선언 단계와 초기화 단계가 한번에 이루어진다.

console.log(age); // undefined
var age;
console.log(age); // undefined
age = 30
console.log(age); //30

let은 선언 단계와 초기화 단계가 분리되어 진행된다.

console.log(age); // ReferenceError: foo is not defined
var age;
console.log(age); // undefined
age = 30
console.log(age); //30

const를 기본적으로 사용하고 재할당이 필요한 경우에는 let을 사용하는 것이 좋다.

var, let, const를 자세하게 정리해놓은 링크 참고