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!
2. Short-Circuit Evaluation
Use the || operator to set default values:
const user = userInput || "Guest";
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 };
4. Optional Chaining
Avoid checking nested objects with the ?. operator:
console.log(user?.profile?.email); // Avoids error if `profile` is undefined
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 }
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);
7. Spread and Rest Operators
Use ... operators to spread or gather elements:
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];
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);
};
}
9. Dynamic Property Keys
Create properties dynamically in objects:
const propName = "age";
const person = { [propName]: 25 };
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
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)
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!