Upgrade Your Javascript; Essential ES12 Features You Should Be Using

[Earl Duque]

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.

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.

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.

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.

let budget = 1_000_000; // Instead of 1000000

---

✅ Logical Assignment Operators (||=, &&=, ??=)

These shorthand operators make variable assignments more concise.

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.

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

---

🎭 Optional Chaining (?.)

Avoid errors when accessing deeply nested object properties.

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.

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.

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

---

🔄 For...of Loop for Easier Iteration

Iterate over arrays without dealing with messy indexes.

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.

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.

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.