깨끗한 코드를 작성하는 팁

클린 코드가 중요한 이유

• 좋은 코드라는 것은 돌아가기만 하면 되는 코드가 아니라 코드 그 자체로 설명이 되는 코드다.
• 이상적인 코드는 읽기만 해도 무엇인지 이해가 되고 코드가 무엇을 하는지 물어볼 필요가 없는 코드다.
• 코드를 작성한 본인도 시간이 지난 후 부연설명 없이 설명이되는 코드, 이게 바로 훌륭한 코드의 모습이다.

검색이 가능한 이름을 쓰자

코딩을 하다보면 랜덤하게 값을 추가해야할때가 있다. 어떤 숫자를 사용할때 숫자가 의미하는 이름으로 변수에 할당해준다.

🤔

setInterval(eatFood, 86400) //86400이 뭐야?

✅

const secondInADay = 86400;
setInterval(eatFood, secondInADay) // 하루를 나타내는 초구나

함수명은 반드시 동사를 쓰자

🤔

function userData(){
  //...
}
const data = userData(); //무엇을 하는 함수인거야?

✅

function loadUserData(){
  //...
}
const userData = loadUserData(); //유저데이터를 불러오는 함수군

이렇게 적으면 함수가 너무 많은 역할을 하는 것은 아닌지 알게되기도 한다.

하나의 함수는 한가지 액션만 수행해야 된다.

어떤 함수가 너무 많은 일을 하면 해당 함수를 쪼개야할 수도 있다.

함수가 받는 인자가 너무 많으면 이해하기 어렵다.

2-3개의 인자까지는 이해하기 좋지만 그 이상은 너무 복잡해지므로
configuration object를 사용하는 것이 좋다.

✅

function makePayment({ price, productId, size, quantity, userId }) {
}
makePayment({
  price: 35,
  productId: 5,
  size: 'large',
  quantity: 2,
  userId: 'kim305',
});

boolean 값을 인자로 함수에 보내는 것을 최대한 방지하자.

boolean 값을 함수로 보낸다는 것은 그 함수 안에 if,else가 있다는 뜻이니
각각 if,else 값을 다른 함수로 분리하는 것이 좋다.

🤔

function sendMessage(text, isPrivate){
  if(isPrivate){
    // send private message
  } else {
    // send public message
  }
}

✅

function sendPrivateMessage(text){
  //...
}
function sendPublicMessage(text){
  //...
}

짧은 변수명이나 축약어를 쓰는 것을 피하자

🤔

allUsers.forEach((u, i) => {
  sendEmail(u);
  addToCount(i);
})

✅

allUsers.forEach((user, currentNumber) => {
  sendEmail(user);
  addToCount(currentNumber);
})

PS. 처음부터 클린하게 작성하지 않아도 된다.

코드가 못생겼더라도 일단 코드를 열심히 작성하고 작동이 되는것을 확인하고 그다음 클린하게 다듬어 주면 된다. 처음부터 코드를 아름답게 작성하는 것은 너무 어렵다.

요약한 영상출처: 노마드 코더 Nomad Coders: 깨끗한 코드를 위한 5가지 팁