[JS] Trailing Commas에 대한 고찰 (feat.ESLint)

eslint의 여러 설정들을 살펴보는 도중 comma-dangle이라는 옵션이 궁금해져서 구글링을 조금 해보게 되었다. 그러다가 medium에 올라온 한 게시글과 댓글들을 보고 재미있는 주제라고 생각이 되어서 이에 대한 내 생각을 글로 작성하게 되었다.

Trailing-commas

Trailing-commas 또는 Final-commas는 배열, 오브젝트 프로퍼티 등 콤마를 이용한 항목의 나열에서 마지막 항목에도 콤마를 붙이는 코딩 방식을 말한다(우리나라 말로는 후행 콤마? 정도로 부르는 것 같다).

자바스크립트에서는 이후에 더이상 요소가 존재하지 않아도 실행할 때 오류가 발생하지 않기 때문에 가능한 코딩 방식이다.

MDN에 자세한 설명이 나와있다.

// array에서의 trailing-commas
const cities = [
  "Seoul",
  "Busan", //<-
];

// object에서의 trailing-commas
const person = {
  name: "Kim",
  age: 27, // <-
};

// 매개변수의 trailing-commas(Typescript)
class Foo {
  constructor(
    private property1,
    private property2,
    public property3, // <-
  ) {}
};

장점

git과 같은 버전관리 시스템을 사용할 때, vs code의 extension이나 github 웹페이지 상에서 코드를 이전 커밋과 비교하는 경우가 있다.

배열에 항목이 추가되는 경우, trailing-commas를 사용하지 않은 코드라면 2줄의 코드에 변화가 있을 것이고, trailing-commas를 사용한다면 한줄의 코드 변화만 있을 것이다.

차이점을 한 번 확인해보자.

항목 추가

항목 추가 - trailing-commas

항목이 제거되는 경우에도 차이점을 확인할 수 있다.

항목 제거

항목 제거 - trailing-commas

추가된 부분, 사라진 부분만 간단하게 확인할 수 있기 때문에 코드를 리뷰하는 입장에서 훨씬 편하게 볼 수 있다(고 적어도 나는 생각한다).

그리고 코드를 수정하는 입장에서도 trailing-commas가 없을때는 한 줄을 추가할 때,

1. 이전 줄의 마지막에 콤마를 붙이고
2. 원하는 코드를 추가

하는 것보다는 단순히 원하는 줄만 추가하는것이 가능하다.

코드를 제거할 때는

1. 원하는 코드를 제거
2. 이전 줄의 마지막에 콤마를 제거

하는 것보다 간단하게 원하는 줄만 제거를 할 수가 있다.

eslint 에서의 사용법

서두에 말한대로 eslint의 comma-dangling이라는 속성으로 해당 기능을 활성화 할 수가 있고, 다음 네 가지 옵션 중 하나를 사용할 수 있다.

• "never": comma-dangling을 사용하지 않음
• "always": 항상 comma-dangling을 사용함 (한 줄의 코드에 배열 항목이 나열되어있어도. e.g. const num = [1, 2, 3,])
• "always-multiline": 오브젝트의 }나 배열의 ]가 배열의 항목과 다른 줄에 있는 코드의 경우 무조건
• "only-multiline": 오브젝트의 }나 배열의 ]가 배열의 항목과 다른 줄에 있는 코드의 경우 허용

개인적으로는 always-multiline 옵션을 적용하는 편이다.

반대의견?

원본 게시글의 댓글에서 치열한 찬반 논쟁이 펼쳐지고 있다. trailing-commas를 반대사람들의 입장은 대부분은 코드가 보기 안좋다(?)라는 입장이다.(명확히 어떠해서 사용하지 않는다라는 의견은 없는 것 같다)

제일 논리적이었던 의견 중 하나는 trailing-commas를 사용하면 어떤 항목이 배열의 마지막 항목이라는 것을 코드상에서 또는 코드 변화에서 알 수가 없다는 의견이었다. 혹은 어떤 언어에서는 이것이 컴파일 오류를 일으키기 때문에 사용하지 않는다는 의견도 있었다.

(혹시 Trailing comma 대해서 반대하는 의견이 있으시면 자유롭게 공유해주세요)

번외

선행 콤마?

원본 글의 댓글을 확인하다가 다음과 같은 코드를 제시하는 사람도 있었다.

const cities = [
  "Seoul"
  , "Busan"
  , "Incheon"
];

Heading commas?라고 불러야 할지... 정확한 명칭은 모르겠지만 앞서 언급했던 Trailing-commas의 장점을 모두 가지는 색다른 코딩 방식이다. eslint에서 comma-style: ["warn", "first"] 옵션을 이용해서 사용할 수 있다(eslint 공식문서).

요소를 추가할 때 마지막에 콤마를 다는 습관을 버리고, 콤마를 먼저 다는 습관이 되어있다면 이것 또한 괜찮은 코딩 스타일인 것 같다.

조건문 논리 연산자

Trailing commas와 비슷한 이유로 if 문에 여러개의 논리 연산자가 들어가는 경우는 다음과 같이 작성하는 편을 선호한다.(이 방식은 선행 콤마와 비슷하다)

if (
  condition1
  && condition2
  && condition3
) {
  // ...
}

해당 옵션은 eslint의 operator-linebreak: ["warn", "before"] 옵션을 통해 사용할 수 있다(eslint 공식문서).

Conclusion

처음에는 trailing-commas가 보기 불편하고, 배열이나 오브젝트 프로퍼티의 마지막을 나타내지 못한다는 생각에 거부감이 있었다. 그런데 eslint에서 해당 옵션을 활성화 시킨 뒤로는 딱히 trailing-commas를 사용하지 않을 이유를 찾지는 못하고 있다.

협업시에 코드 컨벤션을 정하는 시기에 팀원들 간에 의견만 통일된다면 한번 사용해보고 판단해보는 것도 나쁘지 않을 것이다.

References

• https://medium.com/@nikgraf/why-you-should-enforce-dangling-commas-for-multiline-statements-d034c98e36f8