목차

  1. 변수(Variables)
  2. 함수(Functions)
  3. 객체와 자료구조(Objects and Data Structures)
  4. 클래스(Classes)
  5. SOLID
  6. 테스트(Testing)
  7. 동시성(Concurrency)
  8. 에러 처리(Error Handling)
  9. 포맷팅(Formatting)
  10. 주석(Comments)
  11. 번역(Translation)

들어가며 😇

js 클린코드 번역판을 보고 공부한 내용을 작성하는 글 입니다. 모든 내용이 있는 것이 아닌 잘 모르는 내용만을 정리한 글이니 전체 내용을 보고 싶으면 위의 링크를 참고하세요.

변수

동일한 유형의 변수에 동일한 어휘를 사용하세요

// wrong
getUserInfo();
getClientData();
getCustomerRecord();

// good
getUser();
  • getUserInfo()에서 info단어를 사용하지 않아도 ‘유저 정보를 가져와라’라는 뜻을 이해할 수 있기 때문이다.

검색 가능한 이름을 사용하세요

// wrong
setTimeout(blastOff, 86400000);

//good
const MILLISECONDS_IN_A_DAY = 86400000;
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);
  • 86400000가 무엇을 의미하는지 알 수 없기 때문에 전역변수를 선언하였다.

의도를 나타내는 변수들을사용하세요

// wrong
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);

// good
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);

기본 매개변수가 short circuiting 트릭이나 조건문 보다 깔끔합니다

// wrong
function createMicrobrewery(name) {
  const breweryName = name || 'Hipster Brew Co.';
  // ...
}

//good
function createMicrobrewery(name = 'Hipster Brew Co.') {
  // ...
}
  • 기본 매개변수는 종종 short circuiting(단락평가)트릭보다 깔끔합니다.
  • 기본 매개변수는 매개변수가 undefined일때만 적용됩니다.
  • ‘’, “”, false, null, 0, NaN 같은 falsy한 값들은 기본 매개변수가 적용되지 않습니다.

단락평가

변수를 할당할 때 논리(||)연산자를 사용하는 방법

var person = {
  name: 'Jack',
  age: 34,
  job: 'teacher'
}
console.log(person.job || 'unemployed');
// teacher

Quiz

var a;
var b = null;
var c = undefined;
var d = 4;
var e = 'five';

var f = a || b || c || d || e;

console.log(f);