JavaScript에서 후행 쉼표를 사용하고 있습니까?

JavaScript에서 매일 객체와 배열을 사용하고 있다고 가정합니다.

그리고 나는 또한 그것들의 대부분이 단일 라인이 아니라는 것을 확신합니다. 이러한 배열과 객체는 여러 라인으로 퍼져 있습니다.

내 질문은 다음과 같습니다.

Do you leave a trailing comma at the end of the last item before closing the object or array creation?

후행 쉼표를 사용하지 않는다면 그 이유는 무엇입니까?


후행 쉼표가 도움이 되는 이유부터 시작하겠습니다.

후행 쉼표를 유지하는 이유

False diff 카운트 없음

커밋 메시지는 항목을 추가하거나 제거할 때 정확히 같은 줄에 표시됩니다. 즉, 잘못된 diff 카운트가 없습니다 🤥

  const ACTIONS = {
    ADD_ITEM: 'ADD_ITEM',
-  UPDATE_ITEM: 'UPDATE_ITEM'
+  UPDATE_ITEM: 'UPDATE_ITEM',
+  DELETE_ITEM: 'DELETE_ITEM'
  }

여기에 +2-1의 diff 카운트가 있습니다.
또는

const ACTIONS = {
  ADD_ITEM: 'ADD_ITEM',
  UPDATE_ITEM: 'UPDATE_ITEM',
+ DELETE_ITEM: 'DELETE_ITEM',
}

그리고 여기에 +1의 diff 카운트가 있습니다.

Which one do you prefer to in the Pull/Merge Requests?

새로운 아이템은 항상 마지막에

여러 줄 변경을 피하기 위해 중간에 있는 대신 개체 또는 배열의 끝에 새 항목을 추가할 수 있습니다. 👻

위의 예를 고려할 때 편집 횟수를 1 Line으로 유지하려면 개체 중간에 새 항목을 추가해야 합니다.

const ACTIONS = {
    ADD_ITEM: 'ADD_ITEM',
+ DELETE_ITEM: 'DELETE_ITEM',
  UPDATE_ITEM: 'UPDATE_ITEM'
}

또는 후행 쉼표를 사용하고 항상 개체 끝에 새 항목을 추가할 수 있습니다.

const ACTIONS = {
  ADD_ITEM: 'ADD_ITEM',
  UPDATE_ITEM: 'UPDATE_ITEM',
+ DELETE_ITEM: 'DELETE_ITEM',
}

생산 중단에 대한 두려움 없음

트랜스파일러와 번들러는 후행 쉼표를 생략하고 프로덕션을 중단하지 않습니다 😉

최신 브라우저는 ES5 표준의 일부이므로 후행 쉼표에 대해 불평하지 않습니다.

그러나 이전 브라우저는 IE9 이전에 불평할 수 있습니다.

그런 오래된 브라우저를 찾는 것은 좋은 탐험이지만. 우리는 번들러가 프로덕션 번들에서 후행 쉼표를 생략하여 안전하게 배송할 수 있도록 할 수 있습니다.

그 오래된 브라우저의 경우 후행 쉼표가 가장 작은 문제입니다. 대형 JS 앱을 구문 분석하고 실행할 수 있는 구형 브라우저의 기능도 의심스럽기 때문입니다.

JavaScript 소스 코드에서 후행 쉼표를 활성화하려면 babel 구성에서 babel-plugin-syntax-trailing-function-commas을 사용하십시오.

다음과 함께 Prettier , you can configure 을 사용하는 경우:

trailingComma .prettierrc

--trailing-comma 만약 using Prettier via CLI

가능한 값은 다음과 같습니다.

es5 배열 및 개체에만 해당

none 아무데도, 후행 쉼표 없음

가능한 모든 곳에서

및 all; 배열, 객체, 함수 매개변수 등

편견

뭔가 빠진 것 같다

나는 이 주장을 여러 번 들었다. 뒤에 쉼표가 있으면 무언가가 누락되었거나 잘못된 것처럼 느껴집니다.

You will get used to it.

We have got used to writing HTML in JS, trailing comma is a very small thing in front of it.

왜 쓸데없이 캐릭터를 추가해야 합니까?

이 쉼표는 실행에 유용하지 않은 추가 문자입니다.

We write code in Clean way for other developers to understand.

Machines can understand comma or no-comma in the same way. Then why not help the other developers in reviewing the code.

참고문헌

javascript - Are trailing commas in arrays and objects part of the spec? - Stack Overflow

결론

후행 쉼표의 이점은 적지만 매우 좋습니다.

후행 쉼표에 대해 어떻게 생각하십니까?

댓글 💬 또는 Twitter 및/또는

이 기사가 도움이 되었다면 다른 사람들과 공유해 주세요 🗣

블로그를 구독하면 받은 편지함으로 바로 새 게시물을 받을 수 있습니다.


2020년 9월 1일 https://time2hack.com에 원래 게시되었습니다.