JavaScript 클린 코드, 닌자 코드

* 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다.

---

 

본 글에서 다룰 내용

• 권장하지 않는 코드 작성 방법(닌자 코드)
• 코드 품질을 높이는 클린 코드 작성 방법(클린 코드)

---

아래의 글에서는 권하지 않는 코드 작성 방법들을 알려드리겠습니다.

 

코드 짧게 쓰기

 

조건부 연산자 '?'를 사용한 예시를 살펴봅시다

// 출처: https://ko.javascript.info/ninja-code
i = i ? i < 0 ? Math.max(0, len + i) : i : 0;

이렇게 작성한다면 이 코드를 접한 다른 개발자는 i가 나타내는 게 뭔지 파악하는데 꽤 많은 시간을 소모하고, 결국엔 답을 찾기 못해 당신에게 찾아올 것입니다. 그렇다면 싸움의 지름길이 되겠죠😀

---

글자 하나만 사용하기

 

글자 하나만 사용해서 변수 이름을 짓는다고 생각해봅시다.

변수 이름이 짧아지면 해당 변수를 찾을 수 없게 됩니다. 코드 에디터의 "검색" 기능도 통하지 않습니다.

다른 개발자가 어렵게 변수가 정의된 곳을 찾더라도 변수 a나 b가 무엇을 의미하는지 해석을 못 할 것입니다.

 

※) 예외로 "for"문에서 사용하는 변수 i 혹은 j는 가능합니다😁

---

약어 사용하기

 

예시로

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

이렇게 코드를 작성한다면 저 변수가 무엇을 의미하는지 해당 개발자 외엔 아무도 이해를 하지 못할 것 입니다.

---

포괄적인 명사 사용하기

 

• data, value, obj, item 과 같은 다양한 개념을 포괄할 수 있는 명사를 말합니다.
• 똑같은 data라고 해도 이 data가 가지고 있는 데이터의 종류를 확인시켜주어야합니다.
• str, num과 같이 자료형과 연관된 변수명을 사용하면 안됩니다.
• data1, item2와 같이 옆에 숫자를 붙여 쓰는 것도 좋지 않습니다.

---

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

 

date와 data같이 유사한 철자를 가진 단어를 조합해 사용한다면 굉장히 헷갈리는 일이 많겠죠?

만약 날짜를 가진 data가 있다면 datedata보다는 다른 변수명을 사용하는 것이 좋을거에요.

---

동의어 사용하기

 

만약 작성해야하는 함수의 종류가 오류를 보여주는 함수와, 결과를 출력하는 함수가 있다고 합시다.

그런데 오류를 보여주는 함수명을 printError라고 하고, 결과를 출력하는 함수를 printResult라고 한다면 함수간의 구분이 잘 되지 않겠죠? 저 같으면 에러를 보여주는 함수명은 showError로 하고, 결과를 출력하는 함수를 printResult라고 하겠습니다😁

---

이름 재사용하기

 

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

  elem = clone(elem);

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

함수에서 받아오는 값의 이름과 함수 내에서 사용하는 값의 변수 이름이 같다면 구분하기가 정말 힘들겠죠..?

---

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

 

_name이나 __value처럼 변수명 앞에 _나 __를 붙인다면, 코드 길이가 늘어나 가독성이 떨어지는 효과가 있을 것입니다. 그리고 동료 개발자들은 언더스코어에 있는 의미를 파악한다고 더 많은 노력과 시간이 들것입니다.

---

과장 형용사 사용하기

 

superElement, megaFrame과 같이 앞에 의미 없는 형용사를 붙인다면, 작성자는 아무 의미 없었다 해도 이 코드를 재사용하고 해석해야하는 동료 개발자들은 의미를 찾는다고 지옥일 것 입니다. 배려하는 삶을 삽시다.

---

외부 변수 덮어쓰기

 

let user = authenticateUser();

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

함수 render가 긴 상황에서 user와 관련된 함수 하단부 로직만 수정해야 하는 상황이라고 해 봅시다. 개발자는 코드를 처음부터 읽지 않고 해당 로직이 있는 부분부터 읽을 확률이 높습니다. 그럼 첫 줄에서 user가 다시 정의되었다는 것을 놓치게 됩니다.

함수 내부에서 변수 user를 다시 정의했음에도 불구하고, 개발자는 user가 외부 변수(authenticateUser()의 호출 결과)인지 착각하며 작업을 진행할 겁니다. 함정이 참 깊네요.

---

함수에 다양한 기능 넣기

 

함수 하나에 여러 기능을 욱여넣으면 코드 재사용을 할 수 없습니다.

이렇다면 js로 개발하는 의미 자체가 없어지는 것 입니다.

---

그렇다면 클린 코드를 작성하는 방법은 무엇일까?

• 검색 가능한 이름을 사용합니다.
• 함수명은 반드시 동사로 설정하고, 함수는 하나의 동작만 해야합니다.
• 함수의 인수는 3개 이하가 적당합니다. 단 많을 경우 Object로 정리해서 param을 사용합니다.
• 함수의 파라미터에 boolean을 둬서 액션 2개 이상을 구현하기 보다는, 함수를 2개로 구분하는 것을 추천합니다.
• 변수명은 너무 축약하지 말고, 이해할 수 있는 변수명으로 작성합니다.

※) 문제를 해결해야하는 코딩 초반부에는 동작에 초점을 맞춰서 작업하고, 모든 동작이 성공적으로 작동된다면 그 이 후 클린 코드로 리팩토링 하는 것을 추천드립니다.

---

참고 문헌 및 사이트

 

모던 JavaScript 튜토리얼 - https://ko.javascript.info/ninja-code

노마드코더 깨끗한 코드를 위한 5가지 팁 - https://www.youtube.com/watch?v=Jz8Sx1XYb04

 

긴 글 읽어주셔서 감사합니다😀