ES12 and My favourite 5 Javascript features

[ChrisF323949498]

ES12 Support in ServiceNow: Top 5 Features

JavaScript is constantly evolving, and with ES12 now supported in ServiceNow, we have access to a range of new features that can significantly enhance our development experience.

Here are my top 5 features of ES12 that I believe will benefit us the most:

1. Array Method: flat()

The flat() method creates a new array with all sub-array elements concatenated into it recursively (up to the specified depth).

This is particularly useful for flattening nested arrays (E.g. You might have an array of users from one GR query, and need to merge to another from an API call perhaps).

Example:

 const arr1 = [0, 1, [2, [3, [4, 5]]]];

console.log(arr1.flat(2)); // Output: [0, 1, 2, 3, 4, 5]

Note how we had multiple levels, and it still did the trick! So cool! Note the number 2 here.

2. Arrow Functions: () => {}

Arrow functions provide a shorter syntax for writing functions and have a different behaviour for the ‘this’ keyword (That’s a whole article in itself, sorry!) compared to traditional functions.

They are useful for writing more concise code, where a full function declaration would take up a lot of space/not really needed.

Example:

// Traditional function
let add = function(a, b) {
    return a + b;
};


// Arrow function
let add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5

Notice how we didn’t even need the {} after the => because it’s all on one line, JS knows that’s what it must return! Very cool! Also we got rid of the word Function, but these can get confusing if placed everywhere so use appropriately.

3. String includes()

The includes() method determines whether a string contains a specified substring, returning true or false as appropriate. It is case-sensitive.

Example:

let text = "Hello world, welcome to my blog!";
console.log(text.includes("blog")); // Output: true
console.log(text.includes("Blog")); // Output: false

Note how we just call it on the text. And yeah we used ‘let’ here as mentioned below 😄

4. Optional Chaining

Optional chaining (?.) allows you to safely access deeply nested properties without having to explicitly check if each reference in the chain is valid. If a reference is null or undefined, the expression exits and returns undefined.

So when we get back JSON object often from an API call, such as
Example:

let user = {
    address: {
        street: "123 ServiceNow St"
    }
};

console.log(user?.address?.street); // Output: "123 ServiceNow St"
console.log(user?.contact?.phone);  // Output: undefined since phone didn’t exist.

Previously we had other approaches, such as wrap in a try catch or use lots of &&.
I’d sure love to go back and rewrite some of the older code I had to write! 

 

5.let and const (Instead of var)

let and const provide block-scoped variable declarations, which help prevent issues related to variable hoisting and scope leakage that are common with var.

Example:

// Using var
var x = 10;
if (true) {
    var x = 20;
    console.log(x); // Output: 20
}
console.log(x); // Output: 20 since we over wrote it above in the {}

// Using let
let y = 10;
if (true) {
    let y = 20;
    console.log(y); // Output: 20 – Note how INSIDE the {} this is 20 and no warnings about redeclarations.
}
console.log(y); // Output: 10  - Note: but back in this scope, it’s still 10!


// Using const
const z = 30;
z = 40; // Error: Assignment to constant variable.

Not only does this protect us (Some of us would maybe capitalise the words before to signal constants) but this clearly tells Devs ‘Yeah this won’t change’.

A final note, some of your team may not be across these so it may slow them down reviewing your code. So perhaps have a knowledge sharing session before, then agree to move to these new features! 

Have a great day!