DEV Community

Izabella Albuquerque
Izabella Albuquerque

Posted on

10 JavaScript Tricks Every Developer Must Know πŸš€

JavaScript is an incredible language full of possibilities! Whether you're a beginner or have some experience, there are always new ways to simplify tasks, make your code cleaner, and creatively solve problems. Knowing a few "tricks" can make a huge difference in your daily work and give your projects that extra polish.

In this post, I’m sharing 10 essential tips every developer should know. These tricks will help you avoid bugs, simplify your code, and make common functions more efficient. Ready to add some new techniques to your toolkit?

1. Default Parameters
Avoid checking for empty parameters by using default values directly in the function:

function greet(name = "Developer") {
  return `Hello, ${name}!`;
}
console.log(greet()); // Output: Hello, Developer!
Enter fullscreen mode Exit fullscreen mode

2. Short-Circuit Evaluation
Use the || operator to set default values:

const user = userInput || "Guest";
Enter fullscreen mode Exit fullscreen mode

3. Destructuring Arrays and Objects
Simplify your code by extracting values directly from arrays and objects:

const [first, second] = [10, 20];
const { name, age } = { name: "Izabella", age: 25 };
Enter fullscreen mode Exit fullscreen mode

4. Optional Chaining
Avoid checking nested objects with the ?. operator:

console.log(user?.profile?.email); // Avoids error if `profile` is undefined
Enter fullscreen mode Exit fullscreen mode

5. Object Shorthand
When creating objects, you can simplify your code by using variables with the same names as the properties. This reduces the amount of code and keeps it cleaner:

const name = "Izabella";
const age = 25;

const user = { name, age }; // Automatically assigns 'name' and 'age' to the 'user' object
console.log(user); // Output: { name: "Izabella", age: 25 }
Enter fullscreen mode Exit fullscreen mode

6. Array .find() and .findIndex()
Quickly find an element or its index in an array:

const users = [{ id: 1 }, { id: 2 }];
const user = users.find(u => u.id === 2);
Enter fullscreen mode Exit fullscreen mode

7. Spread and Rest Operators
Use ... operators to spread or gather elements:

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];
Enter fullscreen mode Exit fullscreen mode

8. Debounce Functions
Reduce the number of times a function is called on scroll or user input events:

function debounce(func, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), delay);
  };
}
Enter fullscreen mode Exit fullscreen mode

9. Dynamic Property Keys
Create properties dynamically in objects:

const propName = "age";
const person = { [propName]: 25 };
Enter fullscreen mode Exit fullscreen mode

10. Nullish Coalescing (??)
Use ?? to set default values only if the value is null or undefined:

const value = null;
console.log(value ?? "default value"); // Output: default value
Enter fullscreen mode Exit fullscreen mode

These tricks can make a big difference in the readability and efficiency of your code! Which of these did you already know?

If you found these tips helpful, leave a ❀️, save this post, and follow me on GitHub for more coding content and resources.

Top comments (1)

Collapse
 
programmerraja profile image
Boopathi

This is a great roundup of JavaScript tricks! I've been using some of them, but I'll definitely try incorporating the others to make my code even more efficient. Thanks for sharing!