var 를 쓰면 안되는 이유 ?

 

# var / let / const 비교 

	var	let	const
재할당	가능	가능	불가능
재선언	가능	불가능	불가능
스코프	함수 내	블록 내	블록 내
호이스팅	문제 있음	안전함	안전함

 

var 는 레거시라 쓰지않는 것이 좋다. ( 그냥 쓰지말기 ! )

 

 

블록 무시 

 

// var - 블록을 무시함
if (true) {
	var password = '1234'
}
console.log(password); // '1234' 가 출력됨 !! -> 보안 문제 발생

// 올바른 방법 
// -> 블록 안에서만 유효하도록사용
if (true) {
  let password = '1234'
}
console.log(password) // 에러가 나서 안전함

 

- if,for 블록 안에서 선언해도 밖에서 접근가능하기 때문에 의도치 않은 변수 오염이 발생

- 디버깅 지옥에 빠질 수 있음 

 

 

중복 선언 허용

// var 사용 문제-> 실수로 덮어써도 에러가 나지 않음
var userId = 'user'
var userId = 'admin'
console.log(userId) // 'admin' 출력

 

- 같은 이름의 변수가 존재한다는 것은 충돌위험이 크다 !! 

 

 

반복문 버그 

// 클로저 문제 
for (var i=0; i<3; i++) { 
 setTimeout(() => {
  console.log(i) // 3,3,3
 },100)
}

 

- var 는 i 를 공유하기 때문에 i 가 증가해도 같은 i 가 출력됨

- let을 사용하여서 변수를 재할당해주어야 새 i 로 출력됨

 

클로저(Closure) 란? 
: 함수가 자기가 태어난 환경을 기억하는 것 

- var 는 같은 변수를 기억하기 때문에 모두 같은 i 를 기억한다 
- let,const 는 블록 스코프이기 때문에 각 반복마다 새 i를 생성하여 각자 다른 i를 기억할 수 있다.

 

 

호이스팅 문제

 

호이스팅(Hoisting)이란?
 자바스크립트가 코드를 실행하기 전에 변수/함수 선언을 코드 맨 위로 끌어올리는 것 

 

// var 사용 
console.log(count) // undefined (에러 없음)
var count = 10

 

- 선언전에 변수를 호출하였는데 에러가 발생하지 않고 undefined가 떠버리는 상황

   -> 버그를 숨겨 코드 흐름 파악이 어렵고 의도치 않은 동작을 야기할 수 있음 

 

 

전역 오염

 

var globalVar = '위험'
console.log(window.globalVar) // '위험'

let safeVar = '안전'
console.log(window.safeVar) // undefined

 

- var 변수가 전역객체에 붙어 출력되므로 충돌위험 발생

 

 

 

 

---

 

 

 

ESLint 를 설치하면 잘못된 js 문법을 잡을 수 있다 ~~~

 

 

 

---

 

첫 프로젝트에서 남발했던 var ... 

제발 좀 쓰지말라고 한소리 들었던 ... 

이젠 왜 쓰면 안되는지 알았으니 보내주자

안녕 ~