ES5-8 & Polyfilling & Transpilling

ES7

includes() method

• Array.prototype.includes(target) determines whether an array includes a certain element, returning True or False as appropriate.
• String.prototype.includes(targetString) determines whether one string may be found within another string, returning True or False as appropriate.

Exponential operator **

x**y produces the same result as Math.pow(x,y)

ES8

String padding

padStart(targetLength, targetString/optional) and padEnd(targetLength, targetString) pads the current string with another string (multiple times, if needed) until the resulting string reaches the given length. The padding is applied from the start (left) or the end (right) of the current string. If the argument targetString is missing, it will pad ' ' as default.

Trailing comma in function

Trailing commas (sometimes called "final commas") can be useful when adding new elements, parameters, or properties to JavaScript code. If you want to add a new property, you can simply add a new line without modifying the previously last line if that line already uses a trailing comma. This makes version-control diffs cleaner and editing code might be less troublesome.

ECMAScript 2017 (ES8) allows trailing commas in function parameter lists. The functions with final commas in the argument list are equivalent to those without them.

var add = (num1, num2,) => num1 + num2;
add(1,2,) //3

//The trailing comma also works with method definitions for classes or objects:
class C {
  one(a,) {},
  two(a, b,) {},
}

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

//Function parameter definitions or function invocations only containing a comma will throw a SyntaxError. Furthermore, when using a rest parameters, trailing commas are not allowed:
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 ','

Trailling comma in literals, destructuring and Json

// Arrays
var arr = [
  1, 
  2, 
  3, 
];
//If more than one trailing comma is used, an elision (or hole) is produced. An array with holes is called sparse (a dense array has no holes). When iterating arrays for example with Array.prototype.forEach() or Array.prototype.map(), array holes are skipped.
var arr = [1, 2, 3,,,];
arr.length; // 5

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

// Destructuring
// array destructuring with trailing comma
[a, b,] = [1, 2];
// object destructuring with trailing comma
var o = {
  p: 42, 
  q: true,
};
var {p, q,} = o;
// Again, when using a rest element, a SyntaxError will be thrown:
var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

//Trailing commas in objects were only introduced in ECMAScript 5. As JSON is based on JavaScript's syntax prior to ES5, trailing commas are not allowed in JSON.

Object.values() and Object.entries()

The Object.values(object) method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));
// >> Array ["somestring", 42, false]

// Use previous method 'object.key()':
Object.key(object1).forEach(key => {
    console.log(object1[key])
    })
// The Object.keys() method returns an array of a given object's own property names, in the same order as we get with a normal loop.

The Object.entries(object) method returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

var users = {
    username1: 'Camelia',
    username2: 'Elio',
    username3: 'Olivier'
    };
// [["username1", "Camelia"],["username2", "Elio"]["username3","Olivier"]]
    
Object.entries(users).map(entry => 
    [entry[1], entry[0].replace('username', '')])
// [["Camelia", "1"], ["Elio", "2"], ["Olivier", "3"]]

Async await

We cover these topics in an upcoming video in this section titled How Javascript Works as well as in the HTTP + AJAX + JSON + Asynchronous Javascript section.

Polyfilling & Transpilling

Polyfilling and transpilling are two technologies that allow bringing newer JS to older features.

Polyfilling

It refers to producing pieces of code equivalent to some new features, but able to run in older JS environment.
⚠️However, not all new features can be fully polyfilled. It's better to use vetted set of polyfills such as those provided by ES5-Shime and ES6-Shim,

Transpilling

Newly added syntax cannot be polyfilled, they will throw an error in older JS engine as unrecognized/valid. The better solution is transpilling(transfoming+compiling), which converts the newer code to older code equivalents.