In this post, I am going to give you a briefing on some of the cool new features that have been added to the latest ES10/ES2019 standards.
It’s 2019, and there are some brand new features in the latest **JavaScript **standards. **JavaScript **has come a long way over the years, becoming the most popular language in the world.
Let’s take a look at the new features that were approved by the **TC39 **committee this year.
Array.prototype.flat()
The new addition to the **array ****prototype **is the ***flat() ***function. This creates a new **array **and flattens the nested **array **by the given depth. Let’s take a look at a sample on how it works.
const users = [["Adam", 1"], ["Jones", "2"], ["John", "3"]]; const flatUsers = users.flat(); console.log(flatUsers); // ["Adam", "1", "Jones", "2", "John", "3"];
By default, the flattening value is 1. By passing Infinity as a parameter inside the flat() it will run infinite times recursively and flattens the **array **into one single array. This is a very useful addition to the Array prototype. Instead of looking for other libraries, we can now just use the flat() method from the Array.Prototype directly to flatten a nested array.
Array.prototype.flatMap()
Here is another thing you can do with arrays in ES2019. This method is a combination of the ***flat ***and map methods. It allows you to map through an array of items and flatten the result in one pass. It is the same as using a ***map ***function followed by a flat with a depth of 1. Combining them together into its own single method is quite useful.
let myArray = [1,2,3,4] myArray.flatMap(x => [x, x+2]) console.log(myArray) //[1, 3, 2, 4, 3, 5, 4, 6]
Notice here that the result is an one dimensional array.
String.prototype.trimStart() or trimEnd()
Before **ES2019 **we already had the trim() function. It removes blank spaces in a string. Now the new addition is the ***trimStart() ***and the trimEnd() functions, that help you choose which part of the string needs to be trimmed. This is a very cool addition for string manipulation operations.
const mySample = " Hey There "; console.log(mySample.trimStart()); // "Hey There "; console.log(mySample.trimEnd()); // " Hey There";
Object.fromEntries()
The ***fromEntries() ***method, will transform a list of key-value pairs into an object. The ***Object.entries() ***function, that we already have converts an object, into key-value pairs. Now the ***Object.fromEntries() ***does the exact reverse. Let’s take a look at an example with a user-id pair.
const user = [ ["1", "Adam"], ["2", "Jones"], ["3", "John"], ["4", "Smith"] ]; const userObject = Object.fromEntries(user); console.log(userObject); // { // "1": "Adam", // "2": "Jones", // "3": "John", // "4": "Smith" // };
Catch Error Binding is Optional
I personally like this addition. But it is a controversial one since alot of developers don’t think this is a good idea. Nevertheless, in ES2019 the ***catch ***error binding is optional.
Before ES2019 the error parameter in the catch was required.
try { throw "Some error"; } catch (error) { // Error handling logic }
In ES2019 you can omit the error parameter if you don’t need it.
try { throw "Some error"; } catch { // Some handling logic }
Stable Array.prototype.sort()
The previous implementation of ***sort() ***method for the array prototype, used the quick sort algorithm. This was an unstable solution.
With ES2019, a stable sorting algorithm has been implemented.
let users = [ { name: "Adam", rank: 4, }, { name: "Jones", rank: 3, }, { name: "Katie", rank: 3, }, { name: "Smith", rank: 2, }, { name: "Ben", rank: 2, }, { name: "Julie", rank: 1, }, { name: "Tyler", rank: 1, } ]; let my_sort = (a, b) => a.rank - b.rank; // Perform stable ES2019 sort: let sorted = users.sort(my_sort); console.log(sorted); //[ // { name: "Adam", rank: 4 }, // { name: "Jones", rank: 3 }, // { name: "Katie", rank: 3 }, // { name: "Ben", rank: 2 }, // { name: "Smith", rank: 2 }, // { name: "Julie", rank: 1 }, // { name: "Tyler", rank: 1 } //]
Keep in mind that some of the features are still in the proposal stages and will be released only mid 2019. But it is good to know what is coming. If you are interested to learn more about all the new features in ES2019 proposal, checkout https://github.com/tc39
#javascript #web-development
