var, let 차이점

변수 선언 방식

 

예전 코드 들을 찾아보다 보면 생각보다 var를 많이 볼수 있다.

이제는 var 대신 let을 많이 쓰지만 사실 왜 let을 사용하는지는 잘 모르고 사용해왔다.

그래서 오늘은 var를 알아보고자 한다.

---

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

var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프입니다.

블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능합니다.

 

블록 밖에서 접근 할수 있다고 한다.

if (true) {
  var test = true; // 'let' 대신 'var'를 사용했습니다.
}

alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)

(출처 : 모던자바스크립트)

해당 코드가 실행이 가능해진다는 것이다.

이렇게 짧은 코드라면 괜찮겠지만 코딩이 길어진다면 분명 에러를 해결하는데 어려움을 느낄 수 있다.

---

선언하기 전에 사용 가능한 ' var '

함수 내에서 먼저 변수를 초기화하고 선언해도 사용이 가능합니다.

아래의 두 예제는 모두 동일하게 동작한다.

function sayHi() {
  phrase = "Hello";

  alert(phrase);

  var phrase;
}
sayHi();

var phrase 가 위로 이동하였다.

function sayHi() {
  var phrase;

  phrase = "Hello";

  alert(phrase);
}
sayHi();

코드 블록 또한 무시되기 때문에, 아래의 코드 역시 동일하게 작동한다.

function sayHi() {
  phrase = "Hello"; // (*)

  if (false) {
    var phrase;
  }

  alert(phrase);
}
sayHi();

이렇게 변수가 끌어올려지는 현상을 '호이스팅(hoisting)'이라고 부른다. 왜냐하면

var로 선언한 모든 변수는 함수의 최상위로 ‘끌어 올려지기(hoisted)’ 때문이다.