7 Lesser Known JavaScript Tricks Every Developer Should Know

Discover 7 lesser known JavaScript tricks that can boost your coding efficiency and improve your development skills. Learn these tips to enhance your JavaScript projects.

7 Lesser Known JavaScript Tricks Every Developer Should Know

JavaScript is a powerful language, but even seasoned developers might not know all the tips and tricks it has to offer. Whether you’re just starting out or have been coding for years, there are always new techniques to learn that can make your code more efficient, readable, and maintainable. In this blog, we’ll explore seven lesser known JavaScript tricks that can help you write better code.

1. Destructuring Assignment for Arrays and Objects

Destructuring assignment is a convenient way to extract values from arrays or properties from objects into distinct variables.

Arrays

Instead of accessing array elements with the bracket notation, you can use destructuring:

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

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

Objects

Similarly, you can extract properties from objects:

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

const { name, age, city } = person;

console.log(name); // John
console.log(age); // 30
console.log(city); // New York

This method not only makes your code cleaner but also reduces the need for multiple lines of variable declarations.

2. Default Parameters

In JavaScript, you can assign default values to function parameters. This is especially useful when you want to ensure that your function always has a value, even if one is not provided.

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

console.log(greet()); // Hello, Guest!
console.log(greet('Alice')); // Hello, Alice!

This trick can help you avoid common errors and make your functions more robust.

3. Template Literals

Template literals are a great way to include variables and expressions inside strings without concatenation.

const name = 'Alice';
const age = 25;

const greeting = `My name is ${name} and I am ${age} years old.`;

console.log(greeting); // My name is Alice and I am 25 years old.

Template literals also allow for multi-line strings:

const message = `This is a long message
that spans across multiple lines.`;

console.log(message);

4. Short-Circuit Evaluation

Short-circuit evaluation is a programming technique that uses logical operators to simplify conditions. In JavaScript, && and || operators can be used for this purpose.

Example: && Operator

The && operator evaluates the second operand only if the first operand is true:

const isLoggedIn = true;
const user = isLoggedIn && 'John Doe';

console.log(user); // John Doe

Example: || Operator

The || operator evaluates the second operand only if the first operand is false:

const isAuthenticated = false;
const defaultUser = isAuthenticated || 'Guest';

console.log(defaultUser); // Guest

5. Optional Chaining

Optional chaining is a feature that allows you to safely access deeply nested properties without having to check if each reference in the chain is valid.

const user = {
  name: 'Alice',
  address: {
    city: 'Wonderland'
  }
};

const city = user.address?.city;

console.log(city); // Wonderland

If any part of the chain is null or undefined, the expression short-circuits and returns undefined.

6. Nullish Coalescing Operator

The nullish coalescing operator (??) is used to provide a default value when dealing with null or undefined.

const input = null;
const value = input ?? 'Default Value';

console.log(value); // Default Value

Unlike the || operator, which returns the second operand if the first one is falsy (0, false, ''), the nullish coalescing operator only considers null or undefined.

7. The Spread Operator

The spread operator (...) allows you to expand iterable objects into multiple elements. This is useful for copying arrays, combining arrays, and spreading function arguments.

Copying Arrays

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

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

Combining Arrays

const arr3 = [4, 5, 6];
const combined = [...arr1, ...arr3];

console.log(combined); // [1, 2, 3, 4, 5, 6]

Spreading Function Arguments

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

The spread operator can also be used with objects to merge properties:

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

const merged = { ...obj1, ...obj2 };

console.log(merged); // { a: 1, b: 2, c: 3, d: 4 }

Conclusion

These seven lesser known JavaScript tricks can significantly improve your coding experience by making your code more readable, maintainable, and efficient. By incorporating these tips into your daily coding routine, you’ll be able to write cleaner and more effective JavaScript.

For more advanced coding tips and web development services, check out our WordPress development services to take your projects to the next level.