51 JavaScript Features Covered from ES12 to ES5 You Might Not Know Yet

51 JavaScript Features Covered from ES12 to ES5 You Might Not Know Yet. ES2021/ES12: replaceAll(); Promise.any(); weakref; FinalizationRegistry; Private visibility modifier for methods and accessors; Logical Operators; Numeric Separators; Intl.ListFormat; Intl.DateTimeFormat. ES2020/ES11: BigInt; Dynamic Import; Nullish coalescing Operator; globalThis; Promise.allSettled(); Optional Chaining; String.prototype.matchAll(); Named Export; Well defined for-in order; import.meta. ES2019/ES10: Array.flat(); Array.flatmap; Object.fromEntries(); String.trimStart() & String.trimEnd(); try…catch; Function.toString(); Symbol.prototype.description. ES2018/ES9: Asynchronous Iteration; Promise.finally(); Rest/Spread Properties; Regular Expression Named Capture Group; Regular Expression s (dotAll) Flag; Regular Expression Unicode Property Escapes. ES2017/ES8: Object.entries(); Object.values(); padStart(); padEnd(); Object.getOwnPropertyDescriptors(); Async functions. ES2016/ES7: Array.prototype.includes(); Exponentiation. ES2015/ES6: Arrow function expressions; Enhanced Object Literals; Classes; Template Literals; Destructuring Assignment; Default + Rest + Spread; Let + Const; Promises; Modules; Map + Set + WeakMap + WeakSet; Math + Number + String + Array + Object APIs

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

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

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.

web-development react javascript programming developer

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Modern JavaScript for React Developers. Learn the basics of JavaScript for React. We'll start building the markup and rendering logic of our Flash Card application first in JavaScript so that we can lay down the foundations for the upcoming React training.

Learn React and JavaScript Programming Basics with Example Code. How does modern JavaScript knowledge make you an efficient React developer? What kind of changes do you need in your mindset when you design and develop a React application? How to Use Let and Const in JavaScript. How to Use Template Literals in JavaScript. How to Import and Export Modules in JavaScript. How to Use Arrow Functions in JavaScript. How Destructuring Works in JavaScript. How the Spread Operator and Rest Parameter Work in JavaScript. How to Use Classes in JavaScript

Look at three different React code examples from a beginner, intermediate, and advanced web developer. How senior developers think. How to use React state properly. How to use React useEffect properly. What to think about when programming. The differences between senior and junior developers

Today Qazi & Sonny will be showing you How To Become a React JavaScript Developer 🚀👨‍💻