[JavaScript][clean-code] var를 지양하자

* var를 사용을 지양하자.

  - let, const를 사용하자

 

* 왜 let, const를 사용해야 할까??

1. Scope (핵심)

• var : 함수 스코프
• let, const : 블록 스코프, Temporal Dead Zone(TDZ)속성을 가지고있음
  • 더 안전하다.
  • TDZ : 변수 선언 전에 변수를 호출 할경우 reference error 가 발생하는데 이때 tdz 에 걸렸다고 표현

 2. 재선언, 재할당

• var : 재선언, 재할당이 가능하다.
  • 중복선언도 가능하다.
  • 따라서 코드가 길어지면 어떤값이 선언된건지 어떤값이 호출될지 예상이 되지않는다.
• let : 재선언 불가능, 재할당은 가능
  • 따라서 안전하게 사용 가능
• const : 재선언 및 재할당이 되지않음

---

* code로 확인하는 scope의 차이

 

* var 예시 코드

var global = '전역'

if(global === '전역') {
  var global = '지역';
  
  console.log(global); // 지역
}

console.log(global); // 지역

• 기대 효과는 지역만 바뀌기를 바랬다.
• 하지만 전역 공간에 있는 스코프까지 오염이 되었다.
• var는 함수 단위 스코프이다. if는 블럭 단위 스코프이므로 var에 의해서 영향을 받는다.
• 불안 요소를 계속 가지게 된다.

* let 예시 코드

let global = '전역'

if(global === '전역') {
  let global = '지역';
  
  console.log(global); // 지역
}

console.log(global); // 전역

• 블럭 단위로 구분되어 자신의 역할을 정말 잘 수행하고 있다.
• 안전하게 선언이 가능하다.
• 전역공간에서는 합당한 값을 호출해준다.
• 예상한 결과대로 나오는 결과를 만들어 낸다.

---

* 그렇다면 let, const중 무엇을 써야할까?

  - const를 사용하여라

  - const는 재할당만 금지된다.

  - 본연의 객체 그리고 배열 같은 래퍼런스 객체들을 조작 할 때는 이상이 없다.

 

// 선언 + 할당
const person = {
  name: 'hwang',
  age: '30'
}

// 재할당이 되지않는다. error발생
person = { 
  name: 'hwang2'
  age: '30'
}

// 값을 변경하는 방법
person.name = 'lee';
person.age = '22';

console.log(person); // { name: 'lee', age: '22' }

• 재할당은 되지 않는다.
• 재할당을 하지 않고 객체 내부의 값만 변경하는것은 가능하다.

const person = [{
  name: 'hwang',
  age: '30'
}]

person.push({
  name: 'lee',
  age: '22'
});

console.log(person); 
// [ { name: 'hwang', age: '30' }, { name: 'lee', age: '22' }]

• 배열도 정상적으로 작동된다.