DEV Community

20 JavaScript Tricks Every Developer Must Know 🚀

Jagroop Singh on October 28, 2024

JavaScript is a powerful, flexible language, and knowing a few cool tricks can make your code cleaner, faster, and more efficient. Below are 20 pra...

Read full post

sewiko • Oct 28

This one is very new to me :

let count;
count ||= 10;
console.log(count); // 10

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

Samuel Rouse • Oct 28

I recommend using ??= Nullish Coalescing Assignment rather that Logical OR assignment unless you specifically want to exclude falsy values rather than just nullish.

Jagroop Singh • Oct 29

@oculus42 ,
Great recommendation! Using ??= (Nullish Coalescing Assignment) is indeed a better choice when you want to assign values only if the left-hand side is null or undefined, excluding other falsy values. It helps avoid unintended overrides when falsy values like 0 or '' are present. Thanks for highlighting that distinction! If you have more tips, feel free to share!

Jagroop Singh • Oct 28

Thanks @hraifi , I also learn this from one of my senior.

sewiko • Oct 28

I find your all blogs to be quite informative.

Jagroop Singh • Oct 28

❤️

Nick A • Oct 29

Yeah, I actually have never use that before either, I usually use ?? for a fallback value if I expect something maybe undefined/null.

Jagroop Singh • Oct 29

@jovian ,
That makes sense! The ?? operator is great for providing fallback values, especially when you want to handle undefined or null specifically

Berat Yilmaz • Nov 1

This is ninja code; you should avoid such practices in projects. Writing code that is easily readable at a glance is important.

Jagroop Singh • Nov 1

It's your choice!!

anirudh7065 • Oct 30

Same here i have never seen this ||= or this ??=

Roland Csősz • Oct 28 • Edited

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.

Red Ochsenbein (he/him) • Oct 29 • Edited

Try

const original = { a: { c: 1 }, b: 2 };
const copy = Object.assign({}, original);
copy.a.c = 3;
console.log(original.a.c); // 3 (changed!)

It's a shallow copy because nested objects stay referenced. For deep copies you should use structuredClone()

Roland Csősz • Oct 29

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. 😅

Red Ochsenbein (he/him) • Oct 29 • Edited

You're wrong.

For deep cloning, we need to use alternatives like structuredClone(), because Object.assign() copies property values.
If the source value is a reference to an object, it only copies the reference value.

Source: developer.mozilla.org/en-US/docs/W...

Roland Csősz • Oct 29

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.

The copy of an object whose properties all have primitive values fits the definition of both a deep copy and a shallow copy.

Source: developer.mozilla.org/en-US/docs/G...

Jagroop Singh • Oct 29

@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!

KhanKudo • Oct 28 • Edited

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

Jagroop Singh • Oct 29

@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!

Tracy Gilmore • Oct 29

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.

Jagroop Singh • Oct 29

Thanks for pointing it out 👍

Mike • Oct 28

For 19 you don't need to use a template literal, you can just console.log(Math.round(num * 100) / 100); directly

Jagroop Singh • Oct 29

@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!

Iain Simmons • Oct 29

Can't you just do num.toFixed(2)?

Jagroop Singh • Oct 29

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.

Bondt • Nov 10

Also you can allow for decimal precision:

