오래된 'var'

안병욱·2022년 5월 22일
0
post-thumbnail

Javascript에서는 변수가 3가지가 존재 합니다. 바로 var , let , const 이다.
이 글에서는 var에 대해 파고 들어보려고 한다.

var로 선언한 변수는 let으로 선언한 변수와 유사하다. 대부분의 경우에 let을 var로, var를 let으로 바꿔도 큰 문제 없이 동작하게 된다.

하지만 var는 초기 자바스크립트 구현 방식 때문에 let과 const로 선언한 변수와는 다른 방식으로 동작을 하게 된다. 차근차근 알아보자!!

'var'는 블록 스코프가 없다!!

var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프이다. 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근이 가능하다. 예시코드를 보자!!

if(true) {
	var a = 3;
}
console.log(a);

값 : 3

분명 if문이 끝났는데도 접근이 가능하다... 말이 되지 않는다.... why??!!!
즉 블록스코프가 없다는건 if문안에 a라는 변수는 전역변수가 되어 버리는 것이다!
하지만 if문안에 let 으로 변수를 선언한다면 Error: test is not defined라는 에러가 발생하게 된다. 우리는 var가 아닌 let을 써야 한다..
if 문뿐만 아니라 반복문에서도 유사한 일이 일어난다. 항상 조심 아니 var를 쓰지말자!!

'var'는 재선언을 허용한다.

동일한 범위에서 동일한 변수를 사용한다고 했을때 let 변수는 두 번 선언하면 오류가 나게 된다.
하지만 var라는 어마무시한 변수는 그런게 어딧어 그냥 선언해를 시전해버린다..

var user = 'jone'
var user = 'james'

이런씩으로 이미 선언된 변수와 함께 사용하면 오류가 발생되지않고 그냥 실행 되어버린다.

선언하기 전 사용할 수 있는 'var' (호이스팅)

아래의 코드를 먼저 보자!!

function sayHi() {
  phrase = "Hello";

  alert(phrase);

  var phrase;
}
sayHi();

우리는 위의 코드를 보면 의아하게 느낄것이다. 당연히 에러가 나겠지 라는 생각을 하면서 말이다.
하지만 var는 우리의 상식을 초월한 괴물이다.. 그냥 실행 되어진다.
그 이유는 var 선언은 함수가 시작될 때 처리가 되버리기 떄문이다. 전역에서 선언한 변수라면 스크립트가 시작 될 때 최상단에서 처리가 되어버린다.
함수 본문 내에서 var로 선언한 변수는 선언 위치와 상관없이 함수 본문이 시작되는 지점에서 정의가 된다.(단, 변수가 중첩 함수 내에서 정의되지 않아야 이 규칙이 적용이 된다.)
이렇게 변수가 끌어올려 지는 현상을 '호이스팅(hoisting)이라고 부른다.

0개의 댓글