51 JavaScript Features covered from ES12 to ES5 you might not know yet
Tags: javascript, beginners, codenewbie, webdev
Published: 2021-02-24 15:37:14


#### 51 techniques to optimize and clean your code

![](https://cdn-images-1.medium.com/max/900/0*3todmTrz_q5I8hQo.jpg)

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.

![](https://cdn-images-1.medium.com/max/900/0*0LWgrK4XT6R5xyNw)

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**

10. **BigInt:** _provides a way to represent numbers(whole) larger than 253–1_

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

12. **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._

13. **globalThis:** _contains the global_ **_this_** _value, which basically works as a global object._

14. **Promise.allSettled():** _returns a promise which basically contains the array of objects with the outcome of each promise._

15. **Optional Chaining:** _read the value with any connected objects or check methods and check if property existing or not._

16. **String.prototype.matchAll():** _returns an iterator of all results matching a string against the regex._

17. **Named Export:** _With this feature, we can have multiple named exports per file._

18. **Well defined for-in order:**

19. **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](https://medium.com/javascript-in-plain-english/22-utility-functions-to-ace-your-javascript-coding-interview-21ca676ad70 "https://medium.com/javascript-in-plain-english/22-utility-functions-to-ace-your-javascript-coding-interview-21ca676ad70")[](https://medium.com/javascript-in-plain-english/22-utility-functions-to-ace-your-javascript-coding-interview-21ca676ad70)

#### ES2019/ES10

20. **Array.flat():** _creates a new array by_ `_combining_` _the other arrays in the main array. Note: we can set the depth to combine arrays._

21. **Array.flatmap:** _creates a new array by applying_ `_callback_` _function to each element of the array._

22. **Object.fromEntries():** _transforms a list of key-value pairs into an_ `_object._`

23. **String.trimStart() & String.trimEnd():** _method removes whitespace from the beginning and end of a string._

24. **try…catch:** _statement marks a block of statements to try and if any error occurs catch will handle it._

25. **Function.toString():** _converts any method/code to_ `_string_`_._

26. **Symbol.prototype.description:** _returns optional description of_ `**_Symbol_**`  _objects._

#### ES2018/ES9

27. **Asynchronous Iteration:** _With the help of_ `**_async_**`  _and_ `**_await_**`  _now we can run the series of asynchronous iterations in the for a loop._

28. **Promise.finally():** _returns a promise when it is settled or rejected. It will help to avoid duplicating_ `**_then_**`  _and_ `**_catch_**`  _handlers._

29. **Rest/Spread Properties:** _for object_ `_destructuring_` _and arrays._

30. **Regular Expression Named Capture Groups:** _can group to be named using the notation_ `**_?<name>_**`_after the opening bracket._

31. **Regular Expression s (dotAll) Flag:** _matches any single character except carriage returns. The_ `_s_` _flag changes this behavior so line terminators are permitted_

32. **Regular Expression Unicode Property Escapes:** _can set the Unicode property escapes with Unicode_ `_u_` _flag set and_ `_\p{…}_` _and_ `_\p{…}_`

#### ES2017/ES8

33. **Object.entries():**_returns an array of a given objects_ `_key and value pairs_`_._

34. **Object.values():** _returns an array of given object’s property values._

35. **padStart():** _pads the current string with another string until the resulting string reaches the length._

36. **padEnd():** _pads the current string with the given string from the end of the current string._

37. **Object.getOwnPropertyDescriptors():** _returns all own property descriptors of a given object._

38. **Async functions:** _expand on Promises to make asynchronous calls._

#### ES2016/ES7

39. **Array.prototype.includes():** _determines whether an array includes a certain value among the given value. It returns true or false._

40. **Exponentiation:** _returns a result of raising the first operand to the power of the second operand._

#### ES2015/ES6

41. **Arrow function expressions:** _is alternative to traditional functional expression for some cases_

42. **Enhanced Object Literals:** _extended to support setting the object constructions._

43. **Classes:** _create class using_ `_class_` _keyword._

44. **Template Literals:** _can add parameters directly in the string using_ `_${param}_`

45. **Destructuring Assignment:** _helps to unpack values from arrays or properties from objects._

46. **Default + Rest + Spread:** _supports the default value, spread parameter or array as arguments._

47. **Let + Const:**

48. **Promises:** _used for async operations._

49. **Modules:**

50. **Map + Set + WeakMap + WeakSet:**

51. **Math + Number + String + Array + Object APIs:**

> [let’s checkout detail description with examples.](https://js.plainenglish.io/51-javascript-features-covered-from-es12-to-es5-you-might-not-know-yet-47ae27b46133)