Javascript 스타일 가이드

자바스크립 스타일 가이드

자바스크립트 코딩 스타일에 대해 고민이 된다.

갈수록 길어지는 코드 구조를 어떻게 해야할까?

코드 내용이 짧다면 어떻게 정리해도 알아보기 어렵지 않은데, 많을 경우에는… 😂

 

그래서 알아봤다! 깔끔하게 코딩할 수 있는 스타일 가이드!

 

1. 가로 들여쓰기

2개 or 4개!

스페이스 두 개 혹은 네 개를 사용한다.

 

2. 세로 들여쓰기

논리 블록 사이에 빈 줄을 하나씩 넣어 코드를 분리해주자.

가독성 좋은 코드를 만들기 위해선 세로 들여쓰기 없이도 아홉 줄 이상 쓰지 않기로!

function pow(x, n) {
  let result = 1;
  //              <-- 빈줄
  for (let i = 0; i < n; i++) {
    result *= x;
  }
  //              <-- 빈줄
  return result;
}

 

3. 중첩 레벨

가능하면 너무 깊은 중첩문은 사용하지 않도록 합시다.
반복문을 사용할 때 중첩문의 깊이가 깊어지지 않도록 주의!

continue를 사용하면 도움이 됩니다.

 

 

4. 함수의 위치

함수 여러 개를 만들어 사용하고 있다면, 다음 방법 중 골라 사용할 수 있습니다.

1. 헬퍼 함수를 사용하는 코드 위에서 헬퍼 함수를 모아 선언하기
2. 코드를 먼저, 함수는 그 다음에 선언하기
3. 혼합: 코드 바로 위에서 필요한 헬퍼 함수 그때그때 선언하기

 

이 중 추천은 두 번째, [코드를 먼저, 함수는 그 다음에 선언하기].

이유는 사람들의 글을 읽는 방식 때문입니다.

이 코드가 '무엇을 하는지'에 대해 잘 설명해줄 수 있는 방식이기 때문이죠.

 

// 함수를 사용하는 호출 코드
let el = createElement();
setSomething(el);
viewSomething();

// 사용되는 함수 
function createSomethig() {
  ...
}

function setSomething(elem) {
  ...
}

function viewSomething() {
  ...
}

이 과정에서 함수명을 잘 지었다면, 함수의 역할을 알 수 있습니다.

그러니 무슨 함수인지 함수 내부를 뜯어볼 필요도 없게 됩니다!

 

5. 스타일가이드

참고하면 좋은 스타일 가이드 링크

• Google의 자바스크립트 스타일 가이드
• Airbnb의 자바스크립트 스타일 가이드
• Idiomatic.JS
• StandardJS

 

6. Linter

Linter는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구입니다. 코딩스타일과 에러를 체크해주는 코드의 포맷팅, 품질관리 도구다.

 

가장 최근에 나왔고, 대기업에서도 사용하는 ESLint이 대중적입니다!

 

링크 >>  ESLinter 설치 및 사용 방법

 

 

 

---

참고/출처: https://ko.javascript.info/object-basics