JavaScript Tips & Tricks

You don't need to be a seasoned coder to make your JavaScript code cleaner and easier to read. Here are some simple yet effective tips and best practices that can help you write JavaScript code that's not only functional but also more maintainable and comprehensible.

NOTE
If you haven't read my posts on debugging and exception handling, then I would encourage you to start there.

Let's Talk Code

?? and ||:

The Logical Or operator || is used to set a default value if the left side is null, undefined, "", or 0.

const balance = 0;
const newBalance = balance || 100;

console.log(newBalance); // returns 100

What if we want to be able to set the balance to 0? Use the Nullish Coalescing Operator ?? to only check the left side for null or undefined.

const balance = 0;
const newBalance = balance ?? 0;

console.log(newBalance); // returns 0

Spread and Rest Operator:

Use the spread operator to quickly create a new array from an existing array.

const a = [1, 2, 3];
const b = [...a, 3, 5]; // [1, 2, 3, 4, 5]

You can also use it to copy objects.

const a = {
    firstname: "Joe",
    lastname: "Schmoe"
};

const b = { ...a, age: 18 }; // { firstname: "Joe", lastname: "Schmoe", age: 18 }

Although both use the ... syntax, the spread operator is not the same as the rest operator. The rest operator is used to define an infinite number of values passed to a function in an array. If you are familiar with Python, then the rest operator is similar to *args and **kwargs.

function myFunc (a, b, ...otherArgs) {
    otherArgs.forEach(arg => {
        console.log(arg);
    });
}

myFunc(1, 2, 3, 4, 5); // returns 3, 4, 5

Destructuring:

Use destructuring to unpack object properties into variables.

const a = {
    firstname: "Joe",
    lastname: "Schmoe",
    age: 18,
};

// this works
const firstname = a.firstname;
const lastname = a.lastname;
const age = a.age;

// this is better
const { firstname, lastname, age } = a;

You can also use destructuring with arrays:

const a = [1, 2, 3];
const [b, c, d] = a;

console.log(b); // returns 1
console.log(c); // returns 2
console.log(d); // returns 3

// you can also do this
const [e, f, g] = [4, 5, 6]

console.log(e); // returns 4
console.log(f); // returns 5
console.log(g); // returns 6

Ternary Operator:

Clean up if/else statements with the ternary operator.

const a = 1;
const b = 2;
let c;

// this works
if (a < b) {
    c = a;
} else {
    c = b;
}

// this is better
c = a < b ? a : b;

Array .forEach and .map:

Instead of using a for loop to iterate over an array, use .forEach and .map.

To create a new array, use .map:

// this works
const a = [];
const b = [1, 2, 3];

for (let i=0;i<b.length;i++) {
  a.push(b[i]);
}

console.log(a); // returns [1, 2, 3]

// this is better
const c = b.map(i => i)

console.log(c); // returns [1, 2, 3]

To modify an existing array, use .forEach:

// this works
const a = [1, 2, 3];

for (let i=0;i<a.length;i++) {
  a[i] = a[i]*10;
}

console.log(a); // returns [10, 20, 30]

// this is better
const b = [1, 2, 3];
b.forEach((el, idx) => b[idx] = el * 10)

console.log(b); // returns [10, 20, 30]