front-end/js

[JS_중급] 12. 변수(var, hoisting)

쭈냥이 2023. 11. 23. 13:34

1. var

 

(1-1) var는 let과 다르게 같은 변수명을 중복해서 사용할 수 있습니다.

var name = "zeroJJUN";
console.log(name);

var name = "Tstory";
console.log(name);

-같은 변수명 name을 사용했지만 오류없이 출력이 잘 되는 것을 확인할 수 있습니다.

 

 

 

 

2. hoisting

 

(2-1) 코드는 기본적으로 위에서부터 아래로 한 줄 한 줄 실행되는 특징을 가지고 있습니다. 따라서 변수를 선언하기 전에 출력을 요구하면 에러가 발생합니다.

console.log(name);

let name = "zeroJJUN"; //코드 실행 순서에 의한 error발생

- 문법에 오류도 없고 중복 변수도 없지만, 코드 작성 순서에 의해 에러가 발생합니다. 

 

 

 

 

 

(2-2) var를 사용하는 이유는 바로 이런 상황에 오류를 방지하기 위함입니다.

console.log(name);

var name = "zeroJJUN";

주의할 점 :  변수 자체(name)만 hoisting되고, 값(zeroJJUN)은 hoisting되지 않기 때문에 결과값은 zeroJJUN이 아닌,

undefined가 됩니다. 

 

-이처럼 var 뒤에 나오는 것은, 코드가 시작되기 전에 함수처럼 가장 상단에서 처리되며 내려옵니다. 이것을 호이스팅이라고 합니다.

'front-end > js' 카테고리의 다른 글

[JS] 11. 배열(Array)  (0) 2023.11.15
[JS] 10. 객체2 (method, this)  (0) 2023.11.15
[JS] 9. 객체(Object)  (0) 2023.11.15
[JS] 8. 함수(function)  (0) 2023.11.15
[JS] 7. 반복문 (for, while, do while)  (0) 2023.11.10