지지나

Javascript 변수 - let, const, var 와 var hoisting 본문

기획자의 프로그래밍 걸음마/Javascript

Javascript 변수 - let, const, var 와 var hoisting

Gygyna 2020. 9. 9. 23:12

변수란? - 변경될 수 있는 값

자바스크립트에서는 변수의 값을 주기 전에 let 을 써야 하고, 이렇게 함으로써 메모리에 변수의 값이 저장된다고 생각하면 됩니다.

 

 

그리고 let의 경우 이미 선언한 값도 변경할 수 있는데요, icecream → cake으로 변경 한 것을 볼 수 있어요.

 

그런데 {}로 코드를 작성하면 {}안의 내용을 {}밖이 참고할 수 없게 됩니다.

마지막으로 한 console.log(food); 에서는 food라는 변수가 정의되지 않아서 출력할 수 없다는 에러를 받고 있지요.

 

물론 {}을 사용하지 않고 파일에 바로 저장한 변수는 {}밖이나 안에서 모두 출력 가능하고, 이를 global scope이라고 합니다.

 

Javascript는 순차적으로 읽는다.

 

그리고 const는 let과는 달리 한번 할당하면 값을 절대로 바꿀 수 없어요.

아까 let과 동일하게 만들고 출력해보면 food = 'cake'; 이 되자 에러 메세지가 나오지요.

 

 

보안상의 이유, 변경할 수 없기 때문에 (간혹 내가 선언했던 변수를 까먹고 다시걸로 바꾸면 망..) 등의 이유로 변경할 수 없는 데이터 타입에 const 사용을 권합니다.


마지막으로 변수로 var를 쓸 수는 있지만 가급적 사용하지 않는것을 권합니다.

중요한 이유로는 "var hoisting: 변수를 어느 위치에 선언했는지에 관계없이 가장 먼저 인식함" 이 있습니다.

 

아래 예시를 보면 같은 프로그래밍을 let 과 var로 비교해 보았는데요, 차이점 설명해드릴께요.

**에러가 나오는게 정상인 상황입니다.

 

이미 만들어진 변수의 이름, 즉 a로 재선언을 했는데 var에서는 아무 문제가 없습니다.

반면 let에서는 'Uncaught SyntaxError: Identifier 'a' has already been declared'라며 a는 이미 선언된 변수라고 에러가 나와요.

 

 

b를 변수로 선언하기도 전에 work라는 문자열 값을 넣었어요. let은 'Uncaught ReferenceError: Cannot access 'b' before initialization'이라며 에러가 나지만 var는 아무 상관없이 값을 출력하지요ㅋㅋㅋ

 

 

마찬가지로 let은 위와 동일한 에러를 내지만 var에서는 undefined라는 값을 출력했어요.

 


var hoisting 외에도 var는 block scope{} 이 없기 때문에 아무데서나 값 출력이 가능합니다.

 

 

이게 몇 줄 안되는 코딩예시로 보니까 var도 '별거 아니네~' 하겠지만 수백개의 줄에서 변수가 마음대로 바뀌는 일이 발생할 수 있기 때문에 var를 꼭 쓴다면 조심해서 사용해 주세요.

Comments