깔끔한 코드

코드 컨벤션

요즘엔 코드 컨벤션을 통하여 eslint 등 다양한 플러그인들이 자동으로 가독성을 유지해준다. 그러나 플러그인 만으로는 채울 수 없는 부분들도 상당히 많이 존재한다. 코드 컨벤션과 관련해서는 다양한 논의들과 기법들이 있어서 더 자세히 알고 싶다면 leonardomso/33 JS Concepts에서 소개하는 다양한 링크들을 참고하길 추천한다.

변수명

나 혼자 만드는 코드라면 전혀 상관없지만 대부분 많은 사람들과 협업을 할 것이다. 하다 못해 하루라도 휴가를 가고 싶다면 남들이 봐도 직관적인 깔끔한 코드로 작성해야할 필요가 있다.

const d = new Date(); // BAD
const currentDate = new Date(); // GOOD
const cdgCurrentDate = new Date(); // Too Much..?

정말 너무 환경이 나빠서 1KB라도 더 살리려고 발악해야할 필요가 없는 상황이라면 변수명만 봐도 예측이 가능하도록 만드는 것이 좋다. 대형 프로젝트들의 경우 코드 컨벤션에서 변수명을 정할 때 변수의 유형, 자료형, 스코프, 사용처까지 적어두기도 한다. 예를 들자면, 위의 예시에서 cdg의 뜻이 const, date, global의 앞글자를 딴 것이다.

이런 강력한 제약이 걸린 상황이라면 주변에서 맞추라고 아우성을 칠 것이기 때문에 상관 없지만 일반적인 경우라 해도 너무 축약해서 쓰거나 전혀 연관없는 변수명을 쓰는 것은 매우 좋지 못하다.

검색 가능한 명칭

if ( status === 49967 ) // BAD

if ( status === NOT_FOUND_ERROR_CODE ) // GOOD

코드가 길어지면 찾는 것도 일이된다. 검색이 가능하고 예측이 가능한 변수를 사용하는 습관을 들여 유지보수가 용이하도록 코드를 만드는 것이 좋다.

간결한 분기문

if (status <= NOT_FOUND_ERROR_CODE
 && status > 10
 && results[status - 1] < results.length 
 && getMaxResults() != ERROR_CODE) // DISGUSTING

/******************************************/

const isValid = (status, results) => {
  const isNotError = status <= NOT_FOUND_ERROR_CODE
  const isNotLoading = status > 10;
  const isNotLast = results[status - 1] < results.length 
  const isNotMaximumError = getMaxResults() != ERROR_CODE;

  return !isNotError && !isNotLoading && !isNotLast && !isNotMaximumError;
}

if (isValid(status)) // GOOD

코드를 작성하다보면 여러가지 상태에 대해서 분기해야하는 경우가 생긴다. 위 예시처럼 점점 분기조건이 길어지면 어디서부터 봐야 하는지 어질어질해지는 경우도 많이 생긴다. 이런 분기들은 차라리 함수로 빼두는 것이 가독성을 높이는데 도움이 될 수 있다.