logo

NJP

Upgrade Your Javascript; Essential ES12 Features You Should Be Using

New article articles in ServiceNow Community Β· Feb 06, 2025 Β· article

JavaScript has evolved significantly over the years, introducing powerful features that make your code cleaner, more readable, and easier to maintain. If you learned JavaScript on the ServiceNow platform before 2022, it's time to refresh your skills with ES12\. Let’s explore some of the most impactful updates that will level up your coding game.

## Check out the attached PDF

Attached to this blog post you'll find a PDF that I created with 23 pages of individual lessons, here is a preview of a few of my favorite updates:

---

## πŸš€ **Let & Const: Ditch `var` for Good**

Gone are the days of unexpected scope issues with `var`. Use `const` for values that shouldn’t change and `let` when a variable needs to be reassigned.

```javascript
const pi = 3.14159; // This value won't change
let score = 10; // This can be updated later

```

---

## ⚑ **Exponentiation Operator (``)**

Say goodbye to `Math.pow()` and use `**` for cleaner, more readable exponentiation.

```javascript
console.log(2 ** 3); // 8

```

---

## πŸ€” **Nullish Coalescing (`??`) vs. Logical OR (`||`)**

Unlike `||`, the `??` operator only assigns a default value when the left-hand side is `null` or `undefined`, preserving valid falsy values.

```javascript
let userScore = 0;
console.log(userScore ?? 100); // 0 (nullish coalescing keeps 0)
console.log(userScore || 100); // 100 (logical OR mistakenly replaces 0)

```

---

## πŸ”’ **Numeric Separators (`_`)**

Make large numbers easier to read by using underscores.

```javascript
let budget = 1_000_000; // Instead of 1000000

```

---

## βœ… **Logical Assignment Operators (`||=`, `&&=`, `??=`)**

These shorthand operators make variable assignments more concise.

```javascript
let username = null;
username ||= "Guest"; // Assigns 'Guest' only if username is falsy

let hasPremium = true;
hasPremium &&= "Premium User"; // Keeps 'Premium User' if true

let points = undefined;
points ??= 100; // Assigns 100 only if points is null/undefined

```

---

## πŸ“ **Template Literals: A Cleaner Way to Handle Strings**

Stop messing with `+` for concatenation and use backticks for improved readability.

```javascript
let name = "Earl";
console.log(`Hello, ${name}! Welcome to ES12.`);

```

---

## 🎭 **Optional Chaining (`?.`)**

Avoid errors when accessing deeply nested object properties.

```javascript
let user = { profile: { settings: null } };
console.log(user.profile?.settings?.theme); // undefined, no error!

```

---

## πŸ” **String Methods: `includes()`, `startsWith()`, `endsWith()`**

Simplify string searches with these intuitive methods.

```javascript
let str = "ServiceNow Developer";
console.log(str.includes("Now")); // true
console.log(str.startsWith("Service")); // true
console.log(str.endsWith("Engineer")); // false

```

---

## πŸš€ **Arrow Functions: Shorter, Better, and `this`\-Preserving**

Arrow functions are great for keeping your code clean and handling `this` properly.

```javascript
const greet = name => `Hello, ${name}!`;
console.log(greet("Earl"));

```

---

## πŸ”„ **For...of Loop for Easier Iteration**

Iterate over arrays without dealing with messy indexes.

```javascript
let users = ["Alice", "Bob", "Charlie"];
for (let user of users) {
console.log(user);
}

```

---

## πŸ”‘ **Maps & Sets: Better Data Structures**

Use `Map` for key-value storage and `Set` for unique values.

```javascript
let userRoles = new Map();
userRoles.set("Earl", "Admin");
console.log(userRoles.get("Earl")); // Admin

let uniqueNumbers = new Set([1, 2, 2, 3]);
console.log([...uniqueNumbers]); // [1, 2, 3]

```

---

## πŸ“š **Array Utilities: `flat()`, `flatMap()`**

Flatten arrays easily without loops.

```javascript
let nestedArr = [1, [2, [3, 4]]];
console.log(nestedArr.flat(2)); // [1, 2, 3, 4]

```

**And more! Check out the attached pdf for the rest of the highlighted features I picked out.**

---

## Conclusion

JavaScript is constantly evolving, and keeping up with the latest features will make your code more efficient and modern. Whether you're working on ServiceNow or any other platform, ES12 brings powerful improvements that enhance readability, reduce boilerplate, and simplify complex operations.

View original source

https://www.servicenow.com/community/developer-advocate-blog/upgrade-your-javascript-essential-es12-features-you-should-be/ba-p/3170832