프론트엔드 개발자가 되기위한 여정-두번째 주말편

이정우·2022년 9월 11일
0

frontend-bootcamp

목록 보기
11/60

밸~하!

밸로그 여러분 안녕하세요!

오늘은 호이스팅의 심화편!
이라고 할수도있지만 사실은 심화편까지는 아니고요~
호이스팅과 함께 같이 알아가면 좋은 부분들이 있어서 알려드리기 위해서
포스팅을 작성해보려고 합니당~~~

자 오늘은 어떤것을 할것이냐
바로바로
var와 let과 const의 차이에 대해서 설명해드리겠습니다!

먼저!

1.var,let,const란 무엇일까??

var,let,const란 무엇일까요??

javascript를 조금이라도 공부해 보신분들께서는 잘 아실텐데요!

바로 javascript에서 변수를 선언할때 사용하는 명령문입니다!!

자바스크립트에서 변수를 선언할때
이렇게

 var a 
 let b
 const c

선언할수가있죠!!
그럼 선언만 할수있을까요~??
이렇게

var a=0;
let b=1;
const c=2;

선언과 동시에 할당또한도 가능한데요!

그럼 기본적인 개념을 알았으니 본격적으로 오늘의 주제!
var와 let 과 const의 차이에 대해서 알아볼까요~??

2.var VS let Vs const

최근 여러 자바스크립트 코드들을 보게되면 var선언문을 보기가 어렵습니다!
왜 그럴까요??
그 이유는 앞서 포스팅했던 호이스팅과 밀접한 연관이 있는데요
var의 경우에는 호이스팅시 최상단으로 끌어올려져 상단부에서 선언을 하지 않았더라도 사용이 되고 읽어질수가 있습니다
하지만 이러한 특성때문에 개발자의 의도와는 다른 여러 error들이 발생되는데요
이를 막기위해 만들어 진게 바로 let과 const 입니다

과연 어떤 부분이 다를까요??
let 과 const 는 호이스팅이 최상단으로 끌어올려지기는하지만 저장되는 공간이 별도로 생성이되어 호이스팅시 읽히지가 않게 됩니다!
무슨말이냐
let 과 const 또한도 호이스팅이 되지만
let과 const는 TDZ라고 하여
임시 저장 공간에 저장이되어 읽히지 않게되고
let또는 const가 정의된 부분에서야 그값을 읽을수 있게된다는거죠!

글로만 설명드려서는 어렵겠죠??
코드를 한번 봐볼까요??

a
b
console.log(b)
//컴파일에러
console.log(a)
//컴파일에러
let a =5;
console.log(a)
//5
const b=10;
console.log(b)
//10

자 이 코드를 보니 한번에 이해되시죠??
var의 경우는 위의 a또한도 5로 출력이 될텐데
let은 let부분에서 정의되기 이전까지는 undefined라는 빈공간이 나타나게 된다는거죠 !
왜요?
바로 TDZ에 담기게 되어 위에서는 읽어지지 않기 때문입니다!
계속 TDZ,TDZ 라고 하는데 도대체 TDZ가 뭐야?! 라는 의문이 생길수 있습니다!
바로 봐볼까요~??

3.TDZ란?

TDZ란 emporal Dead Zone이라는 의미로 시간상 사각지대라는 뜻입니다!

변수가 선언이 되기 이전에 사용이된다면 그값을 읽지못하게하고 레퍼런스 에러를 출력하게 되는거죠
이를 통하여 필요한 부분에서 정의해서 사용할수있게되고 에러도 훨씬 적게 발생할수있게 되었습니다

그럼 마지막으로
const와 let의 차이는 무엇일까요??

4.const와 let의 차이

바로 쉽게말씀드리자면
const는 상수
let은 변수라고 할수있겠습니다

const 로 선언한 값은 재할당이 불가능하지만
let은 재할당이 가능하여 다시 값을 할당해줄수있게되는거죠!!

조금더 깊게 가고싶지만
여기까지도 충분히 어려운내용이기에
차주나 다음 기회가 된다면 포스팅할수있도록 하겠습니다~~

그럼 이만!!

밸~~바!

profile
주니어 프론트엔드 개발자

0개의 댓글