banner 728x90

Six Tiny But Awesome ES7 + ES8 Features

In Mobile Web Development 28 views
banner 728x90

The development of new features for the JavaScript core language has really improved over the past five years, thanks in part to JavaScript frameworks that pushed the boundaries and demonstrated how important data 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 look at some of the "small" functionality that ES7 and ES8 have brought us!

String.prototype.padStart / padEnd

padStart and padEnd enable us to fill a given string with a text of your choice to ensure that a string corresponds to a given length:

// padStart (desiredLength, textToPrepend)

// No text
& # 39; & # 39; .padStart (10, & # 39; Hi & # 39;) // & # 39; HiHiHiHiHi & # 39;

// A little text
& # 39; def & # 39; .padStart (6, & # 39; abc & # 39;) // & # 39; abcdef & # 39;

// Use only what takes too long
& # 39; 5678 & # 39; .padStart (7, & # 39; 1234 & # 39;) // & # 39; 1235678 & # 39;

// padEnd (desiredLength, textToAppend)

& # 39; 23 & # 39; .padEnd (8, & # 39; 0 & # 39;) // & # 39; 23000000 & # 39;

One use of pathStart may include the addition of an area code to the telephone number if the user input is not the correct length. padEnd can be used for decimal precision.

Object.entries

Object.entries allows us to get the enumerable properties of an object in matrix division ([key, value]):

// Object literally
Object.entries (); // [["a","A"] ["b","B"]]

// Wire
Object.entries (& # 39; david & # 39;) // [["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 extremely useful to me, so I was also excited to see Object.values ​​ introduced:

// Object literally
Object.values ​​() // [23, 19]

// Array-like object (order not saved)
Object.values ​​() // [1, 'yes', 'eighty']

// Wire
Object.values ​​(& # 39; davidwalsh & # 39;) // ["d", "a", "v", "i", "d", "w", "a", "l", "s", "h"]

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

Object values ​​ gives value input to object-letter words, matrices, series, etc.

Array.prototype.includes

Array.prototype.includes is a bit like index Of but instead returns a true or false value instead of the item index

['a', 'b', 'c'] .includes (& # 39; a & # 39;) // true, not 0 like indexOf would give
['a', 'b', 'c'] .includes (& # 39; d & # 39;) // false

index Of has been used over the years to detect the presence of items in an array, but the `0` index can lead to false negatives if it is not correctly encoded. I'm happy that JavaScript has added a function that exactly returns what we need: a positive or a negative answer!

Power elevation

JavaScript has introduced a shorthand method for exponentiation:

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

// ..is becoming
2 ** 8 // 256

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

Trailing Commas

I am old enough to remember the days when a lagging point would completely explode your JavaScript code in Internet Explorer 6. JavaScript now provides space for the extra comma:

let myObj =  // No mistake!

leave 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-dangling rule that you can use to ensure that your use of comma-dangle is consistent.

Bonus: async / waiting for

Of course async and waiting for the new method for handling asynchronous tasks, is not a "small" addition, but it is certainly great! Read my async and wait for a guide to transform your callback hell into a more elegant approach to asynchronous code from top to bottom!

With every iteration of JavaScript we solve problems we had with a lack of functionality or corrupted use of other functions. What is your favorite recent addition to JavaScript?


banner 728x90
author
Author: 
    Script & Style Show: Episode 1: Marc Grabanski
    Script & Style Show: Episode 1: Marc Grabanski
    During this second episode of the Script
    AWS AppSync region expansion and new functions for API keys
    AWS AppSync region expansion and new functions for API keys
    AWS AppSync, a managed GraphQL service with
    What is the best time to involve your mobile app users?
    What is the best time to involve your mobile app users?
    When talking to customers about mobile analysis,
    How to make a Twitter bot with Node.js
    How to make a Twitter bot with Node.js
    Twitter bots have been in the news

    Leave a reply "Six Tiny But Awesome ES7 + ES8 Features"

    Must read×

    Top