One of powerful feature in Modern ES6 JavaScript - Arrow Function in ServiceNow JavaScript

[RAMANA MURTHY G]

Hello Community 👋,

We all know that recent ServiceNow updates supports Modern ES6 for JavaScript. In ES6 one of the most useful feature is an Arrow function. An Arrow function is a concise way to write a function expression in more cleaner way.

What Is the Arrow Function?

an arrow function is a concise way to write a function expression. When we need to create a function in JavaScript, the main method is to use the function keyword followed by the function name as shown below:

function greetings(name) {
  gs.info(‘Hello, ’ + name);
}
greetings('Pranav'); 		// output: Hello, Pranav

When we declare a function with the arrow function syntax, we need to assign the declaration to a variable so that the function has a name.

Basically, the arrow function syntax looks as follows:

const myFunction = (param1, param2, ...) => {
  // function body
}

• In the code above, the myFunction is the variable that holds the function. We can call the function as myFunction() later in our code.
• (param1, param2, ...) are the function parameters. We can define as many parameters as required by the function.
• Then we have the arrow => to indicate the beginning of the function. After that, we can write curly brackets {} to indicate the function body, or remove them if we have a single-line function.

Steps to convert regular function to an Arrow function

We can follow these three easy steps to convert a regular function to an arrow function:

1. Replace the function keyword with the variable keyword const
2. Add the = symbol after the function name and before the parentheses
3. Add the => symbol after the parentheses

Usually, a function is never changed after the declaration, so we use the const keyword instead of let.

function greetings(name) {
	gs.info(“Hello ”+ name);
}

// step 1: replace function with const
const greetings(name) {
  gs.info(“Hello ”+ name);
}

// step 2: add = after the function name
const greetings = (name) {
  gs.info(“Hello ”+ name);
}

// step 3: add => after the parentheses
const greetings = (name) => {
  gs.info(“Hello ”+ name);
}

When we have a single line function, there’s a fourth optional step to remove the curly brackets and the return keyword as follows:

const greetings = (name) =>  gs.info(“Hello ”+name) ;

When we have exactly one parameter, you can also remove the parentheses

const greetings = name => gs.info(“Hello ”+name);

Arrow Functions Are Better for Short Functions

Suppose we  have a single-line function that prints a string. If we use the arrow function syntax,

1. We can omit the curly brackets, creating a single-line function
2. Even more, we can remove the parentheses that surround the function parameters when you have exactly one parameter
3. If your function has no parameter, then you need to pass empty parentheses between the assignment and the arrow syntax as shown below:

const greetings = () => gs.info(“Hello, ServiceNow”);

When using the arrow function syntax, the curly brackets are required only when our function is more than a single line.

Arrow functions are also great for situations where we don’t need to name the function, such as callbacks:

numbers = [1, 2, 3];
// From this:
numbers.forEach(function (item) {
  gs.info(item);
});

// To this:
numbers.forEach(item => gs.info(item));

Or when we need to create an Immediately Invoked Function Expression (IIFE):

// From this:
(function () {
  gs.info('Hello World');
})();

// To this:
(() => gs.info('Hello World'))();

When we  have a single-line arrow function, the return statement will be added implicitly by JavaScript. This means we shouldn't add the return keyword explicitly.

suppose we have a function that sums two numbers as follows:

function sum(a, b) {
  return a + b;
}

When we write the function above using the arrow function syntax, we need to remove the curly brackets and the return keyword:

const sum = (a, b) => a + b;

If you didn’t remove the return keyword, then JavaScript will throw an error, saying an opening curly bracket { is expected.

When you use arrow functions, only write the return statement explicitly when you have multi-line statements:

const sum = (a, b) => {
  const result = a + b;
  return result;
};

Note: We can omit const keyword before the Arrow function in ServiceNow scripts.

Please mark as Helpful, if this article found useful

Thank you

Ramana Murthy G