[JavaScript] 클린 코드, 닌자 코드

ParkCode·2024년 3월 14일

자바스크립트

목록 보기

18/20

1. 클린코드

클린 코드란, 코드를 작성할 때 가독성있고 재사용 가능하여 유지 보수성을 높히는 코드를 말합니다.

다음은 "클린한" JS 코드는 어떤 것일까요? 다음의 조건을 충족해야 합니다.

읽기 쉽다

디버깅이 쉽다

효율적이고 고성능이다

1.1 변수

의미있고 쉬운 변수를 사용한다.

// bad
const yyyymmdstr = new Date();

// good
const currentDate = new Date();

사용자를 user라고 정했다면, 사용자를 의미할 때는 user만 사용합니다.
user, client, customer 등 여러가지 사용하여 혼용되지 않게 합니다.

1.2 의도를 파악하기 쉽게 변수를 사용하기!

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

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

1.3 자신만 알아볼 수 있는 작명을 피하기!

// bad
products.map(p => p.id === 1) 

// good
products.map(product => ... )

암시적인 것보다 명시적인 것을 사용한다.

1.4 함수

함수의 인자는 2개 이하가 가장 적당합니다.

매개변수의 개수를 제한하는 것은 함수 테스팅을 쉽게 합니다.
매개변수가 3개 이상이라면, 테스트하는 경우의 수가 많아집니다.
(3개 이상이라면, 대부분 함수가 너무 많은 역할을 하는 것입니다.)
많은 역할을 하지 않는데 많은 인자를 사용해야 한다면, 객체를 이용할 수 있습니다.

// bad
function createMenu(title,body,buttonText,cancellable) {
  //...
}

// good
function createMenu({title,body,buttonText,cacellable){
  //...                    
}

1.5 함수는 하나의 행동만 해야 합니다.

자바스크립트뿐만 아니라 소프트웨어 엔지니어링에서 가장 중요한 규칙입니다. 함수가 1개 이상의 행동을 하면 작성,테스트,이해 모두 어려워집니다.

2. 닌자코드

닌자와 같이 이름이 알려지지 않았지만, 아는 사람들만 아는 무림의 고수가 사용하던 코드다.
그 코드의 특징을 알아보는 글이다.

2.1 코드는 최대한 짧게 쓰기

i = i ? i < 0 ? Math.max(0, len + i) : i : 0;

이 코드를 본 다른 개발자들은 i가 무슨 변수인지 알아보는 데 엄청 오랜 시간이 걸리겠지만, 답을 찾지 못합니다.

2.2 약어(나만의 단어사전) 사용하기

let ua = userAgent;
let lst = list;
let brsr = browser;

이렇게 코드를 짠다면, 당신만이 혹은 이 코드를 읽을 직감이 뛰어난 개발자만이 유지보수를 할 수 습니다.

2.3 포괄적인 명사 사용하기

str, num과 같이 자료형과 연관된 변수명을 사용합니다.
이 변수가 뭘 의미하는지, 데이터 자체를 뜻하는 건지는 당신만이 알 수 있습니다.

2.4 함수에 다양한 기능 넣기

하나의 기능을 담지 말아야 합니다. 함수 이름으로 함수의 기능을 한정 짓지 말자는 의미입니다. 예를 들어, validateEmail(email)와 같은 함수에 이메일 주소인지 아닌지를 판별하는 기능 외에도, 에러 메시지를 보여주는 기능도 추가하고, 메일 주소를 다시 입력하라는 기능도 추가하는 것입니다.
이렇게 만들면 코드 재사용도 방지할 수 있고, 그로 인해서 질문할 수 있는 사람도 없다는 장점이 생긴다.