Exploring ECMAScript 12 in the Xanadu Release

This blog post was written with the assistance of ChatGPT.

The Xanadu release of ServiceNow brings an exciting update for developers: the ability to use ECMAScript 12 (ES12) features not only in scoped applications but also in global scripts. This significant enhancement allows for more modern and efficient JavaScript code, aligning with contemporary standards and practices in web development. In this blog post, we will explore the new ES12 capabilities, compare them with the existing ES5 mode, and highlight how these advancements can enhance your ServiceNow development experience.

Previously, the use of ES12 in server scripts was confined to scoped applications, limiting its accessibility and utility. With Xanadu, you can now leverage the power of ES12 in individual scripts across both scoped and global environments.

For more information about what’s supported depending on if you run a script in ES5 or ES12 mode, see the ServiceNow documentation at https://docs.servicenow.com/bundle/xanadu-api-reference/page/script/JavaScript-engine-upgrade/reference/javascript-engine-feature-support.html

Enabling ECMAScript 2021 (ES12) for Scripts

To leverage the advanced features of ES12 in your ServiceNow applications, you need to enable ES12 mode for your individual scripts. In the script editor, you will find an option to Turn on ECMAScript 2021 (ES12) mode.

JavaScript Improvements from ES5 to ES12

JavaScript has evolved significantly from ES5 to ES12, bringing numerous enhancements that improve performance, security, and developer productivity. Here’s a summary of the key improvements (Some aren’t supported in ServiceNow, so we’ve tried to remove these).

ES6 (ECMAScript 2015): The Game-Changer

ES6 introduced several fundamental changes that modernized JavaScript:

  • Arrow Functions: Simplified syntax for writing functions.
  • Template Literals: Enhanced string manipulation with embedded expressions.
  • let and const: Block-scoped variable declarations, reducing common issues with variable hoisting.
  • Spread Operator and Destructuring: Improved handling of arrays and objects.

ES7 and ES8: Incremental Enhancements

  • ES7 (ECMAScript 2016):
    • Array.prototype.includes: Method to check if an array contains a specific element.
    • Exponentiation Operator (**): Simplified syntax for exponentiation operations.
  • ES8 (ECMAScript 2017):
    • String Padding: padStart and padEnd methods for string padding.
    • Object.entries and Object.values: Methods to iterate over an object’s key-value pairs and values, respectively.

ES9 and ES10: Expanding Capabilities

  • ES9 (ECMAScript 2018):
    • Rest Properties: Extract properties from an object.
    • Spread Properties: Add properties to an object.
    • RegExp Lookbehind Assertions: Use lookbehind assertions in regular expressions to match patterns based on what precedes them.
  • ES10 (ECMAScript 2019):
    • Array.prototype.flat and flatMap: Methods to flatten nested arrays and combine mapping and flattening operations.
    • Object.fromEntries: Converts a list of key-value pairs into an object.

ES11 and ES12: Performance and Security Improvements

  • ES11 (ECMAScript 2020):
    • Dynamic Import: import() function for dynamically loading modules.
    • BigInt: Support for arbitrarily large integers.
    • Nullish Coalescing (??) and Optional Chaining (?.): Operators for handling null or undefined values gracefully.
  • ES12 (ECMAScript 2021):
    • Logical Assignment Operators (&&=, ||=, ??=): Combine logical operations with assignment.
    • Numeric Separators: Improved readability of numeric literals with separators.
    • String.prototype.replaceAll: Method to replace all occurrences of a substring in a string.

In short, several features from earlier versions like template literals, arrow functions, and classes are supported and fully functional in ES12 mode.

Each of these versions has progressively added features that enhance JavaScript’s usability, performance, and maintainability, making it a more powerful tool for modern web development​.

Some Key Changes in ES12 Beneficial for ServiceNow Developers

Here are a few key features that I believe will be particularly beneficial for scripting.

1. Arrow Functions: Arrow functions provide a concise syntax for writing functions and improve the readability and maintainability of the code. They also lexically bind the this value, which helps avoid common pitfalls associated with the traditional function keyword, especially in callback functions.

ES5

var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.map(function(n) {
  return n * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]

ES12

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

2. Template Literals: Template literals greatly enhance the way strings are handled in JavaScript. They allow for embedded expressions and multi-line strings, making the construction of complex strings simpler and more readable. This is particularly useful in ServiceNow scripts for constructing dynamic messages or creating complex queries.

ES5

var name = "John";
var greeting = "Hello, " + name + "! How are you today?";
console.log(greeting); // Hello, John! How are you today?

ES12

const name = "John";
const greeting = `Hello, ${name}! How are you today?`;
console.log(greeting); // Hello, John! How are you today?

3. Destructuring Assignment: Destructuring assignment allows for the extraction of values from arrays or properties from objects into distinct variables. This feature reduces the need for multiple lines of code and makes data handling more intuitive and concise, especially when dealing with complex data structures in ServiceNow scripts.

ES5

var person = { firstName: 'John', lastName: 'Doe', age: 30 };
var firstName = person.firstName;
var lastName = person.lastName;
var age = person.age;
console.log(firstName, lastName, age); // John Doe 30

ES12

const person = { firstName: 'John', lastName: 'Doe', age: 30 };
const { firstName, lastName, age } = person;
console.log(firstName, lastName, age); // John Doe 30

ES13 Features Supported in ES12 Mode

The Xanadu release of ServiceNow includes support for several features from ECMAScript 2022 (ES13) in ES12 mode:

  1. Instance Class Fields:
    • Public and private instance class fields are supported, enhancing encapsulation and cleaner syntax.
  2. Static Class Fields:
    • Public and private static class fields are supported, allowing for shared properties across all instances of a class.
  3. Private Class Methods:
    • Private static methods are supported, providing better encapsulation at the class level.
  4. Ergonomic Brand Checks for Private Fields:
    • Supported, improving robustness in code that relies on private properties.

Conclusion

The Xanadu release marks a significant advancement for ServiceNow developers by enabling the use of ECMAScript 12 features, and even some from ES13, in both scoped and global scripts. This opens up new possibilities for writing modern, efficient, and maintainable code. Features like arrow functions, template literals, destructuring assignment, default parameters, and the spread operator streamline development and improve code readability. By leveraging these enhancements, developers can enhance their scripting capabilities and create more robust ServiceNow applications.

Related Posts