JavaScript is a versatile and powerful language, but it can also be tricky to master. Here are 20 JavaScript tricks and tips that every developer should know to write cleaner, more efficient code and improve their development workflow. π
please subscribe to my YouTube channel to support my channel and get more web development tutorials.
1. Use let and const Instead of var π«
Avoid using var to declare variables. Instead, use let and const to ensure block-scoping and avoid hoisting issues.
Example:
let name = 'John';
const age = 30;
2. Destructuring Assignment π
Destructuring allows you to extract values from arrays or properties from objects into distinct variables.
Example:
const person = { name: 'Jane', age: 25 };
const { name, age } = person;
const numbers = [1, 2, 3];
const [first, second] = numbers;
3. Template Literals π
Template literals provide an easy way to interpolate variables and expressions into strings.
Example:
const name = 'John';
const greeting = `Hello, ${name}!`;
4. Default Parameters π οΈ
Set default values for function parameters to avoid undefined errors.
Example:
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
5. Arrow Functions π―
Arrow functions provide a concise syntax and lexically bind the this value.
Example:
const add = (a, b) => a + b;
6. Spread Operator ... π
The spread operator allows you to expand elements of an iterable (like an array) or properties of an object.
Example:
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
const obj1 = { name: 'John' };
const obj2 = { ...obj1, age: 30 };
7. Rest Parameters ... π
Rest parameters allow you to represent an indefinite number of arguments as an array.
Example:
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
8. Short-Circuit Evaluation && and || π οΈ
Use short-circuit evaluation for conditional expressions and default values.
Example:
const user = { name: 'John' };
const name = user.name || 'Guest';
const isAdmin = user.isAdmin && 'Admin';
9. Object Property Shorthand π
Use shorthand syntax to create objects when the property name and variable name are the same.
Example:
const name = 'John';
const age = 30;
const person = { name, age };
10. Optional Chaining ?. π
Optional chaining allows you to safely access deeply nested properties without having to check if each reference is valid.
Example:
const user = { name: 'John', address: { city: 'New York' } };
const city = user.address?.city;
11. Nullish Coalescing ?? π
Nullish coalescing (??) provides a way to return the right-hand operand when the left-hand operand is null or undefined.
Example:
const user = { name: 'John' };
const name = user.name ?? 'Guest';
12. Array Methods: map(), filter(), reduce() π οΈ
Use array methods like map(), filter(), and reduce() to perform common operations on arrays in a functional way.
Example:
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
const evens = numbers.filter(num => num % 2 === 0);
const sum = numbers.reduce((total, num) => total + num, 0);
13. Promise Chaining and Async/Await π―
Handle asynchronous operations using Promises and the async/await syntax for cleaner, more readable code.
Example with Promises:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
Example with Async/Await:
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}
14. Debouncing and Throttling π
Optimize performance by debouncing and throttling functions that are called frequently, such as during scroll or resize events.
Debouncing Example:
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
window.addEventListener('resize', debounce(() => {
console.log('Resized');
}, 300));
Throttling Example:
function throttle(func, limit) {
let inThrottle;
return function(...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
window.addEventListener('scroll', throttle(() => {
console.log('Scrolled');
}, 300));
15. Using for...of for Iteration π
Use the for...of loop for more readable iteration over arrays, strings, and other iterable objects.
Example:
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
console.log(number);
}
16. Cloning Objects and Arrays π οΈ
Use the spread operator or Object.assign() to clone objects and arrays.
Example:
const original = { name: 'John', age: 30 };
const clone = { ...original };
const arr = [1, 2, 3];
const arrClone = [...arr];
17. Dynamic Property Names π
Use computed property names to dynamically set object properties.
Example:
const propName = 'age';
const person = {
name: 'John',
[propName]: 30
};
18. Using setTimeout and setInterval π―
Schedule code execution using setTimeout and setInterval.
Example:
setTimeout(() => {
console.log('This runs after 2 seconds');
}, 2000);
const intervalId = setInterval(() => {
console.log('This runs every 3 seconds');
}, 3000);
// To clear the interval
clearInterval(intervalId);
19. String Methods: includes(), startsWith(), endsWith() π
Use modern string methods to perform common string operations.
Example:
const str = 'Hello, World!';
console.log(str.includes('World')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true
20. Using console Effectively for Debugging π οΈ
Leverage various console methods for more effective debugging.
Example:
console.log('Simple log');
console.warn('This is a warning');
console.error('This is an error');
console.table([{ name: 'John', age: 30 }, { name: 'Jane', age: 25 }]);
console.group('Group');
console.log('Message 1');
console.log('Message 2');
console.groupEnd();
Start Your JavaScript Journey
If you're new to JavaScript or want a refresher, visit my blog on BuyMeACoffee to get started with the basics.
π Introduction to JavaScript: Your First Steps in Coding
Support My Work
If you enjoy my content and want to support my work, consider buying me a coffee! Your support helps me continue creating valuable content for the developer community.
Series Index
| Part | Title | Link |
|---|---|---|
| 1 | Ditch Passwords: Add Facial Recognition to Your Website with FACEIO | Read |
| 2 | The Ultimate Git Command Cheatsheet | Read |
| 3 | Top 12 JavaScript Resources for Learning and Mastery | Read |
| 4 | Angular vs. React: A Comprehensive Comparison | Read |
| 5 | Top 10 JavaScript Best Practices for Writing Clean Code | Read |
| 6 | Top 20 JavaScript Tricks and Tips for Every Developer π | Read |
| 7 | 8 Exciting New JavaScript Concepts You Need to Know | Read |
| 8 | Top 7 Tips for Managing State in JavaScript Applications | Read |
| 9 | π Essential Node.js Security Best Practices | Read |
| 10 | 10 Best Practices for Optimizing Angular Performance | Read |
| 11 | Top 10 React Performance Optimization Techniques | Read |
| 12 | Top 15 JavaScript Projects to Boost Your Portfolio | Read |
| 13 | 6 Repositories To Master Node.js | Read |
| 14 | Best 6 Repositories To Master Next.js | Read |
| 15 | Top 5 JavaScript Libraries for Building Interactive UI | Read |
| 16 | Top 3 JavaScript Concepts Every Developer Should Know | Read |
| 17 | 20 Ways to Improve Node.js Performance at Scale | Read |
| 18 | Boost Your Node.js App Performance with Compression Middleware | Read |
| 19 | Understanding Dijkstra's Algorithm: A Step-by-Step Guide | Read |
| 20 | Understanding NPM and NVM: Essential Tools for Node.js Development | Read |
Mastering these JavaScript tricks and tips will help you write cleaner, more efficient code and improve your development workflow. Happy coding! β¨
Follow and Subscribe:
- Instagram: devdivewithdipak
- Website: Dipak Ahirav
- Email: dipaksahirav@gmail.com
- YouTube: devDive with Dipak
- LinkedIn: Dipak Ahirav
Top comments (25)
This is a great article! However, you probably shouldn't use the spread operator to clone nested objects. Objects are references so a shallow clone with the spread operator will clone nested refs, not the objects. You should use
structuredClone()instead.Thanks @skamansam
Super helpful @dipakahirav! I like the series you made- you are a wonderful teacher. Currently working on a React JS project myself, and I found these tips really helpful!
π
Thank you so much for kind words. Means alot.
informative article
Great one. So satisfying to realize that I am using most of them, but still some good ones to include in my work
informative article
Thanks @michalispapamichael
Great insight links , and eye opening for junior and Senior develops.!
Kindly thanks
Your Welcome @kin7777
Great short summary!
Thanks @tomasdevs
Hey, a new to code and am learning JavaScript.
Great to hear you, All the best .
Great articles. Simpler and neat explanation.
Thanks @moglimanani
Cool!
I use everything except Short-Circuit Evaluation, I believe that's a feature to avoid. It's just too different from other programming languages out there and it requires implicit knowledge of what evaluates to truthy or falsy in JavaScript, which is a weird concept in itself (I generally think that loading up special values of classes meaning something else is a bad idea).
Just to note - provided examples for object cloning is not deep clone. Which means that if the object has nested arrays/objects - they will still have references to the original objects/arrays. lodash library has "cloneDeep" method which can achieve deep cloning
Correct. Shallow cloning copies references. Use Lodash cloneDeep for true copies.
Your article on JavaScript is excellent!
However, it seems to be missing a section on completely hiding JavaScript from the browser. If youβre interested, we can either add this content to your post or provide the text for you to include.
Can we also promote using TypeScript as a superscript of JS?
Concept of nullish coalescing explained very clean... Thanks
Some comments may only be visible to logged-in visitors. Sign in to view all comments.