Javascript Trailing Commas (Sondaki Virgüller)

Mehmet Ozan Turhan
Nov 7 · 3 min read

Bu yazıda javascriptteki array, object ve functionların son elemanlarından sonra bırakılan virgüllerin kullanımının uygun olup olmadığını inceleyeceğiz.

Photo by Michael Weidner on Unsplash

Trailing Commas yada bir diğer adıyla Final Commas javascript koduna arraylar, objectler ve functionlar tanımlarken kullanışlı olmaktadır. Yani kullanımına izin verilmiştir. Biz bunlara sondaki virgüller diyeceğiz. Sondaki virgül derken ne kastedildiğini şu array üzerinden anlayabiliriz:

const arr = [1,2,3,]

Yukarıdaki örnekte, dizinin sonunda bulunan virgülden bahsediyoruz.

Bu virgül dizide, objede veya fonksiyonda boş bir yuva bırakıyormuş gibi düşünebiliriz.

Bu virgülü kullanmanın faydalarını araştırdığım kadarıyla şöyle sıralayabiliriz:

  • Tutarlılık, kopyala-yapıştır hatalarını önleme ve nitelikleri korumaya yardımcı olma.
  • Daha kolay bir şekilde daha fazla özellik ekleyebilme ve yeniden sıralayabilme.
  • Git üzerinden diffleri daha rahat okuma.

Difflere nasıl bir faydası olduğunu aşağıdaki örnekten inceleyebiliriz:

Virgül ile diff:

[
"foo": 5,
"bar": 6,
+ "apple": 7,
]

Virgülsüz diff:

[
"foo": 5,
- "bar": 6
+ "bar": 6,
+ "apple": 7
]

Arrays

Javascript sondaki virgülün kullanımına arraylarde en başından beri izin vermektedir. Ayrıca javascript sondaki virgülleri yok saymaktadır.

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

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

Şayet dizinin son elemanından sonra birden fazla virgül kullanılırsa, dizide boşluklar (hole) oluşturulmuş olur. Böyle bir dizi Array.prototype.forEach veya Array.prototype.map gibi bir fonksiyon ile döndürülürse boşluklar yok sayılır. Aşağıdaki console çıktılarını inceleyebiliriz:

Objects

Sondaki virgül objectte ECMAScript 5 ile beraber kullanılmaya başlanmıştır.

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

Functions

ECMAScript 2017 fonksiyonlarda sondaki virgülün kullanımına izin vermektedir.

Methodlarda ki kullanımı:

Functionları çağırıken ki kullanımı:

Aşağıdaki durumlara ise izin verilmemektedir:

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 ','

Desctructuring Assignent:

// array destructuring
[a, b,] = [1, 2];

// object destructuring
var o = {
p: 42,
q: true,
};
var {p, q,} = o;

Aşağıda ki kullanım desctructuring kullanımda hata verir:

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

JSON

Sondaki virgüllere JSON’da izin verilmemektedir.

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

Örnekler kaynaklarda bulunan developer.mozilla.org adresinden alınmıştır.

Kaynaklar

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade