[ 변수 ]

var를 지양하자

TDZ란?  https://noogoonaa.tistory.com/78 참고

function scope & block scope

var는 함수 스코프(function scope) let과 const는 블록 스코프(Block Scope)이기 때문에 보다 안전한 작업을 할 수 있다.
let 보다는 cont 사용을 권한다. let은 재할당이 가능하고 const는 재할당이 불가능하기 때문이다.

전역 공간 사용 최소화

전역 공간이란?
최상위 공간을 뜻하며, 브라우저(window)와 노드JS(global) 환경으로 나뉘어져 있다.

전역공간 변수를 선언하면 window 객체에서 접근이 가능하다.
전역공간 변수를 선언하면 파일이 달라도 접근이 가능하다.

/* sample1.js */
var globalVariant = '난 글로벌 변수야';

console.log(window.globalVariant) // '난 글로벌 변수야'

/* sample2.js */
console.log(window.globalVariant) // '난 글로벌 변수야'

/* sample1.js */
var globalVar = '전역'

var setTimeout = 'setTimeout'

function setTimeout () {
  console.log(globalVar)
}

/* sample2.js */
setTimeout(() => {
  console.log('hello world')
}, 1000)
//-> 위 케이스는 에러가 발생한다. sample1에서 setTimeout이 재할당 됐기 떄문이다.

전역 변수를 사용하면 위와 같은 현상이 발생하기 때문에 전역 변수 사용은 금지하고 지역 변수(let, const)를 사용해야 한다.

임시 변수 제거하기

임시 변수란?
어느 특정 스코프 안에서 전역 변수처럼 활용하는 변수

단점
- 임시 변수를 사용하면 명령형으로 가득한 로직이다. (-> 선언형으로 작성하는 것이 좋다)
- 어디서 어떻게 값이 변경되는지 예측하기 힘들어 디버깅이 힘들다.
- 추가적인 코드를 작성하고자 하는 유혹이 크다. (-> 함수는 하나의 역할만 할 수 있도록 작성해야 한다)

function getElements () {
  const result = {}; // -> 이 변수가 임시 변수 역할이다.
  
  result.title = document.querySelector('.title');
  result.text = document.querySelector('.text');
  
  return result;
}

/* 임시 변수를 제거한 버전 */
function getElements () {
  return {
	result.title = document.querySelector('.title');
	result.text = document.querySelector('.text');
  }
}

해결책
- 이처럼 임시 변수를 사용하기 보다는 바로 리턴할 수 있도록 작성하는 것이 좋다.
- 함수를 잘게 나눌 수 있다면 나눠야 한다.
- 고차함수 사용.

호이스팅 주의하기

호이스팅이란?
선언과 할당이 분리된 것.
코드는 위에서 아래로 읽혀진다. 런타임시(프로그래밍이 동작하는 시기)에는 선언부가 코드 중간 혹은 아래에 있더라도, 선언부가 맨 위(최상단)에 위치해 있는것처럼 작동되는 것.

함수 선언식 보다는 함수 표현식을 사용하는 것이 좋다.