Six Tiny But Awesome ES7 + ES8 Features

Development of new features for the core JavaScript language has really improved over the last five years, thanks in part to JavaScript frameworks pushing the limits and proving how important given functionality can be.  My previous ES6 posts, Six Tiny But Awesome ES6 Features and Six More Tiny But Awesome ES6 Features, highlighted a dozen excellent features that were added to JavaScript to make our lives easier -- and they certainly do.  Let's have a look at some of the "small" functionality that ES7 and ES8 brought us!

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:

// padStart(desiredLength, textToPrepend)

// No text
''.padStart(10, 'Hi') // 'HiHiHiHiHi'

// Some text
'def'.padStart(6, 'abc') // 'abcdef'

// Only use what gets to length
'5678'.padStart(7, '1234') // '1235678'

// padEnd(desiredLength, textToAppend)

'23'.padEnd(8, '0') // '23000000'

One usage of padStart could include prepending an area code to phone number if the user input isn't the correct length.  padEnd could be used for decimal precision.

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('david') // [["0","d"],["1","a"],["2","v"],["3","i"],["4","d"]]

Object.entries follows the same order as for...in would.

Object.values

Object.keys has been immensely useful for me so I was also excited to see Object.values introduced:

// Object literal
Object.values({ 'a': 23, 'b': 19 }) // [23, 19]

// Array-like object (order not preserved)
Object.values({ 80: 'eighty', 0: 1, 1: 'yes' }) // [1, 'yes', 'eighty']

// String
Object.values('davidwalsh') // ["d", "a", "v", "i", "d", "w", "a", "l", "s", "h"]

// Array
Object.values([1, 2, 3]) // [1, 2, 3]

Object.values provides value entries in object literals, arrays, strings, etc.

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 would give
['a', 'b', 'c'].includes('d') // false

indexOf has been used over the years to detect item presence in array, but the `0` index can lead to false negatives if not coded properly.  I'm glad JavaScript has added a function that returns exactly what we need: a positive or negative answer!

Exponentiation

JavaScript has introduced a shorthand method of exponentiation:

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

// ..becomes
2 ** 8 // 256

This new syntax accomplishes the same as  Math.pow with less code!

Trailing Commas

I'm old enough to remember the days where a trailing comma would completely explode your JavaScript code in Internet Explorer 6.  JavaScript now accommodates for the extra comma:

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

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

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

The case of the Array length is one to keep in mind.  ESLint has a comma-dangle rule you can use to ensure your comma dangle usage is consistent.

Bonus:  async / await

Obviously async and await, the new method of handling async tasks, is no "tiny" addition, but it certainly is awesome!  Read my async and await guide to transform your callback hell into a more elegant, top-down approach to async code!

With every iteration of JavaScript we're solving problems that we'd been having with lack of functionality or bastardized usage of other functions.  What's your favorite recent addition to JavaScript?