[JS] var 사용을 지양해야하는 이유(호이스팅, 변수의 범위)

 

* var의 사용이 지양되어야 하는 이유

• var의 사용이 지양되는지를 이해하기 위해서는 먼저 호이스팅과 변수의 적용 범위에 대한 이해가 필요하다. 

* 호이스팅(Hoisting): - 호이스팅이란 JavaScript의 인터프리터가 변수와 함수의 메모리 공간을 선언전에 미리 할당하는 것을 의미한다. - 실질적으로는 변수의 선언과 초기화를 분리한 것으로 선언을 코드의 최상단으로 옮기는 것이다. - 호이스팅으로 인해 var변수는 undifined로 변수를 초기화 한다.  - var의 범위는 function-scope이기 때문에 function의 최상단으로 이동시킨다.

 

* 변수의 적용범위(scope): 1) 함수 레벨 범위(Function-level Scope) - 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.  - 즉, 함수 내부에서 선언한 변수는 지역 변수이고 함수 외부에서 선언한 변수는 모두 전역 변수이다. -> var 2) 블록 레벨 범위(Block-level Scope) - 모든 코드 블록(함수,if문,for문,while문,try/catch문 등)내에서 선언된 변수는 코드 블록{} 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.  - 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.- > let, const

 

 

 

 

이유1. 변수명의 중복사용이 허용되기 때문

• var는 변수명의 중복 사용을 허용한다. 따라서  변수값이 안전하게 보관되기 어렵다.
• 예를 들어 어떤 프로젝트에서 var를 이용해 변수를 사용하고 이용했는데 이를 알지 못하고 다시 동일한 변수선언을 해서 사용한다면 이전 값은 저장되지 않고 바뀌게 된다.
• 이는 함수 밖에서 선언된 변수는 전역변수가 되는 함수 레벨 범위인  var의 특성 때문이다.
• 이로 인해 전역변수가 남발되는 부작용이 있다.

 

 

 

이유2. 호이스팅으로 인한 undefined 문제, 코드의 명확성 저하

• 호이스팅을 통해 함수 범위 내에서 var의 선언이 함수 최상단으로 끌어올려진다. 이로 인해 var 변수의 선언과 초기화 이전에 변수를 사용해도 에러가 발생하지 않고 undefined가 출력된다.

• 즉, 인터프리터는 다음과 같이 코드를 해석한다.
• var sharon이라는 선언부만 함수 최상단으로 끌어올리기 때문에 초기화 혹은 정의되지 않았다는 의미의
  undifined가 출력되는 것이다.
• 이러한 복잡성은 코드의 정확성과 가시성을 저해하기 때문에 지양해야 한다.

 

 

이유3. 안그래도 복잡한 for문....whyrano...

• 앞 서 살펴본 바와 같이 var는 함수레벨의 범위를 가지기 때문에 for의 블록{}을 벗어나도 그 값이 유지가 된다.
• 따라서 for문에서 선언한 var i는 블록 밖에서도 유효한 것이다.

 

 

 

 

 

✨따라서, var 사용을 지양하고 let, const를 적절하게 사용해야 한다.

세가지 변수에 대한 자세한 설명은 [관련 포스트]에서 확인할 수 있다.