EcmaScript 2017 .getOwnProperty and trailing commas

Continuing the series of our articles, - "EcmaScript 2017. Object.values/Object.entries" and "EcmaScript 2017. String padding", about EsmaScript 8 and its latest novelties, here we want to go through such features as: Object.getOwnPropertyDescriptors by Jordan Harband and Andrea Giammarchi, and trailing commas in function parameter lists and calls by Jeff Morrison.

Object.getOwnPropertyDescriptors

All of the own properties descriptors of the given object are being returned by the getOwnPropertyDescriptors method. It provides an opportunity to examine the precise description of all own properties of an object. A string-valued name and a property descriptor comprise a property in JavaScript.

So, long story short, this function is about retrieving in one single operation all possible own descriptors of a generic object. To simplify some common boilerplate and be consistent with the fact that there is a singular version of the method is the main goal.

obj is the object for which to get all own property descriptors. It's the source object.

An object containing all own property descriptors of an object is the return value. If there are no properties it might be an empty object.

Defined directly on the object an own property descriptor is not inherited from the object's prototype.

Syntax of the function is:

Object.getOwnPropertyDescriptors(obj)

Attributes of a property descriptor:

value is the value associated with the property (data descriptors only).

writable - true if and only if the value associated with the property may be changed (data descriptors only).

get is a function which serves as a getter for the property, or undefined if there is no getter (accessor descriptors only).

set is a function which serves as a setter for the property, or undefined if there is no setter (accessor descriptors only).

configurable - true if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.

enumerable - true if and only if this property shows up during enumeration of the properties on the corresponding object.

Example:

const obj = { 
  get es7() { return 777; },
  get es8() { return 888; }
};
Object.getOwnPropertyDescriptors(obj);
// {
//   es7: {
//     configurable: true,
//     enumerable: true,
//     get: function es7(){}, //the getter function
//     set: undefined
//   },
//   es8: {
//     configurable: true,
//     enumerable: true,
//     get: function es8(){}, //the getter function
//     set: undefined
//   }
// }

Browser support (MDN) for Object.getOwnPropertyDescriptors:

Chrome -	54
Firefox (Gecko) -	50 (50)
Edge -	(Yes)
Internet Explorer -	?
Opera -	41
Safari -	10

Trailing commas in function parameter lists and calls

When you're adding new elements, parameters, or properties to JavaScript code, trailing commas can be very useful. It's sometimes called "final commas". You can simply add a new line, when adding a new property, without modifying the previously ending line if it already uses a trailing comma. As a result the editing code might be less tricky and version-control diffs cleaner.

Trailing commas has been allowed by JavaScript in array literals since the beginning. Later they were added to object literals in ECMAScript 5 and only most recently to function parameters in ES 8.

Example of trailing commas in object literals:

let obj = {
    first: 'Jane',
    last: 'Doe',
};

and in Array literals:

let arr = [
    'red',
    'green',
    'blue',
];
console.log(arr.length); // 3

So, the ability of the compiler not to raise an error (SyntaxError) when unnecessary comma was added in the end of the list is called trailing commas in function parameter.

function es8(var1, var2, var3,) {
  // ...
}

This can be applied on function's calls:

es8(10, 20, 30,);

The benefits of this function are that, first of all, it's simpler to rearrange items, because there's no need to add and remove commas if the last item changes its position, and, second of all, it helps version control systems with tracking what actually changed.

For example, going from:

[
    'foo'
]

to:

[
    'foo',
    'bar'
]

leads to both the lines with 'foo' and with 'bar' are being marked as changed, even though the only real change is the addition of the last line.

So, this feature was inspired from the trailing of commas in object literals and Array literals [10, 20, 30,] and {x: 1,}.

Wrapping up

In this article we've reviewed another two of the new features of EcmaScript 8 – Object.getOwnPropertyDescriptors and trailing commas in function parameter lists and calls. We sincerely hope that the publication was useful for you and if so, please, follow us for the next thing coming.