12 ES10 Features in 12 simple examples

12 ES10 Features in 12 simple examples

This article introduces 12 the features provided by ES10 with easy code examples. In this way, you can quickly understand the new features without the need for a complex explanation.

ES10 is the version of ECMAScript corresponding to the year 2019. This version does not include as many new features as those that appeared in ES6 (2015). However, some useful features have been incorporated.

This article introduces the features provided by ES10 in easy code examples. In this way, you can quickly understand the new features without the need for a complex explanation.

Of course, it is necessary to have a basic knowledge of JavaScript to fully understand the best ones introduced.

The new #JavaScript features in ES2019 are:

➡️ Array#{flat,flatMap}

➡️ Object.fromEntries

➡️ String#{trimStart,trimEnd}

➡️ Symbol#description

➡️ try { } catch {} // optional binding

➡️ JSON ⊂ ECMAScript

➡️ well-formed JSON.stringify

➡️ stable Array#sort

➡️ revised Function#toString

➡️ BigInt primitive type (stage 3).

➡️ Dynamic import (stage 3).

➡️ Standardized globalThis object (stage 3).

--

Array.flat() && Array.flatMap

There are two new Array methods:

  • The Array.flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

  • The Array.flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is identical to a map() followed by a flat() of depth 1, but flatMap() is often quite useful, as merging both into one method is slightly more efficient

12 ES10 Features in 12 simple examples

Object.fromEntries()

Transform a list of key & value pairs into an object.

12 ES10 Features in 12 simple examples

String.protype.matchAll

The matchAll() method returns an iterator of all results matching a string against a regular expression, including capturing groups.

12 ES10 Features in 12 simple examples

String.trimStart() & String.trimEnd()

There are two new String methods to remove whitespace from a string:

  • The trimStart() method removes whitespace from the beginning of a string.

  • The trimEnd() method removes whitespace from the end of a string.

12 ES10 Features in 12 simple examples

Symbol.Description

There are a new Symbol description accessor, when you create a Symbol you can provide a string as a description, in ES10 there is an accessor to this property.

12 ES10 Features in 12 simple examples

Optional Catch Binding

In the past catch clause from a try/catch statement required a variable. Now it allows developers to use try/catch without creating an unused binding.

12 ES10 Features in 12 simple examples

JSON⊂ECMAScript

The unescaped line separator U+2028 and paragraph separator U+2029 characters are not accepted in pre-ES10 era.

  • U+2028 is the paragraph separator.

  • U+2029 is the line separator.

12 ES10 Features in 12 simple examples

Well-formed JSON.stringify()

JSON.stringify() may return characters between U+D800 and U+DFFF as values for which there are no equivalent UTF-8 characters. However, JSON format requires UTF-8 encoding. The proposed solution is to represent unpaired surrogate code points as JSON escape sequences rather than returning them as single UTF-16 code units.

12 ES10 Features in 12 simple examples

Stable Array.prototype.sort()

Previous implementation of V8 used an unstable quick sort algorithm for arrays containing more than 10 items.

A stable sorting algorithm is when two objects with equal keys appear in the same order in the sorted output as they appear in the unsorted input.

12 ES10 Features in 12 simple examples

New Function.toString()

The toString() method returns a string representing the source code of the function. In ES6 when toString was invoked on a function it would return string representation of that function depending on ECMAScript engine. When possible it would return the source code, otherwise - a standardized placeholder.

12 ES10 Features in 12 simple examples


BigInt — Arbitrary precision integers

BigInt is the 7th primitive type and It is an arbitrary-precision integer. The variables can now represent ²⁵³ numbers and not just max out at 9007199254740992.

12 ES10 Features in 12 simple examples

Dynamic import

Dynamic import() returns a promise for the module namespace object of the requested module. Therefore, imports can now be assigned to a variable using async/await.

12 ES10 Features in 12 simple examples

Standardized globalThis object

The global this was not standardized before ES10. In production code you would “standardize” it across multiple platforms on your own by writing this monstrosity:

12 ES10 Features in 12 simple examples

Conclusion

JavaScript is a live language, and that is something very healthy for web development. Since the appearance of ES6 in 2015 we are living a vibrant evolution in the language. In this post we have reviewed the features that arise in ES10 (2019) and introduced some that will be stable in ES11 (2020) since they are in state 3 and will probably end up being standardized for the next edition.

Although many of these features may not be essential for the development of your Web application, they are giving possibilities that could be achieved before with tricks or a lot of verbosity.

Originally published at www.carloscaballero.io.

javascript es6 web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.