[JavaScript] Trailing Comma 번역자료

 프론트 개발을 하면서 웹 상에 돌아다니는 코드를 보면 배열의 마지막에 쉼표를 찍는 경우를 종종 봤었는데 왜 이걸 쓰는지 이유는 모르고 그냥 넘어갔던 것 같다. 의외로 큰 뜻이 있으면 어떡하나 싶어서 찾아봤는데, 그다지 중요한 문제는 아닌 것 같다... 이 글은 MDN에 있는 Trailing Commas를 번역한 자료이다.

Trailing commas

Trailing comma(후행 쉼표)는 새로운 배열 요소, 파라메터, 프로퍼티를 자바스크립트 코드에 추가할 때 유용하다. 만약 새 프로퍼티를 더하고 싶고, 마지막 줄에 쉼표가 있다면 이전의 마지막 줄을 수정하지 않고 새로운 라인을 간단하게 추가할 수 있다. 이것은 버전관리 도구에서의 비교를 명확하게 하고, 코드 편집을 덜 귀찮게 할 것이다.

자바스크립트는 태어날 때부터 리터럴의 후행 쉼표를 허용해줬다. 그리고 ECMAScript 5에서는 객체 리터럴, ECMAScript 2017에서는 함수 파라메터에 후행 쉼표를 추가하는 것이 허용됐다.

그러나 JSON은 후행 쉼표를 허용하지 않는다.

배열, 객체 리터럴의 후행 쉼표

배열

자바스크립트는 배열의 후행 쉼표를 무시한다.

var arr = [
    1,
    2,
    3,
];

arr; // [1, 2, 3]
arr.length; // 3

만약 후행 쉼표가 한 개이상 사용되면 배열에 구멍이 생긴다. 구멍이 있는 배열은 희소(sparse) 하다고 불린다. 조밀한(dense) 배열은 구멍이 없다. Array.prototype.forEach( ) 혹은 Array.prototype.map( )으로 배열을 순회할 때는 배열의 구멍을 건너뛴다.

객체

ECMAScript 5부터는 객체 리터럴에도 후행 쉼표가 유효하다.

var object = {
    foo: "bar",
    baz: "qwerty",
    age: 42,
}; 

함수의 후행 쉼표

ECMAScript 2017은 함수 파라메터 목록에 후행 쉼표를 허용한다.

파라메터 정의

다음의 함수 정의 쌍들은 유효하며 서로 같은 의미다. 후행 쉼표는 함수 정의의 length 프로퍼티 혹은 arguments 객체에 영향을 주지 않는다.

function f(p) {}
function f(p, ) {}

(p) => {};
(p, ) => {};

후행 쉼표는 클래스나 객체의 메서드 정의에도 동작한다.

class C {
    one(a,) {},
    two(a, b,) {},
}

var obj = {
    one(a,) {},
    two(a, b,) {},
};

함수 호출

다음의 함수 호출 쌍들은 유효하며 서로 같은 의미다.

f(p);
f(p, );

Math.max(10, 20);
Math.max(10, 20,);

유효하지 않은 후행 쉼표

함수 파라메터 정의나 함수 호출이 쉼표만을 포함한다면 SyntaxError가 발생한다. 그리고 나머지 매개변수(rest parameter)를 사용할 때 마지막 쉼표는 허용되지 않는다.

function f(,) {} // SyntaxError: missing formal parameter
(,) => {};       // SyntaxError: expected expression, got ','
f(,)             // SyntaxError: expected expression, got ','

function f(...p,) {} // SyntaxError: parameter after rest parameter
(...p,) => {}        // SyntaxError: expected closing parenthesis, got ','

비구조화(destructuring)에서 후행 쉼표

비구조화 할당을 사용할 때는 후행 쉼표가 왼편에서만 허용된다.

// 후행 쉼표로 배열 비구조화
[a, b,] = [1, 2];

// 후행 쉼표로 객체 비구조화
var o = {
    p: 42,
    q: true,
};

var {p, q,} = o;

나머지 요소(rest element)를 사용할 때는 SyntaxError가 발생한다.

var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

JSON에서 후행 쉼표

객체의 후행 쉼표는 ECMAScript 5에서 소개됐다. JSON은 ES5 이전의 자바스크립트 문법을 기반으로 하기 때문에, JSON에서는 후행 쉼표가 허용되지 않는다.

두 라인은 모두 SyntaxError가 발생한다.

JSON.parse('[1, 2, 3, 4, ]');
JSON.parse('{"foo" : 1, }');
// SyntaxError JSON.parse: unexpected character
// at line 1 column 14 of the JSON data

JSON을 정확하게 파싱하기 위해 후행 쉼표를 생략해라.

JSON.parse('[1, 2, 3, 4 ]');
JSON.parse('{"foo" : 1 }');