TIL.5 var 특징 (스코프, 호이스팅)

자바스크립트는 var, const, let 을 이용해서 변수를 선언한다. 하지만 단순히 'var는 재할당할수 있고, const와 let은 변하지 않는값이다.'라고만 알고 코드를 짜다보면 변수가 원치 않게 변하거나 문제가 발생해도 알지 못하는 일이 발생한다. 자바스크립트는 다른언어와는 조금 다른 특징이 있었는데 var의 스코프와 호이스팅에 대한 이해가 먼저 필요했다.

스코프(Scope)

'범위' 정도로 해석되는 의미와 같이 자바스크립트에서 스코프는 '변수가 유효한 범위'라고 이해하면 된다.

• var 는 '함수스코프' 로 '함수' 안에서만 유효하다.
• const 와 let 은 '블럭스코프' 로 일반적으로 { } 안에서 ( for문 안의 { }, if문의 { } function의 { } 등) 선언된 변수는 이 안에서만 유효하다.

var 함수스코프 특징

var name = "Heizle"; // 전역 변수를 선언
function myName(){
  var name = "Haiin"; // 지역 변수를 선언
  if(true) {
    var name = "해인";
    console.log(name); // 해인 (함수안에서 다시 선언된 값)
  }
    console.log(name); // 해인 (함수안에서 다시 선언된 값을 유지)
  }
showName();                   
console.log(name); // Heizle (함수안에서만 바뀐값 유지, 함수실행 후 이기 때문에 원래 값 반환)

• !헷갈린 부분

var 전역변수 바꾸는 예시

var newVar = 'first';
function changeVar() {
  newVar = 'second';
  console.log(newVar); // second
}      
changeVar();
console.log(newVar); // second

var는 전역변수로 선언되었고, 함수스코프이기 때문에 함수안에서 할당된 'second'는 함수가 실행되었을때만 유효하고 두번째 답에선 'first'가 나와야한다. 하지만, 자바스크립트에서 말하는 var의 특징은 전역변수로 선언되었을지라도 함수안에서 '다른값이 할당'되었을때 ('선언'과 다름) 함수밖에 선언된 값을 바꾼다는 것이다. 이는 아래의 호이스팅을 알아보면서 더 자세한 이해를 할 수 있다.

호이스팅(Hoisting)

• 선언 (declare) 은 var x;
• 초기화 (initialize) var x = 1; 또는 x = 1; (이건 다른 참조에서는 '할당'이라고도 표현함.

'끌어올린다' 라는 뜻으로 MDN 에서는 JavaScript는 초기화가 아닌 선언만 끌어올립니다(hoist). 라고 정의하고 있다. 이를 위의 단어들을 이용하여 '변수의 선언문을 유효범위안에서 가장 최상단으로 끌어올린다.' 라고 표현할 수 있다. 참조한 사이트에서는 '선언'과 '할당'의 분리라고 설명한다.

1. 호이스팅 선언과 할당

if (true) {
  var name = 'haiin';
}
console.log(name); // haiin<br/><br/>
// 위 코드는 아래와 같은 모양으로 해석할 수 있다.
var name; // 선언
if(true){
  name = 'haiin'; // 할당
}
console.log(name); // haiin

2. 호이스팅 'var'의 선언과 할당

function myName(){
  if(true){
    var name = 'haiin';
  }
  console.log(name);
}
if(true){
  var num = 500;
}
myName(); // haiin
console.log(num); // 500
//위 코드는 아래와 같은 모양으로 해석할 수 있다.
var num; // 선언
function myName () {
  var name; // 선언
  if(true){
    name = 'haiin'; // 할당
  }
  console.log(name);
}
if(true){
  num = 500; // 할당
}
myName(); // haiin
console.log(num); // 500

호이스팅은 '유효한 범위안에서 최상단' 이라고 했지만 var는 스코프가 '함수범위' 이기때문에 function 안의 최상단에서 선언되는것 으로 볼 수 있다.

3. 호이스팅 '함수'의 선언과 할당

myName(); // haiin
function myName(){
  console.log('haiin');
}
myName(); // haiin
// function을 선언하기 전, 후 모두 같은 값이다. 끌러올린다는 호이스팅의 단어와 부합하다는것을 직관적으로 알수 있다.

!단, 함수선언식(위의 방법) 에서만 해당이 되며 함수표현식(예, var myName = function(){}) 은 해당되지 않는다.

호이스팅에서 변수, 함수의 할당의 우선수위는 변수 a선언 -> 함수 a선언 -> a에 값할당 순으로 실행된다.

var 특징

위의 스코프와 호이스팅으로 var 에 대한 특징을 정리해 보면,

- 함수레벨 스코프로 동작 (전역 변수의 남발 및 코드 복잡도 증가)
- 변수 선언시 var 키워드 생략 허용 (변수의 의도하지 않은 전역화) 
- 중복 선언 허용 (변수의 의도하지 않은 값 변경)
- 변수 호이스팅 (변수 선언 이전에 참조 가능)

  

출처
https://freestrokes.tistory.com/101
https://yuddomack.tistory.com/
https://developer.mozilla.org/