클린코드 자바스크립트

클린코드 자바스크립트 강의를 보고 정리해보는 글.

var를 쓰지 않는다.

함수스코프를 가지고 있고, (함수 내부가 아니라면 블록 내부에서 선언되어도 전역변수가 되어버린다.)
재선언과 재할당이 가능하기때문에 안정적으로 코드 작성하기 힘들다.

그래서 const, let을 사용하는 것을 권장한다.

const, let은 블록스코프를 가진다.
그리고 재선언이 불가능하다. let은 재할당이 가능하고 const는 재할당이 불가능하다.
이중에서도 const를 사용하는 것을 더 권한다.
const를 사용해도 본연의 객체, 배열 조작에 문제가 없다.

const는 재할당이 불가능하다.
그런데 어떻게 객체, 배열을 조작할까?
const가 가진 데이터가 원시타입이 아니라 참조타입이라면, 데이터의 '주소'를 갖기 때문에 조작이 가능하다.

const obj = {name: 'seolgi', age: 4}
obj.name = '설기';

// obj = {name: '설기', age: 4}

전역변수를 쓰지 않는다.

어떤 함수 내부나 블록 내부에서 선언되지 않고 전역으로 선언된 변수를 전역변수라고 한다.
전역변수는 window, global, 즉 환경에 영향을 준다.(몽키패치)
파일이 나뉜다고 스코프가 나뉘지 않는다.
전역변수는 어디서나 접근이 가능하게 되어 스코프 분리에 위험하다.

전역변수로 인한 side effect 방지
즉시실행함수(IIFE), 모듈, 클로저, const, let을 활용한다.
지역변수를 사용하고 윈도우, 글로벌을 조작하지 않는다.

임시변수를 쓰지 않는다.

don't

function {
const result = {} //임시변수를 선언하고
result.name = document.querySelector('.name'); //값을 할당하고
result.age = document.querySelecator('.age');
return result; //리턴하는 방식
}

위 방식이 처음 자바스크립트를 공부하고 사용하던 방식이다.
소위 말하는 명령형 이라 할 수 있다.
예측이 어렵고 디버깅이 어렵다.

refactor 1

function {
  const result = {
    name: document.querySelector('.name');
    age: document.querySelecator('.age');
  }
  return result;
}

리팩토링해서 임시변수를 없앴지만 여전히 result에 접근 가능해보인다.

refactor 2

function {
  return {
    name: document.querySelector('.name');
    age: document.querySelecator('.age');
  }
}

바로 객체를 리턴한다.

함수를 나누어 하나의 함수가 하나의 역할만 하도록 한다.
바로 반환한다. (refactor2)
고차함수를 사용한다. reduce, filter, map 등
선언형 프로그래밍

호이스팅

호이스팅이란 런타임 시기에 선언부와 할당부가 분리되어 선언부가 최상단으로 끌어올려지는 현상을 말한다.
함수도 호이스팅 대상인데, 선언식일때에 해당한다.
선언만 끌어올려지기때문에 undefined가 뜨는 등... side effect가 발생할 수 있다.

호이스팅 방지

변수 선언, 할당, 초기화를 한번에 완료한다. 변수 간 명확한 분리가 가능해진다.
함수표현식을 사용한다.
var를 쓰지 않는다.