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
- replaceAll(): returns a new string with all matches of a pattern replaced by the new replacement word.
- Promise.any(): It takes an iterable of Promise objects and as one promise fulfills, return a single promise with the value.
- weakref: This object holds a weak reference to another object without preventing that object from getting garbage-collected.
- FinalizationRegistry: Lets you request a callback when an object is garbage collected.
- Private visibility modifier for methods and accessors: Private methods can be declared with #.
- Logical Operators : && and || operators.
- Numeric Separators: enables underscore as a separator in numeric literals to improve readability.
- Intl.ListFormat : This object enables language-sensitive list formatting.
- Intl.DateTimeFormat : This object enables language-sensitive date and time formatting.
ES2020/ES11
BigInt: provides a way to represent numbers(whole) larger than 253–1
Dynamic Import: Dynamic imports give the option to import JS files dynamically as modules. It will help you to get modules on demand.
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.
globalThis: contains the global this value, which basically works as a global object.
Promise.allSettled(): returns a promise which basically contains the array of objects with the outcome of each promise.
Optional Chaining: read the value with any connected objects or check methods and check if property existing or not.
String.prototype.matchAll(): returns an iterator of all results matching a string against the regex.
Named Export: With this feature, we can have multiple named exports per file.
Well defined for-in order:
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
Array.flat(): creates a new array by
_combining_
the other arrays in the main array. Note: we can set the depth to combine arrays.Array.flatmap: creates a new array by applying
_callback_
function to each element of the array.Object.fromEntries(): transforms a list of key-value pairs into an
_object._
String.trimStart() & String.trimEnd(): method removes whitespace from the beginning and end of a string.
try…catch: statement marks a block of statements to try and if any error occurs catch will handle it.
Function.toString(): converts any method/code to
_string_
.Symbol.prototype.description: returns optional description of
**_Symbol_**
objects.
ES2018/ES9
Asynchronous Iteration: With the help of
**_async_**
and**_await_**
now we can run the series of asynchronous iterations in the for a loop.Promise.finally(): returns a promise when it is settled or rejected. It will help to avoid duplicating
**_then_**
and**_catch_**
handlers.Rest/Spread Properties: for object
_destructuring_
and arrays.Regular Expression Named Capture Groups: can group to be named using the notation
**_?<name>_**
after the opening bracket.Regular Expression s (dotAll) Flag: matches any single character except carriage returns. The
_s_
flag changes this behavior so line terminators are permittedRegular Expression Unicode Property Escapes: can set the Unicode property escapes with Unicode
_u_
flag set and_\p{…}_
and_\p{…}_
ES2017/ES8
Object.entries():returns an array of a given objects
_key and value pairs_
.Object.values(): returns an array of given object’s property values.
padStart(): pads the current string with another string until the resulting string reaches the length.
padEnd(): pads the current string with the given string from the end of the current string.
Object.getOwnPropertyDescriptors(): returns all own property descriptors of a given object.
Async functions: expand on Promises to make asynchronous calls.
ES2016/ES7
Array.prototype.includes(): determines whether an array includes a certain value among the given value. It returns true or false.
Exponentiation: returns a result of raising the first operand to the power of the second operand.
ES2015/ES6
Arrow function expressions: is alternative to traditional functional expression for some cases
Enhanced Object Literals: extended to support setting the object constructions.
Classes: create class using
_class_
keyword.Template Literals: can add parameters directly in the string using
_${param}_
Destructuring Assignment: helps to unpack values from arrays or properties from objects.
Default + Rest + Spread: supports the default value, spread parameter or array as arguments.
Let + Const:
Promises: used for async operations.
Modules:
Map + Set + WeakMap + WeakSet:
Math + Number + String + Array + Object APIs:
Top comments (0)