JavaScript is a powerful, flexible language, and knowing a few cool tricks can make your code cleaner, faster, and more efficient. Below are 20 practical JavaScript tips and tricks that you can use in real-world applications to enhance your development process.
1. Destructure and Rename in One Step
You can rename variables during object destructuring, which is helpful when there are naming conflicts.
const user = { name: 'Alice', age: 25 };
const { name: userName, age: userAge } = user;
console.log(userName); // Alice
console.log(userAge); // 25
2. Optional Chaining with Function Calls
Optional chaining can be used with functions, ensuring the function exists before itβs called.
const user = {
getName: () => 'Alice',
};
console.log(user.getName?.()); // Alice
console.log(user.getAge?.()); // undefined
3. Use ||= Operator for Default Assignment
The logical OR assignment (||=) assigns a value only if the variable is null or undefined or falsey value like 0.
let count;
count ||= 10;
console.log(count); // 10
4. Convert NodeList to Array Using Spread Operator
The spread operator provides a quick way to convert a NodeList to an array.
const divs = document.querySelectorAll('div');
const divArray = [...divs];
console.log(Array.isArray(divArray)); // true
5. Array/Object Destructuring with Default Values
Assign default values during destructuring to avoid undefined when keys are missing.
const user = { name: 'Alice' };
const { name, age = 25 } = user;
console.log(age); // 25
6. Remove Falsy Values from an Array
Use filter() to remove falsy values (like 0, null, undefined, false) from an array.
const arr = [0, 'hello', null, 42, false, 'world'];
const filtered = arr.filter(Boolean);
console.log(filtered); // ["hello", 42, "world"]
7. Sorting Arrays of Objects by Property
Easily sort an array of objects by a specific property.
const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 20 }];
users.sort((a, b) => a.age - b.age);
console.log(users); // [{ name: 'Bob', age: 20 }, { name: 'Alice', age: 25 }]
8. Dynamic Imports for Lazy Loading
Dynamic imports allow you to load modules only when needed, reducing initial load time.
const loadModule = async () => {
const module = await import('./myModule.js');
module.default(); // Calls the default export function
};
loadModule();
9. Default Parameters with Object Destructuring
When using default parameters, you can also destructure and set defaults for specific properties.
function createUser({ name = 'Guest', age = 18 } = {}) {
console.log(name, age);
}
createUser(); // Guest 18
createUser({ name: 'Alice' }); // Alice 18
10. Use Object.assign() for Shallow Copying
Object.assign() is handy for shallow-copying objects without changing the original.
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
copy.a = 3;
console.log(original.a); // 1 (unchanged)
Follow me on github:
Jagroop2001 (Jagroop) Β· GitHub
π¨βπ» Full Stack Developer | π€ Machine Learning Developer | π€ Dev Relations Pro β πΌ Available for Hire - Jagroop2001
github.com
Jagroop2001 (Jagroop) Β· GitHub
π¨βπ» Full Stack Developer | π€ Machine Learning Developer | π€ Dev Relations Pro β πΌ Available for Hire - Jagroop2001
github.com
11. Memoize Functions for Performance
Memoization caches results of expensive function calls based on arguments, useful for computationally heavy functions.
const memoize = (fn) => {
const cache = {};
return (...args) => {
const key = JSON.stringify(args);
if (!cache[key]) {
cache[key] = fn(...args);
}
return cache[key];
};
};
const slowSquare = (n) => n * n;
const memoizedSquare = memoize(slowSquare);
console.log(memoizedSquare(4)); // 16 (cached on second call)
12. Using reduce to Group Array Items
reduce() can group array items based on a property, often needed in data processing.
const people = [
{ name: 'Alice', role: 'admin' },
{ name: 'Bob', role: 'user' },
{ name: 'Charlie', role: 'admin' },
];
const grouped = people.reduce((acc, person) => {
(acc[person.role] = acc[person.role] || []).push(person);
return acc;
}, {});
console.log(grouped);
// { admin: [{ name: 'Alice' }, { name: 'Charlie' }], user: [{ name: 'Bob' }] }
13. Flatten Nested Arrays with Array.flat(Infinity)
Flattening multi-level nested arrays becomes straightforward with Array.flat(Infinity).
const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]
14. Toggle Boolean Value with !
Toggling a boolean value is as easy as applying the NOT operator twice.
let isVisible = false;
isVisible = !isVisible;
console.log(isVisible); // true
15. Merge Multiple Arrays with concat()
concat() is helpful for merging multiple arrays in a single statement.
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const merged = arr1.concat(arr2, arr3);
console.log(merged); // [1, 2, 3, 4, 5, 6]
16. Asynchronous Array Iteration with for...of and await
When iterating over an array of promises, for...of with await ensures that each promise resolves before the next one runs.
const fetchData = async () => {
const urls = ['url1', 'url2'];
for (const url of urls) {
const response = await fetch(url);
console.log(await response.json());
}
};
17. Get the Last Item in an Array Quickly
Retrieve the last item in an array without needing to know the length.
const arr = [1, 2, 3, 4];
console.log(arr.at(-1)); // 4
18. Use Intl for Date Formatting
Intl.DateTimeFormat offers a powerful way to format dates across locales.
const date = new Date();
const formatted = new Intl.DateTimeFormat('en-GB', {
dateStyle: 'full',
}).format(date);
console.log(formatted); // e.g., "Monday, 25 October 2021"
19. Round Numbers with Math.round() and Template Literals
Template literals can format rounded numbers directly.
const num = 3.14159;
console.log(`${Math.round(num * 100) / 100}`); // 3.14
20. Convert Array-Like Objects to Arrays Using Array.from()
Use Array.from() to convert array-like objects (e.g., arguments) into real arrays.
function example() {
const argsArray = Array.from(arguments);
console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3]
Each of these tricks simplifies common coding patterns in JavaScript. Integrate them into your workflow to write code that is both efficient and expressive.
Happy coding! π
Top comments (70)
This one is very new to me :
I really want such kind of functionality and till now I thought it doesn't exist but thanks to use. Now I don't require extra check for undefined or null value.
This is very very useful to me and also other tips as well.
Thanks for sharing @jagroop2001
I recommend using
??=Nullish Coalescing Assignment rather that Logical OR assignment unless you specifically want to exclude falsy values rather than just nullish.@oculus42 ,
Great recommendation! Using
??=(Nullish Coalescing Assignment) is indeed a better choice when you want to assign values only if the left-hand side isnullorundefined, excluding other falsy values. It helps avoid unintended overrides when falsy values like0or''are present. Thanks for highlighting that distinction! If you have more tips, feel free to share!Thanks @hraifi , I also learn this from one of my senior.
I find your all blogs to be quite informative.
β€οΈ
Yeah, I actually have never use that before either, I usually use ?? for a fallback value if I expect something maybe undefined/null.
@jovian ,
That makes sense! The ?? operator is great for providing fallback values, especially when you want to handle undefined or null specifically
This is ninja code; you should avoid such practices in projects. Writing code that is easily readable at a glance is important.
It's your choice!!
Same here i have never seen this ||= or this ??=
Isnβt the new copy in trick 10 is a deep copy instead of a shallow copy? Shallow copies have the references to the original objects. Deep copies are deep cause there is no reference left in them and you can modify them without changing the originals.
Try
It's a shallow copy because nested objects stay referenced. For deep copies you should use
structuredClone()Yes, you are totally right. With nested objects the result will be shallow copy but the example is still a deep copy. Object.assign can create deep and shallow copy based on the original object. The article has beginner hashtag on it and by the context of the trick I felt that the description is not showing example what it originally aimed for. π
You're wrong.
Source: developer.mozilla.org/en-US/docs/W...
Nope. I think the problem here is that the example show the deep copy side of this new object with primitive properties. It's clearly says "without changing the original" but it can change the original if it had nested property. Yes, it's a useful trick if someone want to modify the primitive properties of a copy but the statement is not true for all use cases. For an article with the #beginner tag it's not so straightforward in my opinion.
Source: developer.mozilla.org/en-US/docs/G...
@rolandcsosz ,
Great observation! The new copy in Trick 10 does indeed create a deep copy, as it avoids references to the original objects. Shallow copies only replicate the first level, retaining references to nested objects. Thanks for clarifying that distinction! Itβs an important detail for understanding how data is managed in JavaScript. If you have any more thoughts, Iβd love to hear them!
The
||=Operator from Trick 3 would be perfect for Trick 12, really a missed opportunity and classic example of "Do as I say, not as I do" hahaha@khankudo ,
Haha, that's a great point! The
||=operator would definitely fit well in Trick 12. Itβs a classic case of learning from our own mistakes, right? Thanks for the feedback! If you have any other ideas or tweaks, Iβm all ears!On item 11, it is worth noting that function memorisation only really works for pure functions. If external state is modified and has the potential to impact the output, the cached values cannot be trusted.
Pure functions: same input => same output.
Thanks for pointing it out π
For 19 you don't need to use a template literal, you can just
console.log(Math.round(num * 100) / 100);directly@skhmt ,
You're absolutely right! Using
console.log(Math.round(num * 100) / 100);is a straightforward way to round the number without the extra complexity of a template literal. Thanks for pointing that out! Always good to streamline the code. If you have more insights, feel free to share!Can't you just do
num.toFixed(2)?Yes, using
num.toFixed(2)is definitely an option. I prefer this in TypeScript, but keep in mind that it changes the number to a string. If you need to convert it back to a number, you'll have to do that separately, which can be a bit cumbersome.Also you can allow for decimal precision:
Thanks! Must save as kind of a cheat-sheet.
I have this one coming up in PRs to turn big arrays to maped object (or a
Map):Also, for 12 (grouping an array) we have
Object.groupBy()coming up πThere's a difference between a Map and an Object.
Yes there is !!
Of course. I meant that creating a Map would look pretty similar:
const mapped = new Map(array.map((item) => [item.id, item]));Nice @idanen , sounds like you've got some great refactoring going on!
What's the use of this
Dynamic Imports for Lazy Loading?. Is it provide any benefit ?Hey @john12 ,
Dynamic imports allows us to load modules only when needed,
reducing the initial load timeandimproving app performance.This on-demand loading enhances user experience by ensuring faster interactions and reducing the overall bundle size.
It also enables code splitting, making it easier to manage and optimize your application efficiently.
ohh okay, got it.
Thank you for this wonderful explanation.
your welcome @john12
improve performance
On number 12, you can now just use Object.groupBy, developer.mozilla.org/en-US/docs/W... - however, reduce is extremely powerful and that example is a good example where you need to perform other operations on the grouped data.
@olivergrimsley ,
Absolutely! With
Object.groupBy, itβs become much simpler to group data in one line. But you're rightβusing reduce allows for more complex operations on the grouped data, making it a valuable tool in many situations. Both approaches have their merits, depending on the use case. Thanks for pointing that out! If you have more insights, Iβd love to hear them!Nice points, some of them has more modern alternatives like using spreading instead of
Object.assignand array concat orObject.groupByinstead of using reduce workaround.Using
||=for default values can cause unintended misbehaviors so mentioning??=is would be nice ππ»Thanks @mehyaa for sharing your thoughts!!
Thanks for sharing @jagroop2001 Your function is really new for me , and it's also helpful ,
If I need a background removal service color code which one is perfect for me
Thanks @robertjameszenith for the kind words! π ,
As per my understanding,
If you want something with background removal in JavaScript, a tip is to use
canvasto manipulate imagesβapplyingctx.clearRecton areas you want transparent works well. You can also use libraries likefabric.jsorremove.bgAPI for more complex removals.If it's not what you are looking for please explain your query in detail ?
@jagroop2001 thank you for trying to understand my problem, yes remove bg is automatically remove any kind of photo, but remove.bg do not remove hair photo smoothly. I want to know you how can i implement remove background transparent background with color code in Zenith Clipping front page .
what is the latest code
Okay, I understand your problem however I haven't collide with such type of issue before. remove bg works in my case but you can try
pix2pix with TensorFlow.jsif remove bg doesn't work. @robertjameszenithThank you , If i face some problem i will contact you , please never mind
Sure @robertjameszenith
Look at those bots go... π€£
Some comments may only be visible to logged-in visitors. Sign in to view all comments.