var, let, const 차이 var 쓰면 안되는 이유..

------ ------ ------ ------ ------ ------ 
Var Let Const 차이 정리 (스코프, 호이스팅)
------ ------ ------ ------ ------ ------ 

var 선언 문제
-- 스코프
 - 중복 선언이 가능함
 - 전역 선언 시 window에 선언됨
 - 함수 스코프로 원치 않는 결과가 나올 확률이 높음

-- 호이스팅(=프로그램이 실행되기 이전에 변수 선언/초기화 하는 동작)
 - undefined로 초기화 시킴
   
 TDZ(일시적 사각지대)
 --> let 이 변수 선언 전에 오류나는 것
 
const
 - 변수 초기화 선언이 필수적
 - 일반 상수로 선언하면 다른 변수값으로 변경이 불가함
 - 객체로 만들면 객체의 속성 값은 변경이 가능함
----------------------------------------------------------------------------------------------------------------

 

개념적으로는 위와 같고 코드로 이해를 해보려고 하면

 

1. 함수 스코프(Function Scope)

function b () { 

    if (true) {
    	var a = 'cc';
    	console.log(a);
    }
    
    // 이 부분이 오류가 나야하는디
    console.log(a);
    
}

b();

 

간단 예시로 위와 같은 함수를 실행하면 자바를 경험해보거나 다른 개발을 접해본 경험이 있다면

변수 a가 if문 true 안에 선언되어 있으니 if문 밖에서 console.log(a)를 실행하면 오류가 나야 한다고 생각을 할텐데

실제 실행을 해보면 오류가 나지 않고 아래처럼 실행이 됨

 

실행이 된 이유는 var는 함수 스코프로 선언되다보니 function b 안에서 사용이 된 부분임..

if 블록({}) 단위가 아니라 function b 함수 단위로 변수가 사용되는점에서 예상하지 못한 변수 접근을 야기 할 수 있음

 

2. 변수 중복 선언 허용 (재선언)

var x = 1;
var x = 2;

console.log(x);

가장 큰 문제는 아마 변수 중복 선언일거라 생각하는데 위 코드를 실행하면

이런식으로 작동이 됨.. 개발을 혼자하고 코드가 적으면 모르겠지만(그래도 문제,,)

저게 단순 1, 2 지만 누군가는 1이 필요해서 쓰고 있었는데 갸를 2로 바꾸면 동작하는게 다 망가질 수 있으니,, 절~~대 var를 조심하자

 

3. 전역 오염(window 객체에 바인딩)

var x = 'hello';
console.log(window.x); // hello

전역에 선언을 하면 얘가 window 객체에 바인딩이 됨....

 

위에 이미지를 보면 aaaaaa를 콘솔에서 선언하니까 얘가 Window에 선언이 된 것

이미 window에는 제공하는 다양한 옵션들이 있는데 예기치 못하게 중복되거나 겹쳐서 오류가 날 가능성 높아지는 것..

 

 

* 추가적으로 호이스팅 문제

console.log(a);
var a = 1;

이렇게 만약 사용을 한다면 자바스크립트는 위에서부터 아래로 동작을 하니까

a가 선언되기 전에 a를 호출하면 오류가 나야하는게 일반적인 동작으로 생각이 드는데..

이건 오류가 안남..

요게 var는 자바스크립트에서 호이스팅(끌어올림)이 되다보니까 undefined로 초기화를 시켜버림

이게 디버깅을 어렵게 만드는 요소가 됨..

 

 

 

그럼 결국 위에 문제들로 인해서 var는 안쓰는게 좋다는게 결론인데

let, const는 위에 요소들을 다 막아주느냐?? 그렇슴..

 

일단  let과 const는 "Temporal Dead Zone(임시 사각지대)"에 걸려서 선언 전에 접근하면 에러를 냄 

이게 let a로 동일하게 호출한건데 a가 초기화 되기전에는 접근 할 수 없다고 에러로 튕겨내줌

 

그리고 위에 문제로 언급한 1~3번 요소 모두 해결이 됨

 

1. 함수 스코프가 아니라 블록 스코프 단위로 동작

-> {} 중괄호로 감싸진 범위 내에서만 유효함

function b () { 

    if (true) {
    	let a = 'cc';
    	console.log(a);
    }
    
    // 이 부분이 오류가 나야하는디
    console.log(a);
    
}

b();

위에 var 부분만 let 으로 바꿨음

 

바로 아래 if 블록 밖에서 호출한 console.log 에선 오류를 뱉어줌!!!

이게 물론 되고 안되고가 문제는 아니지만 이런게 모여모여서 안전하게 코딩을 할 수 있다고 생각

 

2-3.  중복선언, 전역선언

 -> 둘 다 let, const는 안됨

 

 

 

** 결론적으로 var를 써도 프로그램이 동작하는데 문제는 없슴..

그치만 디버깅이 어려운 스크립트에선 최대한 문제를 야기할만한 애들은 지워내고 가는게 좋겠다

고로 var를 지양~~하자