const round = (num, dec = 2) => { return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec) }```

Idan Entin • Oct 31

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):

const mapped = Object.fromEntries(
  array.map((item) => [item.id, item])
)

Also, for 12 (grouping an array) we have Object.groupBy() coming up 🎉

Rich Winter • Nov 1

There's a difference between a Map and an Object.

Jagroop Singh • Nov 2

Yes there is !!

Idan Entin • Nov 2

Of course. I meant that creating a Map would look pretty similar: const mapped = new Map(array.map((item) => [item.id, item]));

Jagroop Singh • Oct 31

Nice @idanen , sounds like you've got some great refactoring going on!

john • Oct 28

What's the use of this Dynamic Imports for Lazy Loading?. Is it provide any benefit ?

Jagroop Singh • Oct 28

Hey @john12 ,
Dynamic imports allows us to load modules only when needed, reducing the initial load time and improving 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.

john • Oct 28

ohh okay, got it.
Thank you for this wonderful explanation.

Jagroop Singh • Oct 28

your welcome @john12

huiguang xian • Oct 28

improve performance

Mike Oliver • Oct 28

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.

Jagroop Singh • Oct 29

@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!

Mehmet Yasin AKAR • Nov 1 • Edited

Nice points, some of them has more modern alternatives like using spreading instead of Object.assign and array concat or Object.groupBy instead of using reduce workaround.

Using ||= for default values can cause unintended misbehaviors so mentioning ??= is would be nice 👍🏻

Jagroop Singh • Nov 1

Thanks @mehyaa for sharing your thoughts!!

Robert James • Oct 28

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

Jagroop Singh • Oct 28

Thanks @robertjameszenith for the kind words! 😊 ,
As per my understanding,
If you want something with background removal in JavaScript, a tip is to use canvas to manipulate images—applying ctx.clearRect on areas you want transparent works well. You can also use libraries like fabric.js or remove.bg API for more complex removals.

If it's not what you are looking for please explain your query in detail ?

Robert James • Oct 28

@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

Jagroop Singh • Oct 28

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.js if remove bg doesn't work. @robertjameszenith

Robert James • Oct 28

Thank you , If i face some problem i will contact you , please never mind

Jagroop Singh • Oct 28

Sure @robertjameszenith

Red Ochsenbein (he/him) • Oct 29

Look at those bots go... 🤣

Andrew Baisden • Oct 31

So many of these are useful I use a few all the time.

Jagroop Singh • Oct 31

Good to know @andrewbaisden

caga • Nov 1

Each tip is very useful.

Jagroop Singh • Nov 1

Thansk @paxnw

jocedeo • Oct 30 • Edited

Great tips from ChatGPT...

(tip: try and change the name ChatGPT gives, Alice is reserved for ChatGPT examples)

Jagroop Singh • Oct 31

Olay @jocedeo1 but it's not taken from ChatGPT it's from my experience.

About why I choose name Alice because recently I am doing leetcode basically dynamic programming questions and name Alice is frequently used in a series of it.

Also nowadays, it's easy to say it's GPT based blogs but in reality I dedicated time to this and put my all efforts to list it down with my full time job and other do's.

Liyakat Pathan • Oct 30

Informative content

Jagroop Singh • Oct 30

Thanks

Ciphernutz IT Services • Oct 30

Great list

Jagroop Singh • Oct 30

Thanks @ciphernutz

Web • Oct 30

High quality content for java-script !!

Jagroop Singh • Oct 30

Thanks !!

Serhiy • Oct 29

some of them are new to me! thanks!!!

Jagroop Singh • Oct 29

Your welcome 🙏

Wizard • Oct 28

Great list and covering all essentials tricks for any js developer

Jagroop Singh • Oct 29

Thanks @wizard798 ! I'm glad you found the list helpful

Lutfur rahman • Oct 31

thanks for sharing

Jagroop Singh • Oct 31

You're welcome

Tracy Gilmore • Nov 11

I have a few more points on this article.

15. Merge Multiple Arrays with concat()

There are a couple of alternatives to using Array.concat to combine the values from multiple arrays. There is little to pick between them as they all achieve the same result.

Alternative 1: Using the spread syntax: const merged = [...arr1, ...arr2, ...arr3];

Alternative 2: Using the Array.flat method: const merged = [arr1, arr2, arr3].flat();

11. Memoize Functions for Performance

I am sure the functions in this article are more for tutorial purposes and not necessarily for production, but there is an important point to make regarding the use of JSON methods (stringify and parse).

Given what might otherwise appear to be valid input, both methods can throw exceptions. See the following MDN articles for specific details: JSON.stringify and JSON.parse. It is therefore important to guard against such hazards where the source of data is not absolutely known and trusted.

While we are considering JS tricks, I have one for accessing values (properties) from similar objects. I.e., Object with the same property.

There is a technique that can help when dealing with object properties called lenses. This is a simple nested function that first takes the name of the property of interest and returns a new function. The second function expects an object and returns the value of the property for the given object.

// This is a very simple implementation
function lens(propertyName) {
return obj => obj[propertyName];
}

So how can this help?
A more sophisticated version would take more than just a top-level property name but could provide an easy method of consistently referencing a deeply nested value from multiple objects..

const PROPERTY_DECONSTRUCTION = /\]?\??\.\[?|\]?\[|\]/;
const PROPERTY_STRING_OR_ARRAY_DIGITS = /^(\"([^"]{1,1000})\")|(\d{1,10})$/;
const removeWrappingDoubleQuites = str => str.replaceAll(/^"|"$/g, '');
const lensReducer= (ob, pr) =>
    PROPERTY_STRING_OR_ARRAY_DIGITS.exec(pr)
      ? ob[removeWrappingDoubleQuites(pr)]
      : ob?.[pr];


function lens(...props) {
  const _props = props
    .join('.')
    .split(PROPERTY_DECONSTRUCTION)
    .filter(item => item !== '');
  return obj => _props.reduce(lensReducer, obj);
}

Nozibul Islam • Oct 29

I'm glad you found the JavaScript shortcuts helpful! If you need more specific shortcuts or tricks, especially for any particular task in JavaScript or a particular framework, feel free to ask. It’s a pleasure to share helpful insights!

Jagroop Singh • Oct 29

Greg, The JavaScript Whisperer • Oct 31

3) is cool but it feels like a code smell.

Everything else is gold!

Jagroop Singh • Nov 2

Thanks @jswhisperer