[스터디] 자바스크립트 코드 품질

 

좋은 코드란?

코드로 문제를 잘 해결하는 것도 중요하지만, 사람이 읽기 좋게 쓰는것도 중요하다.

함께 일하는 사람들은 물론 미래의 나를 위해서도 필요하다. 

즉, 좋은 코드란 가독성이 좋은 코드이다.

 

좋은 코드, 클린 코드를 위한 여러가지 추천이 있지만, 사실 같이 일하는 사람들과의 규칙을 준수하는 것이 가장 중요하겠다.

이 글에서는 공부를 하는 입장에서 문서나 책에서 추천하는 방법들을 몇가지 정리해보도록 하겠다.

(다른 자료를 참고하여, 예제를 복사하지 않았습니다. 상세한 조건들은 reference글들을 참고바랍니다.)

 

 

코드 품질 향상을 위한 방법들...

1. 적당한 간격

• 아래 그림과 같이 적당한 공백과 들여쓰기, 띄어쓰기가 필요하다.
  • 가로 들여쓰기 : 스페이스 2개 혹은 4개를(혹은 탭) 사용하는 것이 보편적이다. 
  • 세로 들여쓰기: 논리 블록 사이에 넣어 코드를 분리 시켜준다.

 

출처: Javascript info

2. 명명규칙

 - 이름만으로 어떤 역할인지, 기능인지 알 수 있는 변수명/함수명을 사용하는것이 좋다.

 - 짧게 줄인 약자는 지양한다.

  좋지 않은 예:

• list -> lst
• userAgent -> ua
• getScore -> gS

 - 동일한 유형, 기능은 동일한 어휘를 사용한다.

   ex) 화면에 보여주는 기능을 구현하면서 display, show, print 등으로 혼합해서 사용하는 것이 아니라 하나로 통일해서 사용

 - 함수/변수명: Lower camel case 표기법을 사용한다.

    - 첫 글자는 소문자, 이어지는 각 단어의 첫글자는 대문자로 사용

    - ex. getScore( ), userAgent

    - 변수명은 다른 규칙을 사용해서 함수와 구분하기도 한다. (ex. first_name)

 - 상수, 전역변수 : 대문자 표기

 - 생성자 함수: Upper carmel case 표기법을 사용한다.

    - 모든 단어의 첫글자는 대문자로 표기한다.

    - ex. CurrentDate

 - 이름 재사용, 유사하 철자 이름 사용, 동의어 사용 등은 지양한다.

 

 

3. 함수

 - 함수는 하나의 기능을 하도록 작성한다.

 - 인자는 2개 이하가 이상적이다.

 - 명령형 프로그래밍보다 함수형 프로그래밍을 지향한다.

 - 조건문 작성을 지양하고, 다형성을 이용한다 (함수가 하나의 기능만 할 수 있도록)

 - 함수 호출자와 피호출자는 가깝게 위치시킨다.

 

4. 기타

 - ES5함수보다 ES2015/ES6 클래스를 사용하라.

 - Callback 대신 Promise 사용하기

   : callback은 중괄호 중첩을 다량 생산한다.

 - Async / Await 은 Promise보다 깔끔하다.

 - 주석 처리는 로직이 복잡한 경우에만 사용한다.

 

 

    

---

References...

1) https://ko.javascript.info/coding-style

2) https://github.com/qkraudghgh/clean-code-javascript-ko#%ED%95%A8%EC%88%98functions

3) https://www.nextree.co.kr/p6362/