New Features in JavaScript

Day by day, software developers from all around the world keep thinking, collaborating and building software applications to make life easier and also for a better experience. Programming stacks are not also left out as they get improved and simplified from time to time.

A popular example is JavaScript, as we all known that JavaScript appears to be one of the best used programming languages across the globe and based on this fact, software engineers from all around the world keep working to improve and make this language as easy as possible.

Virtually, every JavaScript developer must have heard of what we call ECMA Script, in this article, I will expose and explain t us some of the new features in the ECMA Script.

Logical Assignment Operators

You might be familiar with logical operations like ??, &&, or || and the assignment operator =.

In ES2021, the logical assignment operator combines logical operations like ??, && or || with an assignment operator =.

Here is how it works

&&=
// This logical assignment operator is used between two values. If the first value is truthy, the second value will be assigned to it

i.e
let a = 5;
let b = 0;

a &&= 7;
console.log(a);
// expected output: 7

b &&= 3;
console.log(b);
// expected output: 0


||=
//This logical assignment operator is also used between two values. If the first value is not truthy(i.e falsy), the second value will be assigned to it.

i.e
let a = 5;
let b = 0;

a &&= 7;
console.log(a);
// expected output: 5

b &&= 3;
console.log(b);
// expected output: 3


??= 
//This logical operator checks if the first value is null or undefined. If it is, the second value is assigned to it.

const books = [
  {
    isbn: '123',
  },
  {
    title: 'ECMAScript Language Specification',
    isbn: '456',
  },
];

// Add property .title where it’s missing
for (const book of books) {
  book.title ??= '(Untitled)';
}

// *checking the book array, here is what we get*
assert.deepEqual(
  books,
  [
    {
      isbn: '123',
      title: '(Untitled)',
    },
    {
      title: 'ECMAScript Language Specification',
      isbn: '456',
    },
  ]);

WeakRef

One of the cool feature of ES2021 is WeakRef(). It is used to hold a weak reference to another object, which means it doesn't prevent the garbage collector from collecting the object. This feature becomes handy in a situation whereby we do not want to keep the object in memory forever.

Here is an example

const weakRef = new WeakRef({
  age: 44;
})

console.log(weakRef.deref().age)

// it will output 44

Explanation

To create a new WeakRef, we pass an object as an argument for WeakRef() and we call deref() on the weak reference to read the reference.

Numeric Separators

Numeric separators is one of the useful features that have been introduced in ES2021. It simply improves the readability of large numbers by using the underscore( _ ) character to separate number groups, just like you use commas to separate numbers in writing.

Consider and instance where we have a number like 2345000465, at first glance, it is quite difficult to decipher that this number is 2.3 billion +.

Here is an example of how numeric operators come in to use

const exampleNumber = 2_345_000_465

// This is much more readable, and it does affect the performance as the number above is still 2345000465.

String.replaceAll

This method replaceAll() allows you to replace all the characters that you specify in a string without using a regex.

const newString = oldString.replaceAll(pattern, replacement);

// pattern - the character we want to replace.
// replacement - the character we want to replace it by.

The replaceAll method returns a new string in which all occurences of a pattern are replaced by a replacement passed to it.

const name = "This is an example text"

console.log(name.replaceAll(' ', '_'))

//Expected output: This_is_an_example_text

//Can also be used with regex

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';


const regex = /Dog/ig;

console.log(p.replaceAll(regex, 'ferret'));

// expected output: "The quick brown fox jumps over the lazy ferret. If the ferret reacted, was it really lazy?"

The pattern parameter can either be a string or a regex pattern, and the replacement can either be a string or a function that creates a new string to replace the pattern.

Promise.any

The promise.any() method is a new promise method that takes in a series of promises and resolves to the value of the first promise to successfully resolve.

In other words, the Promise.any resolves successfully if any of the promises resolve and rejects if all promises reject For example

Promise.any([promise1, promise2, promise3, ...]).then(...perform an action)

Promise.any is applicable in cases whereby you try multiple requests and you need at least one fulfilling it's promise

You can also pass an array of promise to it, e.g

const promises = [promise1, promise2, promise3];

Promise.any(promises).then((value(s)) => console.log(value(2)))

.at() function for indexing

Previously, square brackets were used to index or fetch specific elements in an array. The process was easy unless you had to conduct a backward iteration i.e. required negative indexing. In the case of negative indexing - you had to refer to the string length and index from there. This process has been simplified by the use of the .at() function.

array= [1,2,4,5]
console.log(array[array.length-1]);
console.log(array.at(-1));

We still have various other new features which I will talk about in future articles. So follow up so as not to miss out.

Let me know the one that interests you the most out of the new features.

James Oluwabukola's blog