[클린코드] 주석 리팩토링

클린코드 4장 주석에서는 아래와 같이 말한다.

 

코드로 의도를 표현하라!

 

 

js를 개발하며 이 규칙을 지키기위해 리팩토링한 내용이 있어서 기록해둔다.

기존 코드에는 주석을 추가하여 코드를 설명하였다. 그러다 팀원들과 함께 공부했던 클린코드 스터디 내용이 생각나서 주석을 없앨 수 있도록 코드를 수정하였다.

$(document).ready(function (){
  // 첫배송지 추가시 모달 헤더를 닫기 버튼으로 변경
  if ($(this).hasClass("first")) {
    $(".zip_code_section").find(".js-moveToAdd").addClass("first");

    $(".js-moveToSelect").hide();
    $(".js-closeModal").show();
  }
});

 

이는 수정된 코드이다. 첫째로 first라는 클래스를 갖고 있는지 검사하는 코드를 is_first_addres라는 변수에 담았다.

이로써 "이것이 첫번째 주소인가? 맞다는 if문을 실행하라"는 의미를 담을 수 있다.

 

그 다음에는 어떤 동작을 하는지 함수로 묶었다. 함수의 이름은 changeCloseButton. 즉, 닫기 버튼으로 변경하라는 뜻이다.

function changeCloseButton () {
  $(".zip_code_section").find(".js-moveToAdd").addClass("first");

  $(".js-moveToSelect").hide();
  $(".js-closeModal").show();
}


$(document).ready(function (){
  var is_first_address = $(this).hasClass("first");
  if (is_first_address) {
    changeCloseButton();
  }
});

 

이 글을 읽고 더 좋은 변수와 함수의 네이밍 혹은 개선할 지점이 있다면 조언해주시면 감사하겠다.

사소한 리팩토링이지만 지식을 쌓는데 그치지 않고 실천에 옮긴 자신을 칭찬하며 앞으로도 잘하자는 마음을 담아 글을 마무리한다.