Enjoy Programming

let & const 본문

JavaScript/Vanilla Js

let & const

LEETAEEON 2021. 4. 22. 01:43

기존 자바스크립트는 var를 사용해 왔다 es6가 업데이트 되기 전까지는

하지만 var는 변경이 가능했기에 문제점이 있었다.

무조건 문제라는건 아니다. 하지만 이미 내가 선언한 변수에 차후 변수명을 헷갈려 업데이트를 해버린다던가

협업중 다른 누군가가 가져다가 변경해버리면 코드가 꼬여버린다

이런 문제를 해결하기 위해 let & const가 등장했다.

아이러니하게도 자바나 C에는 static, const가 이미 있었다.,,,

생각해보면 python도 상수처리를 위해서는 복잡하다;; ,,,  아무튼

 

let은 변경가능 const는 상수처리 ..

그런데 const object의 경우 object의 value 변경이 가능하긴 하다고 한다. 이는 따로 변경되지 않게 설정을 해야하는데 

차후에 배워보자..

 

그리고 문득 든 생각이 그럼 var랑 const랑 쓰면 안되나?!

여기서 var의 한가지 문제점이 또 있다.

var는 hoisting을 하게 된다. 음 이부분은 더 찾아봐야되지만 var변수를 선언하면 선언만

상단으로 끌어 올라가게 된다.

이때 생기는 문제가 예를 들면

이런 문제다... 기본적으로 에러가 떠야 한다.. 그런데 정의 되지 않았다고 한다. var lee; 가 위로 hoisting되었기 때문이다.

먼저 선언되었다고 생각하게 되고 그다음 초기화 되지 않은 변수 lee를 출력한 걸로 인식한 것이다.

이런 문제를 보완한 것이 let 이다.

자 에러가 떴다~~ 이렇게 변했다.... 굳

Temporal dead zone이라고 한다. hoisting되지 않는것. 받아 들이자.

 

또 let과 const의 장점은  block scope를 사용할 수 있다는 것이다

먼저 scope를 알아보자. scope는 bubble이다.

bubble은 variable들이 접근 가능한지 아닌지를 감지해준다.

자 기본적으로 scope안에서 선언된 변수는 스코프 밖을 나가면 사용할 수 없다. 전역변수가 아니니까.

let을 쓰더라도 마찬가지로 에러가 뜬다.

그러나 var를 쓴다면?

... 에러가 뜨지 않고 그냥 사용되었다...... 왜 일까...

var는 block scope를 가지지 않고 function scope를 가진다.

이말인 즉슨  block scope를 가진 조건문 반복문 등등에서는 사용 가능하나

function a (){ var=~~} 요런 함수 스코프에서 선언된 것은 함수 밖에서 사용이 불가능 하다는 것이다.

 

let과 const를 사용함으로써 아에 원천적으로 {} 블록스코프 안에 선언 된것은 그안에서만 사용할 수 있게 되었다는 뜻

프로그래밍은 예외사항을 주의 해야한다... 그래서 예외처리도 하지 않는가.. 귀찮게...

(스코프 밖에서 선언된 변수는 스코프 안에서 사용 가능하다는 것은 참고하자)

한가지 추가해서 주의할 점은 블록스코프 내에 블록스코프가 있다면

상위 블록스코프는 하위 블록스코프에 접근할 수 없다. but 하위 블록스코프는 상위 블록스코프에 접근 할 수 있다.

그냥 같다... 그냥 nested scope라면 똑같이 블록 밖은 접근 가능하지만 블록 밖에서 안은 접근 불가능한 것이라는 것이 동일 하다

이를  어휘적 스코프(lexical scoping) 라고 한다.

 

 

자 그렇다면 이제 var는 없어지는 것인가?~

필요없다면 그냥 대체된 let과 const만 남기면 되는데 왜 남겨뒀나...

이미 많은 웹사이트 및 이전 자바스크립트를 사용한 프로그램에서 모두 대체해야 하기 때문에 남겨둔 걸로....

암튼 var는 사용하지말자..

'JavaScript > Vanilla Js' 카테고리의 다른 글

vanilla js challenge 2  (0) 2021.04.22
Arrow Function (Es6)  (0) 2021.04.22
vanilla js challenge1  (0) 2021.04.21
Arrow function (ES6)  (0) 2021.04.09
javascript의 기본 문법을 알아보자  (0) 2021.04.07