JavaScript Features I Will Use in 2021

Browsing Mozilla’s site so you don’t have to.

mbvissers.eth

Published in

The Startup

3 min readFeb 11, 2021

Introduction

Development never stops. Either with programming languages, libraries, or new languages. This means that Mozilla’s website is regularly updated with new and exciting features that we can use.

Some of these functions require polyfills. That means that they aren’t implemented widely yet but can be added manually using a polyfill. Instead of using it out of the box, you add it yourself or by using a library such as Babel.

Let’s get started with the list.

Some and Every

These are actually two separate functions but with a very similar goal. It is an array fountain that checks whether at least one or all values pass a given test.

This test can be given as an anonymous function. The function will then iterate over the array and check each item.

It will return true or false depending on the function and test.

Template literals

Template literals are strings on steroids. You can insert variables and have multiline strings without having to close and re-open the string.

let str = `string text` 
str = `string text line 1 string text line 2` let expression = "some text"
str = `string text ${expression} string text`

They are made using backticks. They are useful for queries and other simple string concatenation problems. They are even the default for GraphQL queries.

ForEach loop

Instead of writing a for loop to iterate over an array, you can use the forEach loop. It is an array function that accepts a function which it will execute for every item in the array.

This can be useful for more syntactic code and can be used for almost every problem that normally requires a for-loop.

const arr = ['a', 'b', 'c'];arr.forEach(elem => console.log(elem));

For…In loops

Another slight variation on for loops is the for-in loop. These are also more syntactic for most problems and are actually written as the statement in a for-loop.

These are useful for all simple for loop problems and are just a slightly more understandable way to write the loops.

But note that according to Mozilla it isn’t the best option if the order of the array and execution matters. Then the forEach loop is a more useful option.

const obj = { a: 1, b: 2, c: 3 };for (const prop in obj) {  
  console.log(`${prop}: ${obj[prop]}`);
}

The Set object

The set object is similar to an array but it can only contain uniques. When working with unique-only data it is always useful to have some sort of check to see if the data is actually unique.

The Set object will ignore duplicates and only output unique values. This can be used as an easy trick to convert your array to unique-only values but I want to simply start using the set object from the start of my values should be unique.

Nullish coalescing operator

Ways to make some code shorter and more readable? Yes, please!

Null-checking can be annoying to do and endless if statements aren’t really a nice way to check this, so thankfully they added this new operator.

let person = null
let name = person ?? 'John Doe'
// -> John Doe

Optional chaining operator

The optional chaining operator will check if every link in the chain has a readable value. This is useful for null-checking within an object.

Using this operator will result in shorter and easier to read chains of checks. It will check if a value is null or undefined.

const adventurer = {
  name: 'Jane',
  cat: {
    name: 'Doe'
  }
};const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

Conclusion

JavaScript is slowly getting more advanced. And for the better, it seems like it isn't going away anytime soon.

Thank you for reading and have a great day.