프론트엔드/JavaScript

[JavaScript] 클린 코드 - 10. 포맷팅(Formatting)

포맷팅에 관한 과도한 논쟁은 낭비라고 생각한다.

이미 좋은 포맷팅 도구가 많기 때문이다.

하지만 아래의 몇 가지 기본적인 지침은 따르는 것이 좋다.

 

1. 일관된 대소문자를 사용한다.

// BAD
const DAYS_IN_WEEK = 7;
const daysInMonth = 30;

const songs = ['Back In Black', 'Stairway to Heaven', 'Hey Jude'];
const Artists = ['ACDC', 'Led Zeppelin', 'The Beatles'];

function eraseDatabase() {}
function restore_database() {}

class animal {}
class Alpaca {}

// GOOD
const DAYS_IN_WEEK = 7;
const DAYS_IN_MONTH = 30;

const songs = ['Back In Black', 'Stairway to Heaven', 'Hey Jude'];
const artists = ['ACDC', 'Led Zeppelin', 'The Beatles'];

function eraseDatabase() {}
function restoreDatabase() {}

class Animal {}
class Alpaca {}

 

2. 함수 호출자와 호출 대상은 가깝게 위치시킨다.

  • 이상적으론 호출자를 호출대상 바로 위에 위치시키는 것이다.
  • 우리는 코드를 위에서 아래로 읽기 때문이다.
class PerformanceReview {
  constructor(employee) {
    this.employee = employee;
  }

  lookupPeers() {
    return db.lookup(this.employee, 'peers');
  }

  lookupManager() {
    return db.lookup(this.employee, 'manager');
  }

  perfReview() {             // 찾기 힘든 위치
    this.getPeerReviews();
    this.getManagerReview();
    this.getSelfReview();
  }
}

const review = new PerformanceReview(user);
review.perfReview();

// GOOD
class PerformanceReview {
  constructor(employee) {
    this.employee = employee;
  }

  perfReview() {              // 찾기 쉬운 위치
    this.getPeerReviews();
    this.getManagerReview();
    this.getSelfReview();
  }

  getPeerReviews() {
    const peers = this.lookupPeers();
    // ...
  }

  lookupPeers() {
    return db.lookup(this.employee, 'peers');
  }
}