JavaScript Latest features. JavaScript Developer

JavaScript is a popular programming language that is constantly evolving and adding new features. 

In this blog post, we will explore some of the latest features that JavaScript has to offer, and how they can make our code more concise, expressive, and powerful. We will also see some code examples that demonstrate how to use these features in practice.

Let's start with some of the new features that were introduced in ES2020, the latest version of the ECMAScript standard that defines JavaScript.

• Optional Chaining

Optional chaining is a syntax that allows us to access nested properties of an object without checking if they exist or not. This can help us avoid errors and simplify our code when dealing with complex or uncertain data structures.

For example, suppose we have an object that represents a user, and we want to access their address. However, not all users have an address property, and some of them may have a null or undefined value. If we try to access the address directly, we may get an error:

// This may throw an error if user or user.address is null or undefined

const address = user.address.street;

To avoid this, we would normally have to check each property along the way:

// This is safe but verbose

const address = user && user.address && user.address.street;

With optional chaining, we can use the ?. operator to access the property only if it exists, and return undefined otherwise:

// This is safe and concise

const address = user?.address?.street;

We can also use optional chaining with function calls and array elements. For example:

// This will call the function only if it exists

user?.sayHello();

// This will access the first element of the array only if it exists

user?. Friends?.[0];

• Nullish Coalescing

Nullish coalescing is another syntax that helps us deal with null or undefined values. It allows us to provide a default value for a variable or expression that may be null or undefined, using the ?? operator.

For example, suppose we have a function that takes an optional parameter and we want to assign a default value to it if it is not provided. We could use the || operator to do this:

// This will assign 10 to x if it is falsy (null, undefined, 0, "", etc.)

function foo(x) {

  x = x || 10;

  console.log(x);

}

However, this may not work as expected if we pass a falsie value that is not null or undefined, such as 0 or "". In that case, we would want to preserve the original value instead of using the default one.With nullish coalescing, we can use the ?? operator to check only for null or undefined values, and leave other falsy values intact:

// This will assign 10 to x only if it is null or undefined

function foo(x) {

  x = x ?? 10;

  console.log(x);

}

This way, we can avoid unwanted side effects and ensure that our default value is used only when necessary.

• Dynamic Import

Dynamic import is a feature that allows us to import modules dynamically, at runtime, instead of statically, at compile time. This can be useful for scenarios such as code splitting, lazy loading, or conditional loading of modules.

To use dynamic import, we can use the import() function, which returns a promise that resolves to the module object. For example:

// This will import the module only when the button is clicked

button.addEventListener("click", async () => {

  // This will load the module dynamically

  const module = await import("./module.js");

  // This will call the function exported by the module

  module.doSomething();

});

Dynamic import can also be used with the await keyword inside an async function, or with the then method of the promise object. For example:

// This will import the module inside an async function

async function loadModule() {

  // This will load the module dynamically

  const module = await import("./module.js");

  // This will call the function exported by the module

  module.doSomething();

}

// This will import the module using the then method

function loadModule() {

  // This will load the module dynamically

  import("./module.js").then((module) => {

    // This will call the function exported by the module

    module.doSomething();

  });

}

Dynamic import can help us optimize our code performance and user experience by loading only the modules that we need, when we need them.

These are just some of the new features that JavaScript has to offer in ES2020. There are many more features that we can explore and use in our projects, such as BigInt, Promise.allSettled, globalThis, String.prototype.matchAll, and more. You can learn more about them on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ECMAScript_2020

We hope you enjoyed this blog post and learned something new. Happy coding!