[모던 JavaScript 튜토리얼] 3.4 닌자 코드

02 Feb 2021 • Javascript

모던 JavaScript 튜토리얼을 읽고 정리하였습니다.

닌자 코드

이번 파트는 이 페이지를 작성하신 분이 파트 전체에 반어법을 사용하여 지양해야할 코드 작성법을 소개했다. 닌자코드란, 가독성을 최악으로 만드는 코드 작성법을 말하는 것 같다.

코드 짧게 쓰기

조건부 연산자 ?를 사용하여 가능한한 코드를 최대한 짧게 작성한다.

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

글자 하나만 사용하기

글자 하나만 사용하여 변수 이름을 지으면, 변수가 정의된 곳을 찾기도 매우 어려우며, 이 변수가 무엇을 뜻하는지 해석하는 데에도 어려움이 생긴다.

혹은 for문에서 변수 i를 사용하지 않고 생소한 x,y 같은 변수를 사용하는 경우도 있다. 이때 반복문 블록이 길어지면 길어질수록 이 변수가 무엇인지 파악하는 데 시간이 오래 걸린다.

약어 사용하기

한 글자만을 사용하여 변수명을 짓는 방법 말고도 약어를 사용하는 방법도 있다. 예를 들어 다음과 같이 변수명을 지어서는 안된다.

  • list -> lst
  • userAgent -> ua
  • browser -> brsr

포괄적인 명사 사용하기

무언가를 명명할 때, 아주 포괄적인 명사를 사용하면 이 변수가 특정하는 것이 정확히 무엇인지 알기가 어렵다. 다음과 같이 예시들이 있다.

  • data / value
  • str, num처럼 자료형과 연관된 변수명
  • data1, item2, elem5처럼 뒤에 숫자를 붙이는 변수명

철자가 유사한 단어 사용하기

주의력이 깊지 않다면 도저히 알아보기 힘들게끔 유사한 철자를 가진 단어를 조합해 변수명을 짓는 방법도 있다. 마치 date/data와 같이 말이다.

동의어 사용하기

유사한 뜻을 가진 단어 여러개를 같은 걸 명명하는데 사용하는 방법이 있다. 예를 들면 스크린에 메시지를 보여주는 단어로 display, show, render, paint를 다양하게 사용하는 것이다.

혹은 중대한 차이가 있는 두 함수에 같은 접두어를 사용하는 방법도 있다. 예시로는, 프린터를 사용하는 함수와 화면에 문자를 출력하는 함수가 모두 print를 접두어로 사용하는 경우를 들 수가 있다.

이름 재사용하기

새로운 값을 저장할 때 기존 변수를 활용하는 방법은 피해야 한다. 변수에 현재 어떤 값이 들어가있는지, 값의 유래는 어디인지 쉽게 파악하기가 힘들기 때문이다.

함수나 반복문 중간에서 할당 값을 은밀하게 바꾸어서도 안된다.

function ninjaFunction(elem) {
  // 매개변수로 받아온 elem을 이용한 코드

  elem = clone(elem);

  // elem의 복제(clone)본을 이용한 코드
}

elem = clone(elem); 이와 같은 코드가 있다면, 다른 개발자들이 이 코드를 사용할 때 본인이 복제본을 사용하고 있다는 사실을 쉽게 알아차리지 못할 것이다.

재미로 언더스코어 사용하기

_name이나 __value처럼 변수명 앞에 언더스코어를 임의적으로, 혹은 아무런 의미 없이 붙이는 것도 피해야 한다. 코드 길이도 늘어나며, 가독성도 떨어지며, 동료 개발자들은 언더스코어의 의미도 파악하기 힘들기 때문이다.

과장 형용사 사용하기

super, mega, nice 등과 같이 특별한 의미 없이 붙이는 형용사도 피해야 한다.

외부 변수 덮어쓰기

함수 내부와 외부에 동일한 이름을 가진 변수를 선언해 사용하는 방법도 피해야 한다. 다음과 같은 예시를 확인해보자.

let user = authenticateUser();

function render() {
  let user = anotherValue();
  ...
  ...함수 길이가 긺...
  ...
  ... // <-- 개발자는 user와 관련된 이 부분의 코드를 수정해야 함
  ...
}

함수 render가 긴 상황에서 user와 관련된 함수 하단부 로직만 수정해야 하는 상황이라고 가정해보자. 개발자는 코드를 해당 로직이 있는 부분부터 읽을 확률이 높으므로, 첫줄에서 user가 재정의되었다는 것을 놓치게 된다. 함수 내부에서 변수를 다시 정의했다는 사실을 모른채 개발자는 user가 외부 변수라고 착각하면 작업을 진행할 것이다.

부작용이 있는 코드 작성하기

isReady(), checkPermission(), findTags()같은 함수들은 단순 확인용으로 사용되고, 외부의 무언가를 바꾸지는 않으므로 부작용이 없다. 하지만 이런 접두사가 붙은 함수에 무언가를 바꾸는 기능을 더하면 다른 개발자들에게 혼란을 줄 수 있다.

혹은 checkPermission과 같은 함수가 누구나 예상할 수 있는 불린 값을 반환하지 않고, 다른 정보를 함께 엮는 객체를 반환할 때에도 혼란을 낳을 수 있다.

함수에 다양한 기능 넣기

함수가 해야하는 최소 기능 이외에 다른 기능을 함부로 추가하면 안된다.

예를 들어, 함수 validateEmail(email)에 유효한 이메일 주소인지 확인해주는 기능 이외에, 잘못된 이메일을 입력했을 때 에러 메시지를 보여준다거나 메일 주소를 다시 입력해달라는 기능을 추가해서는 안된다. 함수 하나에 여러 기능을 추가하게 되면 함수를 재사용하기에도 매우 불리하다.

 모던 JavaScript 튜토리얼s

Comments

Related Posts