[클린코드 자바스크립트] 변수 다루기

1. const >= let >>>>> var

var 대신 let과 const 사용하는 이유

• var는 함수 스코프.
• let & const는 블록 단위 스코프 + TDZ(Temporal Dead Zone) => 안전한 코딩

Temporal Dead Zone
https://velog.io/@leeyw2709/JavaScript-Temporal-Dead-Zone

var global = '전역'

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

cosole.log(global); // 지역 (if는 함수 스코프가 아니기 때문)
}

let 보다도 const 쓰는 게 좋다

객체나 배열도 직접 재할당하는게 아니면 const를 써도 된다.

const person = {
  name: 'Lee',
  age: '25',
}

// Does not Work!
person = {
  name: 'Kim',
  age: '100',
}

// Work!
person.name = 'lee'
person.age = '26'

전역 공간 사용 최소화

전역 공간은 다음과 같이 나눌 수 있다.

• window (브라우저)
• global (Node JS)

IIFE, Module, 클로저를 이용하여 스코프 나누기

임시변수 제거하기

임시 변수를 최대한 줄여야 한다. 그 이유는

• 명령형으로 가득한 로직
• 디버깅이 힘듦
• 추가적인 코드를 작성하고 싶은 유혹에 빠짐(side effect)

해결책:

• 함수 나누기
• 바로 반환
• 고차함수(map, filter, reduce)
• 선언형 코드

function getDateTime(targetDate) {
  const month = targetDate.getMonth();
  const day = targetDate.getDate();
  const hour = targetDate.Hours();
  
  return {
    month: month >= 10 ? month : '0' + month,
	day: day >= 10 ? day : '0' + day,
    hour: hour >= 10 ? hour : '0' + hour,
  };
}

function getDateTime2(){
  const currentDateTime = getDateTime(new Date());
  
  return {
    month: currentDateTime.month + '분 전',
    day: currentDateTime.day + '일 전',
    hour: currentDateTime.hour + '분 전',
  }
}

호이스팅 주의하기

호이스팅은 런타임시 선언과 할당이 분리된 것(선언이 최상단으로 끌어올려짐)을 뜻합니다. 런타임시는 프로그램이 동작하는 시기를 의미합니다.

var global = 0;

function outer() {
  console.log(global); // undefined
  var global = 5;
  
  function inner() {
    var global = 10;
    
    console.log(global); // 10
  }
  
  inner();
  
  global = 1;
  
  console.log(global); // 1
}

outer();

강의에선 함수를 만들 때 const를 사용해서 만든 후 함수를 할당하는 방식 추천 (함수 표현식)
=> 사람이 실수할 수 있는 여지를 줄여줌

// 강의에서 추천하는 방식
console.log(sum()); // Error

const sum = function() {
  return 1 + 2;
}

console.log(sum()) // 3