ES7 + ES8 features — A walk through

We are going to discuss few of ES7 and ES8 features here:

Array.prototype.includes()

Array.prototype.includes is a bit like indexOf but instead returns a true or false value instead of the item's index:

['a', 'b', 'c'].includes('a') // true, not 0 like indexOf
['a', 'b', 'c'].includes('d') // false

Exponentiation

JavaScript has introduced a shorthand method of exponentiation:

// 2 to the power of 8
Math.pow(2, 8) // 256

// exponentiation
2 ** 8 // 256

Trailing Commas

There are cases when trailing comma would completely explode your JavaScript code in some browser. JavaScript now accommodates for the extra comma:

let myObj = { a:'A', b: 'B', } // No error!

let myArr = [1, 2,] // No error!

[1, 2,].length // 2
[1, 2, 3, , , ,].length // 6

Object.entries

Object.entries allows us to get an object's enumerable property pairs in array format ([key, value]):

//Object literal
Object.entries({ 'a': 'A', 'b': 'B' }); // [["a","A"],["b","B"]]

// String
Object.entries('hey') // [["0","h"],["1","e"],["2","y"]

Object.values

Object.keys returns an array of keys in an object where as Object.values returns an array of values:

// Object literal
Object.values({ 'a': A, 'b': B}) // [A, B]
// Array-like object (order not preserved)
Object.values({ a: 'A', b: 1, c: 'C' }) // [1, 'A', 'C']
// String
Object.values('hey') // ["h", "e", "y"]
// Array
Object.values([1, 2]) // [1, 2]

String.prototype.padStart/padEnd

padStart and padEnd allow us to pad a given string with any text of our choosing to ensure a string matches a given length:

// No text
''.padStart(10, 'Hi') // 'HiHiHiHiHi'
// Some text
'def'.padStart(6, 'abc') // 'abcdef'
// Only use what gets to length
'5678'.padStart(7, '1234') // '1235678'
'23'.padEnd(8, '0') // '23000000'

Async functions (async and await)

Promises we are using to handle asynchronous tasks. While promises were an improvement over callback hell, they still require lots of thens which can become messy. There come ES7async and await keywords for simplifying promise handling. async is a keyword for the function declaration await is used during the promise handling.await must be used within an async function. awaitasync functions return a promise, regardless of what the return value is within the functionasync/await and promises are essentially the same under the hood

// Before: callback hell!
fetch('/data.json')
.then(response => response.json())
.then(json => {
console.log(json);
})
.catch(e => { console.log('Err!',e); })

// After: no more callbacks!
async function getJson() {
try {
let response = await fetch('/data.json');
let json = await response.json();
console.log(json);
}
catch(e) {
console.log('Err!', e);
}
}

Object.getOwnPropertyDescriptors()

It returns all own (non-inherited) property descriptors of an object. The attributes of the return object can be: value, writable, get, set, configurable and enumerable.

const obj = {
name: 'Pablo',
get foo() { return 42; }
};
Object.getOwnPropertyDescriptors(obj);
//
// {
// "name": {
// "value": "Pablo",
// "writable":true,
// "enumerable":true,
// "configurable":true
// },
// "foo":{
// "enumerable":true,
// "configurable":true,
// "get": function foo()
// "set": undefined
// }
// }

A <>er

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store