코딩 스타일

Dino_·2021년 7월 24일

coding style 코딩 스타일

이것도 알아?

목록 보기

5/8

시작에 앞서

‘무조건’ 따라야 할 규칙은 없다. 스타일에 대한 선호에 따라 규칙을 따를 수도, 따르지 않을 수도 있다.

개요

자바스크립트 기준으로 코딩 스타일이 작성되어 있지만, 보통 대부분의 언어에서도 이와 비슷하게 코딩 스타일 규칙을 제안한다.

범용적인 규칙이니 통일성을 갖고 코딩해보자!

중괄호

대부분의 자바스크립트 프로젝트에서 여는 중괄호는 ‘이집션(Egyptian)’ 스타일을 따라 새로운 줄이 아닌 상응하는 키워드와 같은 줄에 작성한다.

여기에 더하여 여는 중괄호 앞엔 공백이 하나 있어야 한다.

if (condition) {
  // 코드 1
  // 코드 2
  // ...코드 n...
}

if (condition) doSomething()과 같은 단 한 줄짜리 구문은 중요하게 다뤄야 할 에지 케이스이다. 이런 예외상황에도 중괄호를 써야 할까?

한 줄 구문을 작성하는 다양한 방식을 알아보자.

😠 중괄호 없이 새로운 줄에 코드를 작성할 수도 있는데, 이렇게 하면 새로운 코드 라인을 추가할 때 에러가 발생한다. 절대 이 방법은 쓰지 말자.

if (n < 0)
  alert(`Power ${n} is not supported`);

😏 코드가 짧다면 중괄호 없이 한 줄에 쓰는 방법도 괜찮다.

if (n < 0) alert(`Power ${n} is not supported`);

😃 가장 추천하는 방법은 다음과 같다.

if (n < 0) {
  alert(`Power ${n} is not supported`);
}

if (cond) return null처럼 코드가 간단하다면 두 번째 예시같이 한 줄에 몰아서 작성해도 괜찮다.

그렇지만 세 번째 예시처럼 코드 블록을 사용하는 방법이 가장 가독성이 좋으므로 이 방법을 추천한다.

가로 길이

코드의 가로 길이가 길어진다면 여러 줄로 나눠 작성하는 게 좋다.

// 백틱(`)을 사용하면 문자열을 여러 줄로 쉽게 나눌 수 있다.
let str = `
  ECMA International's TC39 is a group of JavaScript developers,
  implementers, academics, and more, collaborating with the community
  to maintain and evolve the definition of JavaScript.
`;

if문이라면 아래와 같이 작성할 수 있다.

if (
  id === 123 &&
  moonPhase === 'Waning Gibbous' &&
  zodiacSign === 'Libra'
) {
  letTheSorceryBegin();
}

최대 가로 길이는 팀원들과 합의해 정하는게 좋다. 대개 80자나 120자로 제한하는 게 일반적이다.

들여쓰기

들여쓰기에는 두 종류가 있다.

가로 들여쓰기

가로 들여쓰기는 스페이스 두 개 혹은 네 개를 사용하거나 탭 키(Tab)를 이용해 만들 수 있다.

탭 대신 스페이스를 이용했을 때의 장점 중 하나는 들여쓰기 정도를 좀 더 유연하게 변경할 수 있다는 점이다.

아래 예시처럼 인수 모두의 위치를 여는 괄호와 맞출 수 있다.

show(parameters,
     aligned, // 스페이스 다섯 개를 이용해 들여쓰기 함
     one,
     after,
     another
  ) {
  // ...
}

세로 들여쓰기

함수 하나에 논리 블록 여러 개가 들어갈 수 있다. 아래 예시에서 변수 선언, 반복문, 리턴문 사이에 세로 들여쓰기를 해주는 빈 줄을 넣어 코드를 분리해 보았다.

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

이렇게 여분의 줄을 넣어주면 코드의 가독성이 좋아진다. 읽기 쉬운 코드를 만들려면 세로 들여쓰기 없이 코드를 아홉 줄 이상 연속해서 쓰지 말자.

세미콜론

자바스크립트 엔진에 의해 무시되더라도 모든 구문의 끝엔 세미콜론을 써주는 것이 좋다.

자바스크립트에선 줄 바꿈이 세미콜론으로 해석되지 않는 몇몇 상황이 있기 때문에 세미콜론을 생략하고 코딩하는 습관을 들이면 에러를 발생시키는 코드를 만들 수 있습다.

경험이 많은 자바스크립트 개발자라면 StandardJS에서 제시하는 스타일 가이드처럼 세미콜론 없이 코드를 작성할 수도 있다. 초보 개발자라면 에러를 만들 확률을 줄이기 위해서라도 세미콜론을 사용하는 게 좋다.

자바스크립트 신생아 급이기 때문에 나는 무조건 세미콜론을 붙인다.

중첩 레벨

가능하면 너무 깊은 중첩문은 사용하지 않도록 해야 한다.

반복문을 사용할 때 중첩문의 깊이가 깊어지면 continue 지시자를 쓰는 게 좋은 대안이 될 수도 있다.

if문으로 조건을 처리하는 예시를 통해 이를 살펴보자.

for (let i = 0; i < 10; i++) {
  if (cond) {
    ... // <- 중첩 레벨이 하나 더 늘어났다.
  }
}

위 코드는 continue를 써서 아래와 같이 바꿀 수 있다.

for (let i = 0; i < 10; i++) {
  if (!cond) continue;
  ...  // <- 추가 중첩 레벨이 추가되지 않는다.
}

if/else와 return문을 조합하면 위 예시와 유사하게 중첩 레벨을 줄여 코드의 가독성을 높일 수 있다.

함수의 위치

‘헬퍼’ 함수 여러 개를 만들어 사용하고 있다면 아래와 같은 방법을 사용해 코드 구조를 정돈할 수 있다.

헬퍼 함수를 사용하는 코드 위에서 헬퍼 함수를 모아 선언하기

// 함수 선언
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

// 헬퍼 함수를 사용하는 코드
let elem = createElement();
setHandler(elem);
walkAround();

코드를 먼저, 함수는 그 다음에 선언하기

// 헬퍼 함수를 사용하는 코드
let elem = createElement();
setHandler(elem);
walkAround();

// --- 헬퍼 함수 ---
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}