One of powerful feature in Modern ES6 JavaScript - Arrow Function in ServiceNow JavaScript
New article articles in ServiceNow Community
·
Dec 11, 2024
·
article
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:
- Replace the function keyword with the variable keyword const
- Add the = symbol after the function name and before the parentheses
- 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,
- We can omit the curly brackets, creating a single-line function
- Even more, we can remove the parentheses that surround the function parameters when you have exactly one parameter
- 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
https://www.servicenow.com/community/developer-articles/one-of-powerful-feature-in-modern-es6-javascript-arrow-function/ta-p/3124826