51 JavaScript Features covered from ES12 to ES5 you might not know yet

51 techniques to optimize and clean your code

The future of JavaScript is going to be brilliant. Keeping up with the changes shouldn’t be harder than it already is, and my motive is to introduce all the JavaScript best practices such as shorthand and features which we must know as a frontend developer to make our life easier in 2021.

You might be doing JavaScript development for a long time but sometimes you might be not updated with the newest features which can solve your issues without doing or writing some extra codes. These techniques can help you to write clean and optimized JavaScript Code. Moreover, these topics can help you to prepare yourself for JavaScript interviews in 2021.

Here I am coming with a new series to cover all JavaScript features (with versions) that help you to write more clean and optimized JavaScript Code. This is a Cheat list for JavaScript Coding you must know in 2021.

Table of Contents

ES2021/ES12

1. replaceAll(): returns a new string with all matches of a pattern replaced by the new replacement word.
2. Promise.any(): It takes an iterable of Promise objects and as one promise fulfills, return a single promise with the value.
3. weakref: This object holds a weak reference to another object without preventing that object from getting garbage-collected.
4. FinalizationRegistry: Lets you request a callback when an object is garbage collected.
5. Private visibility modifier for methods and accessors: Private methods can be declared with #.
6. Logical Operators : && and || operators.
7. Numeric Separators: enables underscore as a separator in numeric literals to improve readability.
8. Intl.ListFormat : This object enables language-sensitive list formatting.
9. Intl.DateTimeFormat : This object enables language-sensitive date and time formatting.

ES2020/ES11

1. BigInt: provides a way to represent numbers(whole) larger than 253–1

2. Dynamic Import: Dynamic imports give the option to import JS files dynamically as modules. It will help you to get modules on demand.

3. Nullish coalescing Operator: returned the right-hand side value if the left-hand side is null or undefined. By default, it will return the left-side value.

4. globalThis: contains the global this value, which basically works as a global object.

5. Promise.allSettled(): returns a promise which basically contains the array of objects with the outcome of each promise.

6. Optional Chaining: read the value with any connected objects or check methods and check if property existing or not.

7. String.prototype.matchAll(): returns an iterator of all results matching a string against the regex.

8. Named Export: With this feature, we can have multiple named exports per file.

9. Well defined for-in order:

10. import.meta: object exposes context-specific metadata to a JS module

22 Utility Functions To Ace Your JavaScript Coding Interview

22 Utility Functions To Ace Your JavaScript Coding Interview

_JavaScript Coding Assessment Cheatsheet 2021_medium.com

ES2019/ES10

1. Array.flat(): creates a new array by _combining_ the other arrays in the main array. Note: we can set the depth to combine arrays.

2. Array.flatmap: creates a new array by applying _callback_ function to each element of the array.

3. Object.fromEntries(): transforms a list of key-value pairs into an _object._

4. String.trimStart() & String.trimEnd(): method removes whitespace from the beginning and end of a string.

5. try…catch: statement marks a block of statements to try and if any error occurs catch will handle it.

6. Function.toString(): converts any method/code to _string_.

7. Symbol.prototype.description: returns optional description of **_Symbol_** objects.

ES2018/ES9

1. Asynchronous Iteration: With the help of **_async_** and **_await_** now we can run the series of asynchronous iterations in the for a loop.

2. Promise.finally(): returns a promise when it is settled or rejected. It will help to avoid duplicating **_then_** and **_catch_** handlers.

3. Rest/Spread Properties: for object _destructuring_ and arrays.

4. Regular Expression Named Capture Groups: can group to be named using the notation **_?<name>_**after the opening bracket.

5. Regular Expression s (dotAll) Flag: matches any single character except carriage returns. The _s_ flag changes this behavior so line terminators are permitted

6. Regular Expression Unicode Property Escapes: can set the Unicode property escapes with Unicode _u_ flag set and _\p{…}_ and _\p{…}_

ES2017/ES8

1. Object.entries():returns an array of a given objects _key and value pairs_.

2. Object.values(): returns an array of given object’s property values.

3. padStart(): pads the current string with another string until the resulting string reaches the length.

4. padEnd(): pads the current string with the given string from the end of the current string.

5. Object.getOwnPropertyDescriptors(): returns all own property descriptors of a given object.

6. Async functions: expand on Promises to make asynchronous calls.

ES2016/ES7

1. Array.prototype.includes(): determines whether an array includes a certain value among the given value. It returns true or false.

2. Exponentiation: returns a result of raising the first operand to the power of the second operand.

ES2015/ES6

1. Arrow function expressions: is alternative to traditional functional expression for some cases

2. Enhanced Object Literals: extended to support setting the object constructions.

3. Classes: create class using _class_ keyword.

4. Template Literals: can add parameters directly in the string using _${param}_

5. Destructuring Assignment: helps to unpack values from arrays or properties from objects.

6. Default + Rest + Spread: supports the default value, spread parameter or array as arguments.

7. Let + Const:

8. Promises: used for async operations.

9. Modules:

10. Map + Set + WeakMap + WeakSet:

11. Math + Number + String + Array + Object APIs:

let’s checkout detail description with examples.