var const let 에 대하여

var 과 let ,const 에 대하여

필자는 유튜브를 보면 var과 let , const의 차이점에 대해 왠지모를 답답함을 가지고있었다. var는 구버전, 신버전엔 let과 const로 변수와 상수를 선언한다가 내가 아는 전부였다. ok 그래서 차이점 설명해봐

var의 특징

console.log(kimchi) //작동할 당시 kimchi 식별자 안에 null값 존재
var kimchi = 30 //kimchi lover
------------------
출력:undefined 

1. var는 let과 const와 다르게 undefined를 출력한다. 자바스크립트는 런타임(run time)되기 전 자바스크립트 환경에서 모든 선언문 함수 클래스등을 먼저 읽고 인터프리터 언어의 특성상
   최상단의 올라간 것처럼 작동한다(호이스팅)

  for (var testVar = 0 ; testVar < 5; testVar++) {
  console.log(testVar); //결과값 0 1 2 3 4
}

console.log(testVar) //결과값 5

2. var는 let,const와 다르게 전역 선언문으로 작동한다.
   위 코드는 며칠전 혼자서 공부하며 달나라갈 뻔한 코드이다.
   let과 const는 선언한 위치 {},() 등 괄호 안(지역스코프)에 감싸져있을 경우 그 안에서만 사용되지만 var는 전역으로 작동하기 때문에 console.log의 값이 5가 나온다.
   (자세한건 블로그 내 전위/후위 참조)

	var name = 'kim'
    var name = 'jin'

    let name = 'kim'
    let name = 'jin'//Uncaught SyntaxError

3. var는 let 과 const와 다르게 재선언이 가능하다.
   var는 오류를 줄이기 위해 고안된 방법이다. 하지만 오히려
   1만줄 이상의 코드가 있을 시 데이터가 변경되는
   불상사가 일어날 수 있는 문제가 있다.

let 와 const 에 대해

var의 단점을 보완하기 위해 ES6에서 let과 const가 도입되었다.

	let name = 'kim'
		name = 'jim'
	console.log(name)//값:'jim'
	const sum = 3
		  sum = 4//Uncaught TypeError

1. let은 값의 var와 마찬가지로 재할당이 가능하다. 여기서 재할당이란? 새로운 메모리 주소에 이전 메모리 주소지를 참조하여 데이터를 할당하는 걸 의미한다.
   
   (출처: 모던 자바스크립트 딥다이브)
   <주의! 변수의 명은 식별자일 뿐 변수명에 직접 데이터를 넣지않는다>
   다만, 재 선언을 금지함으로써 var의 오류를 보완한다.
   const 는 상수이며 재할당(메모리값 주소변경x) 및 선언과 동시에 할당을 해야 문법적 오류가 발생하지 않는다.

2. let과 const는 var와 함께 호이스팅이 되지만, TDZ(일시적사각 지대)로 들어간다. 이외에 function, class 도 똑같이 적용된다.

     
     console.log(numTest)
     console.log(TdzTest)
     const numTest = 30 // Reference Error
     let TdzTest = 20 // Reference Error
   

3. const 상수는 값을 원시 값을 할당한 경우 변경할 수 없다. 객체를 할당한 경우 데이터 변경이 가능하다.(처음 이 글을 읽었을 때 ??? 상태였다.)

   const Favbeer = {
    name : 'cass'
   };
   Favbeer.name = 'Qingdao';
   
   console.log(Favbeer)//출력:{ name: "Qingdao"}
   

   위 코드에서 알 수 있듯이 객체로 받았을 경우 값의 변경이 가 능하다. 상수는 원시값이 정해진 주소(재할당) 변경이 불가능할 뿐
   프로퍼티 key안에 동적, 삭제,변경이 가능하다.

   
   
   

출처 및 도움주신 분들
:모던자바스크립트 딥다이브(208p~ 218p)
:https://m.blog.naver.com/PostList.naver?blogId=jan_n_
:https://open.kakao.com/o/gVMwEFtb