Javascript var, let, const

1. var

• 코드의 가독성과 유지보수성에 좋지 않음 
• 일반 코딩방식과 어긋남
• 변수를 선언하는 키워드(var) 없이 선언 & 할당이 가능함.
  • 선언인지, 재할당인지 구분하기 어려움

rive = "good boy";

console.log(rive) //-> good boy 출력

• 중복선언이 가능함

var rive = "good"
var rive = "boy" // 에러 발생 X

//비교
let rive = "good";
let rive = "boy" // 에러 발생! let은 재할당만 가능 재선언 불가능
rive = "boy" // 에러 발생 X

• 블록 레벨 스코프가 안 되어 지역변수로 선언이 안 됨

var dog = "rive";
{
	var dog = "sieo";
    
    {
    var dog = "noah";
    }
}

console.log(dog) //-> noah 출력


//비교

let dog = "rive";
{
	let dog = "sieo";
    console.log(dog) //sieo
    
    {
    let dog = "noah";
    console.log(dog) // noah
    }
}
console.log(dog) //rive

• 함수 레벨 스코프만 지원 됨

function dog(){
var goodDog = "rive";
}

console.log(goodDog) //에러 발생!

• 선언 위치에 상관없이 코드가 실행되기 전에 처리
  • 변수 선언이 최상위에 선언한 것과 동등  -> 변수가 선언되기 전에 사용될 수 있음

console.log(dog) // 에러 발생 X 브라우저에 따라 undefined 또는 "" 출력

var dog = "rive"

• 전역객체(브라우저 환경일 경우 window)의 프로퍼티

2. let(ES6 추가)

• 선언만 호이스팅 되고, 초기화는 안 됨
• 초기화 전, 변수에 접근하면 컴파일 에러가 발생함

console.log(rive) // 에러 발생!
let dog = "rive";

• 재선언 불가능, 재할당 가능한 "변수"선언
• 함수레벨 스코프

3. const(ES6 추가)

• 선언만 호이스팅 되고, 초기화는 안 됨
• 초기화 전, 변수에 접근하면 컴파일 에러가 발생함

console.log(rive) // 에러 발생!
const dog = "rive";

• 재선언, 재할당 모두 불가능한 "상수"선언
• 함수레벨 스코프

4. 정리

• 재선언/재할당
  • var은 재선언 재할당 모두 가능
  • let은 재선언 불가능 재할당 가능
  • const는 재선언, 재할당 모두 불가능
• 호이스팅
  • 호이스팅시 var은 선언과 초기화가 모두 이루어짐
  • let, const 선언만 이루어짐
• 스코프
  • var은 함수레벨스코프
  • let, const는 블록레벨스코프

참고

https://curryyou.tistory.com/192