ECMAScript new features

Explore ECMAScript

const data = {};
const person = {
  name: 'Adrian',
  age: 27
};
const animals = ['Dog', 'Cat'];
const nestedAnimals = [['Dog'], ['Cat'], ['Horse']];

// Thanks to the "Elvis operator" or more known as optional chaining,
// we can safely access nested object properties even if they don't exist
console.log(data?.a?.b?.c); // undefined instead of error

// We can do the similar with arrays, since arrays are indexed from 0,
// animals[2] is the 3rd element which doesn't exist
console.log(animals[2]?.toString()); // undefined instead of error

// We can also use optional chaining on functions, in this case
// we are trying to call "myImaginaryFunction" - which again, doesn't exist
console.log(data.myImaginaryFunction?.()); // undefined instead of error

// We can still use optional chaining to access nested properties
console.log(person?.name); // "Adrian"

// Null coalescing operator is best suited for checking against null or undefined
// It will accept other "falsy" values such as 0
const zero = 0 ?? 5;
const five = null ?? 5;
const ten = undefined ?? 10;

console.log(zero, five, ten); // 0, 5, 10

// .flat creates a flatten array, it accepts depth as an optional
// parameter of how many levels it should flatten the original array
// by default it's 1 level
const flattenAnimals = nestedAnimals.flat();

console.log(flattenAnimals); // ["Dog", "Cat", "Horse"]

Summary

• ECMAScript brings up new features every year to the JavaScript world.
• It’s challenging to stay up-to-date but also rewarding.
• Optional chaining is a true game-changer for writing code.
• If it comes to arrays, worth taking a look at all the available methods e.g. on devdocs.io.