Forem: Muhammad Hasnain

Design Pattern: Singleton - Probably the easiest explanation!

Muhammad Hasnain — Mon, 16 Aug 2021 07:03:07 +0000

What is Singleton?
Implementation.
When to Use?
An Anti-pattern?

What is Singleton?

Singleton is a design pattern that falls under the category of creational design patterns. Creational design patterns are associated with the simple creation of objects.

Singleton itself ensures that at any given point during the software's runtime, there should be only one instance of an object. Usually, this object is available to the software, globally.

Implementation

Before we talk about when to use it, let's quickly implement it and then we can try to understand the nitty-gritty details.

class Database {
  private static $instance;

  private function __construct() {
    // Connect to database
  }

  static function get_instance(): Database {
    if (is_null(self::instance)) {
      self::instance = new self();
    }

    return self::instance;
  }
}

If you look at the implementation, you see that the constructor is made private in order to prevent you from creating new instances of the class because database connections in a large system may be expensive.

We use private and static variable instance to store the instance of the Database class.

Using the get_instance static method, we access the instance of the Database class, if in case the instance does not exist, we make sure that it does and then return the instance of the class.

When to Use?

Use the singleton pattern only when you need an object to have a single instance throughout your software's runtime. From the example above, you can see that a connection to database is usually required only once.

Any other such expensive operations or global configurations should use singleton but beware that singleton is also called, "An Anti-pattern." It should be almost always be avoided.

An Anti-pattern?

Singleton is one of the patterns that is easy to understand and use. Thus, it may encourage engineers (at least new ones) to overuse it. It should be used only if there is no alternative solution.

Singleton also encourages the use of global variables. For any engineer to keep track of global variables, it increases cognitive load for them. Such cognitive load may lead to poor software. More on cognitive load and psychology later.

Besides, singleton is more or less, a unique instance of a global variable. It can introduce unnecessary restrictions, make unit tests a pain since they may rely on inheritance among other things.

Some call singleton pattern an "evil pattern." Design patterns in general are agreed upon solutions to commonly recurring problems. Systems may use it when there is a good reason to do so, thus knowing this pattern is essential.

Four Ways to Clone Array with Ease! Easiest Method to Clone Array.

Muhammad Hasnain — Fri, 30 Jul 2021 09:16:51 +0000

Visit my personal blog for more awesome content. hasnain.dev

Unlike primitive types, arrays cannot be cloned by simply assigning them to another variable, doing that only stores reference in another variable. Fear not! There are plenty of ways in which you can make a new copy of an array using four methods!

Array.concat

const fruits = ['🍎', '🍌', '🍐']

const cloned = fruits.concat([])

Array.from

const fruits = ['🍎', '🍌', '🍐']

const cloned = Array.from(fruits)

Array.slice

const fruits = ['🍎', '🍌', '🍐']

const cloned = fruits.slice()

Spread Operator

const fruits = ['🍎', '🍌', '🍐']

const cloned = [...fruits]

Best Practice

Some of these aren't best practice. It really depends on what you're trying to achieve. For instance, Array.from converts iterables into an array. Array.concat concatenate two arrays. Array.slice gives you a part of an array and the spread operator simply spreads an array into argument list.

Best practice depends on what purpose you are using these methods for.

Dynamic Module Pattern for JavaScript! Dynamically load JavaScript bundles.

Muhammad Hasnain — Fri, 30 Jul 2021 07:21:13 +0000

Original post on my personal blog. hasnain.dev

Note: Please make sure that you are already aware of the code-splitting and dynamic import mechanism. This pattern is module bundler agonistic as long as it provides code splitting and dynamic import features. With some work, you can have own implementation of this pattern.

Users often leave a website in about 10 to 20 seconds as soon as they visit it. Slow websites increases bounce rate. If a website is slow and have a high bounce rate, it will inevitably drop the website ranking. Besides, even if it maintains good score, users will have no choice but to leave the website after a few seconds.

If performance of a website is an utmost priority, we may implement lazy loading of images, use picture elements, use caching, CDN, among tons of other optimization techniques. However, the problem that I noticed was that people were struggling with loading JavaScript on demand.

Hand-picking JavaScript libraries has its own problems. For instance, we might need to include different script tags for each page that makes use of certain markup or library. This can lead to clutter and maintenance issues. Some may have an arbitrary implementations that may or may not work under certain conditions. Even Google Tag Manager can be cumbersome.

In order to solve this problem, I introduce...

The Dynamic Module Pattern

The Dynamic Module Pattern is a pattern where you define, right in your markup, what associated JavaScript modules should be loaded. Suppose, you have a slider module in your app that makes use of the library called, flickity.js. When you include the markup, the dynamic module pattern will load appropriate JavaScript bundles for it and if you completely remove the slider, no JavaScript will be loaded. You don't have to worry about manually removing it.

This not only takes away the headache of micromanaging libraries in your markup using script tags or a list of if statements in case you are using a templating engine. Another great thing about this pattern is that you don't really need to worry about where the markup is coming from as long as certain attributes are defined (See explanation section on more benefits).

For instance, it could be a Shopify snippet or section. A WordPress post or shortcode, Laravel or Node based server-side sites using templates, static sites, this pattern also work perfectly with all of them. Unless of course, your development environment already provides a code-splitting mechanism like create-react-app or vue-cli, in which case you don't really have to worry about this.

How Does it Work?

I'll provide the code snippets and after that I'll explain what's going on. I'm using this pattern for a WordPress theme that uses WebPack and Svelte. The same can be done for React or Vue especially if you are making isolated snippets or widgets. The Shortcode provides user the ability to give it a module name and the associated JavaScript bundle will be loaded for it. Magic! 🎩

Markup

<div data-module="slider"></div>

JavaScript

const modules = Array.from(document.querySelectorAll('[data-module]'));

modules.forEach((module) => {
  const componentName = module.getAttribute('data-module');

  import(`./components/${componentName}.svelte`)
    .then((component) => {
      if (component && component.default) {
        new component.default({
          target: module,
        });

        console.log(`${componentName}.svelte loaded.`);
      }
    })
    .catch((error) => {
      console.warn(`${componentName}.svelte failed to load.`, error);
    });
});

Explanation

The HTML is quite simple. We define a simple HTML div element with the attribute of data-module which is also the name of the component aka file that we need to import in order to bring this component to life. This element is simply the root element for svelte slider component.

The JavaScript is however, interesting. It first fetches all the elements present in DOM that have the data-module attribute defined. It loops through all those elements and for each single one, it gets the data-module attribute.

After that, it tries to dynamically import a certain component that exists in the components folder (./components/{component-name}.extension). If the component is successfully loaded, we're notified instantly. If the component is not present or fails to load, we receive a warning.

The best thing about this pattern is that I can add and remove this markup or I can use it multiple times in my page. This pattern will make sure that the appropriate JavaScript is loaded or not loaded.

Does this load JavaScript bundles multiple times if I make use of the data-module several times in the page markup? Please, keep reading. I'll answer that soon!

Without Module Bundlers?

You can definitely modify this pattern to fit your needs. For instance, you can use intersection observers and or events like key events, mouse events, hover, scroll and what not to dynamically load JavaScript. Imagine, you can prefetch or pre-connect components on user events and fetch them whenever they are needed. 🚀

Like I said, you can use this pattern without module bundlers. You can implement the Dynamic Module Pattern using a custom import statement that can load JavaScript from CDN or locally from your own website. However, keep in mind that this may not be as easy as you think. There are several problems that you need to keep in mind.

Caveats With Custom Implementations

Repeated data-module Elements: If an element repeated more than once, a naïve implementation will dynamically load script tags for each individual element. For instance, if an element is used in four places that makes use of bundles that weight about 80 KBs, you've just downloaded 320 KBs of JavaScript!

Dependencies: This is a major issue with custom implementations. Module bundlers can easily nest or map out the dependency tree but in custom implementation, any bundle that is imported must be and need to be available at a global scope, unless they are isolated containers that one does not really need to worry about.

This also begs the question of, "What if I need to load flickity.js and then my custom JavaScript in order to make my slider functional?" This is an actual issue. You'd have to handle the dependency tree on your own which is not a simple task IMO.

Caveat With Original Implementations

Parallel Scripts Loading: This pattern can be definitely tweaked in order to support parallel script loading. Right now, my method does not support that. For instance, you can load Vue along with your custom JavaScript bundle for which Vue is a dependency. As soon as they are both loaded, you appropriately initialize them by passing Vue as a parameter.

Bonus: Naïve Custom Implementation

This is just for fun in case you want to test things about without the headache of setting up a module bundler!

const customImport = (src) =>
  new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.async = true;
    script.onload = resolve;
    script.onerror = reject;
    document.body.appendChild(script);
  });

const modules = Array.from(document.querySelectorAll('[data-module]'));

modules.forEach((module) => {
  const componentName = module.getAttribute('data-module');

  // This could be anything, CDN or a local asset.
  customImport(`${componentName}.extension`)
    .then(function() {
        // script context IE window.Vue etc
    })
    .catch((error) => console.warn('failure', error));
});

Let me know if you found Dynamic Module Pattern helpful. Please, do share your thoughts on this, I would love to hear how this might help you. Please, make sure to react and share this too. Thank you for reading!

Cover image credits: **Anthony Shkraba* from Pexels*

What is your go-to state management library? No frameworks!

Muhammad Hasnain — Tue, 13 Jul 2021 22:25:36 +0000

Hello.

What is your go-to state management library? I know we can use redux without React and I have. Redux is such an amazing tool. But, are there any alternatives? PS, if possible, also share how the library you mentioned saved your bum.

I remember I was working on a project where I was not going to use any JavaScript frameworks. Somewhat complex google maps system for a WordPress multisite. For each site we used to input the associated shop/branch coordinates and then polygon information for coverage area.

Since, there were over 25 sites, I cached all the settings in a new table that I had created in order to fetch all the data in a single query instead of changing the "blog", fetching that information for that specific site and changing it again.

The data was complex but I handled it beautifully. After I was done, I thought only if I had used Redux in order to make state management super super easy! My project did use custom observers, immutable data and selectors. Replacing that with Redux would've meant that other developers would've started with it like real easy!

Anyways, thanks for reading this post. Give me some awesome recommendation and also, how the library you mentioned saved you bum! Thanks!

How to lazy-load images? The easiest way to lazy-load images on your website! 🖼

Muhammad Hasnain — Sat, 05 Jun 2021 00:38:39 +0000

Lazy-loading is the simple process of loading resources only when they are needed. These resources can be anything, from images to stylesheets, fonts, scripts, iframes etc.

This helps improve the performance of your website drastically because client does not have to download the images, videos and other resources when they aren't required. 🥳🎈

We're going to use the package called, "Lozad." To lazy-load images. Lozad. will only add 1 KB to your production 📦! Check out Bundlephobia 😱 for more info.

We're only going to lazy-load images but Lozad can handle lazy-loading for srcsets, background images, videos and iframes too. So, let's include the package and start hacking! 🪓

npm i lozad

Include Lozad in your entry or main JavaScript file. Alternatively, you could use Lozad CDN if you don't have module bundler set up.

import lozad from 'lozad';

// Makes sure to run the library when DOM loads.
document.addEventListener('DOMContentLoaded', () => {
   /**
   * This is all you need to do!
   * Check the link for advanced usages.
   * https://www.npmjs.com/package/lozad
   */
   lozad().observe();
});

By default, Lozad will look for elements with class, "lozad". When the element is about to enter the viewport, Lozad takes the data-src or other such Lozad related attributes and assigns it to the src attribute to load the image.

<img class="lozad" data-src="https://example.com/img.jpg" />

That's it, you've successfully added support for lazy-loading 🎉🧨🎊!

Best practice would be to leave the images that are in the header and lazy-load only the ones that are below the initial viewport.

Challenge!

Use Lozad to lazy-load a background image and video!

Thoughts?

Please, share your thoughts and experiences as to how lazy-loading improved your website. PS, are you guys interested in me writing about lazy-loading using vanilla JavaScript? Let me know in the comments, thank you!

NodeJS Worker Thread on EC2 Instance with single thread?

Muhammad Hasnain — Fri, 21 May 2021 17:44:06 +0000

Hi!

I'm not a 100% familiar with NodeJS workers and clusters. I know that we can make use of multiple threads which is amazing to say the least.

I'm working on a small personal project that I've hosted on an free EC2 instance and I see that there is one CPU and one thread available. Is there then any benefit of using worker threads?

Also, why does the NodeJS Cluster documentation fork a cluster for a single CPU instead of a thread?

Thanks!

How would you tackle this NodeJS project?

Muhammad Hasnain — Wed, 19 May 2021 15:11:26 +0000

Hello!

I work at a startup and have been working on a cool project NodeJS based project. Even though, it is a WordPress position, when I'm free, I take my time to work on interesting projects. Given what we're trying to achieve in this soon-to-be proprietary system, I noticed optimization issues with it. I tried bombarding the endpoints with 200 requests at a time and pm2 monit showed a few issues.

Before I talk about the pm2 stats, I would like to talk about what the system actually does. We sent a domain name to our endpoint, for example, say, dev.to. The endpoint makes an entry to database and it emits an event to analyze that website. The endpoint quickly does what it is supposed and sends back a 200 response but the process afterwards takes a lot of time as it involves HTTP requests a huge sets of things it needs to analysis the website for, a long with Puppeteer, potentially a lot of loops with hundreds, if not thousands of iterations.

What I talked about above, resulted in at almost 100% of CPU usage in PM2 stats, the heap was almost 100% too, EventEmitter gave us memory leaks warnings. Given that there is no queue or in-memory DS like Redis, I think the event loop was overwhelmed with 200 requests at the same time which involves a lot of processing! I'm not happy with the results and will present issues further down the road.

NOTE: Keep in mind that the slow process I am talking about takes place on an app level. The ExpressJS route only emits and event to start the process for that specific domain that it just saved into the database. I did this because there was no need to keep a user waiting for 10 seconds!

I discussed this with my boss and he encouraged me to take time and ask for help around the community. This is why I am here! Have you worked on such a project? If so, how did you handle it? What would you recommend me to do in this case? Should I go for cronjobs instead of event based system? Would really appreciate an answer.

Thank you! Also, if you have any questions regarding the project, let me know and I shall answer them.

Introducing Browsermeta: Debugging made (super) easy!

Muhammad Hasnain — Mon, 22 Mar 2021 19:14:36 +0000

Sometimes you write code that runs exactly as you expected but fails to run for a client on their machine. Even though your code may pass all tests and runs correctly for you on your system and machine, it may still fail because the non tech savvy client may be using an outdated browser, a different browser vendor, machine with drastically different resolutions, extensions, lives in a different time zone.

Such issues are hard to debug because you might not be expecting them. It can be very cumbersome to ask client about their machine and browser especially if the client is a non tech savvy and or a busy person. There are many tools that monitors your code, send logs to the cloud and generate reports but non tools that gives you information about the client's machine and browser.

As a startup, we've faced such issues. Once, we created some popups that were not being shown to the client apparently AdBlock extension was blocking our popup even though the popup did not contain any advertisement. Another such issue occurred due to client's time zone because of which the time based filter that we created failed to filter data properly, we then opted to using moment.js to solve that problem.

Such issues will always occur and can be very easily solved if we have more information and understanding of what system the client is relying or and using. That is why we created Browsermeta. Browsermeta is a completely free tool that collects information about the client's machine and browser, which is uploaded to the cloud and gives them a link which they can share with you.

You can download Browsermeta extension from chrome web store.

You can not only see the browser and its version that the client is using, but also a screenshot of where they are currently on the page, along with information about their screen, OS, stylesheets, scripts, browser extensions that are current in use and current URL. Other than the basic information, clients can choose not to share a screenshot, screen information, stylesheets, scripts, browser extensions and current URL.

The extension and the website are in its very early and beta stages. It is completely free and adheres firmly to keep the privacy of the clients/users safe. We plan on adding tons of features like error monitoring, authentication, private links and give users a general and absolute control over their data.

However, keep in mind that most of the data that you find in the 'meta sessions' are generally available in the browser. The problem is that the client cannot simply go to the inspect tools to collect all the information or give you a list of the extensions they are using. Even as a developer, it can be hard to look for all the script tags, stylesheets and other such things for debugging.

We'd love it if you could check the extension, use it and provide us with valuable feedback. Browsermeta is in its early beta stages. We plan on adding many features to it.

Thanks!

How I became a web developer in a year without a degree, a bulletproof method.

Muhammad Hasnain — Mon, 01 Feb 2021 18:52:24 +0000

Preface
Need for Clarity
Inverse Goal Setting (The Bulletproof Method)
Consistency + Time

Preface

In life you need either inspiration or desperation. ~ Tony Robbins

Three months into my first semester I had to leave the university as it was clear we couldn't afford it. My father lost his business and we essentially became poor. With no education and a degree, I was rejected from a ton of places. I am a good teacher, I am really good with computers but non of that mattered.

In Pakistan, parents pay for their children's education until they get a degree. You cannot earn enough without a degree or get student loans either. Without any degree your chances of having a good and respectable job or a status in society are pretty low.

Looking at my peers, getting rejected and even being kicked out of an internship hurt me and made me angry too. It was a really tough time in my life where I lost, not only the chance to get a good education but friends too and I became extremely depressed.

I had made a decision nevertheless and I committed to it. I used all my "negative emotions" to drive me towards my goals. "Revenge" aside, in the end, it is all about having a better life not only for yourself but for your family too.

I did became a web developer and now I have one year and eight months of total experience. I do not possess any degree and or certifications.

Today, I'm going to share with you how I became a web developer in a year without any degree. What I'm about to share does not only applies to this field but to all other engineering and technical fields. Usually, in these fields employees require you to have a certain set of technical skills and these skills are measurable, both quantitively and qualitatively.

Clarity

The best time to have a map is before you enter the woods. ~ Brendon Burchard

Clarity is perhaps one of the most important thing you can have in your life. When you are clear about what is it that you exactly want, you have an edge over other people. You can divert all of your attention and energy towards the attainment of that goal.

Remember, this concept of clarity that we're talking about will not only make you a web developer but also a better person. This is an invitation to you to lead a life that has been examined rather than the one that is reactive and lived according to what other people expect of you.

Be precisely clear on what you want because a lot of people climb the proverbial ladder of success, only to realize that it was leaning against the wrong wall.

Inverse Goal Setting (The Bulletproof Method)

Do you want to become a web developer? Let's suppose you want to become a front-end developer. What you need to do is to google this term, "front-end jobs" and you will get a list of front-end jobs, easy as that.

What you need to do after that is to click on the job posts and look at the skills they're expecting from their candidates. Usually they'll contain things like HTML, CSS, JavaScript, SASS, ReactJS/VueJS/AngularJS. Write these skills down.

Go through as many posts as you can and write all the skills they require. Some of them may contain something unique and different, like a project management tool or a certain library. You may write those down too without any worry.

After that what you would need to do is to look for a pattern. What set of skills do you see being repeated in almost all of the job posts? For us, these skills should be repeated, "HTML, CSS, JavaScript, SASS and ReactJS." You may ignore things like RxJS, Bugherd or other such tools and libraries which are just mentioned a handful of times.

At this point, you should've figured out the pattern. The tools and languages that are essential for you to learn in order to land that specific job.

What we just did is what I call, "Inverse Goal Setting." I was thinking of a clever name but honestly, this is much better than "Inverse Back Tracking." I'm cringing really hard right now, haha.

Anyways, now that you know what skills you need, you can start your research on what to learn first and what comes latter. You make a map of sorts. In our example, we want to become a front-end developer. I would start with HTML and CSS and learn them before heading into SASS which is an intermediate concept. I will start with JavaScript before I head into TypeScript, Angular or React which are advanced tools and libraries.

As soon as you're done with that, you need to start taking action! Udemy, YouTube, e-books, FreeCodeCamp all of these platforms contain all the knowledge you need to become a front-end or back-end developer.

Study, make lots and lots of projects on your own. Sure, there are a lot of code-along project videos that you can watch and code along with but you also need to create something on your own. You need to take the concepts and apply them as you understand them, it will help you learn more than anything else.

After you learn most of the things that were on your list and you have projects online and your code is on Github, you are pretty much ready to start applying for jobs. Since, this isn't an interview advice post, I am not going to discuss data structures, algorithms, clean code etc.

Consistency + Time

Consistency is the key to mastery! If you want to become good at something, you need to spent large chunks of your time doing that thing on a daily basis, even when no one is looking and especially when no one is looking!

Ronaldo used to wear weights on his ankles and kick football for hours. Elon Musk used to work 120 hours in a single week and no wonder he is running multiple companies. There are tons of other such success examples.

It is in the moments of decisions that our destiny is shaped. ~ Tony Robbins

All such success stories have similar patterns, certain habits that they all had. They decided what they wanted, they trained and worked for hundreds of hours every single week or month for years. They trained when no one was looking, they trained when they felt like giving up and became depressed.

I had similar experience too. Studying for 12+ hours each day there were days when I completely burnt up and when I became depressed and really uncertain at times and questioned myself but I had made my mind and I was going to do it. It may become extremely hard at times but you keep at it anyway.

It is your decision to work hard on a daily basis that separates you from the crowd. In the end, the crowd will notice your success and cheer you on, they always do. Your critics becomes your supporters, but they will never see how hard you worked and that is okay because I think we're all like that unless we choose to gain awareness of self and choose to look closely and study successful people.

Conclusion

Know what you want! If you want to be a front-end developer or back-end developer, android developer or a game developer. Checkout job posts for that specific title and note down all the skills, tools and libraries they want from their desired candidate. Figure out what set of skills, tools and libraries are being repeated, viola, you now have a pattern. Make a sensible plan and get to work! Work hard, be consistent and be patient.

UPDATE: I'm really grateful to you all and very glad that this post served as an inspiration to many. This is my Linkedin profile if you guys want to connect. Have a great day!

Easiest way to convert HTMLCollection into an Array!

Muhammad Hasnain — Mon, 11 Jan 2021 12:03:02 +0000

There are two ways in which you can convert an HTMLCollection or a NodeList into an array.

If you don't know what an HTMLCollection and a NodeList is, or why you would need to convert them into a normal Array, hold tight, I'll explain them soon enough! 🐢

// First, pre-ES6 way.
var htmlCollection = document.getElementsByClassName('btn');
htmlCollection = Array.prototype.slice.call(elements);

// Or you could do the same thing using ES6 syntax.
var nodeList = document.querySelectorAll('.btn');
nodeList = [...nodeList];

// Or use Array.from method as suggested by Traek Wells in comments. 😎
var imageHtmlCollection = document.getElementsByTagName('img');
imageHtmlCollection = Array.from(htmlCollection);

// 🎉🎉

What is HTMLCollection and NodeList?

When you use methods like getElementsByClassName or querySelectorAll they return an HTMLCollection or NodeList respectively instead of an Array.

HTMLCollection contains HTML elements whereas NodeList goes a few steps further, it not only returns a list of HTML elements but can also return Nodes like TextNode and has additional methods list NodeList.forEach.

For a more detailed discussion on the topic, you may read this stackoverflow post called: The difference between HTMLCollection, NodeList and Array.

Why convert them into an Array?

The only reason to convert an HTMLCollection and NodeList to an Array is, if you want to use higher order functions like forEach, map, filter and reduce.

There are a lot of use cases, for instance, let's say you have elements that contain a data-src property along with lazy-load class. If you want to access the data-src and filter out all the elements that don't have data-src or are empty, you may do the following.

Use Case

var lazyLoadables = [...document.querySelectorAll('.lazy-load')]
  .filter((element) => element.getAttribute('data-src').trim());

lazyLoadImages(lazyLoadables);

By doing this, you made sure only to pass the elements that have a source that needs to be loaded when it is required.

Custom Google Maps styles, with night mode! 🌒

Muhammad Hasnain — Wed, 06 Jan 2021 10:50:25 +0000

Dark mode has become a trend in modern day websites (pun intended, i'm so funny 🤪). Recently, I worked on a project where we had a highly customized Google Map. There were a lot of Map and DOM interactions along with styling. A lot went into it. 🥴

While studying how to style Google Maps, I stumbled across a very good resource that gives you readymade Google Maps styles, including Night Mode.

Introducing, Google Maps Styling Wizard! 🎊🎉

How To 🐱‍👓

Literally, select any style you want and click on the Finish button. It gives styles for the selected map theme in JSON format. After that, all you have to do is this.

const map = new google.maps.Map(element, {
  styles: [...], // Paste your styles here!
});

Of course, make sure to set appropriate zoom level, position coordinates and API keys etc.

PS, the JSON formats are also a good way to learn how to style your maps. For more info, look into the official Google Map styling guide.

Easiest way to convert JavaScript object to map!

Muhammad Hasnain — Fri, 01 Jan 2021 16:05:30 +0000

const person = {
  name: 'Hasnain',
  age: 22,
  profession: 'Web Developer',
};

const map = new Map(Object.entries(person));

console.log(map);

When and why to use Map over Object? 🤔

There are a lot of excellent people like you, with tons of knowledge out there writing awesome answers! Here is an amazing stackoverflow post I found that explains just that! 🎉🎊

You are lazy 🥴

I know you are lazy like me (every good developer should be), so I'd like to briefly describe the difference between Object and Map. With that information, be the judge of when to use which! 😎

According to Mozilla:

A Map's key can be any value, including primitive types, objects and functions.

You can use for...of loop to iterate Map in the insertion order, meaning what you first inserted will be the first element to show up in the loop and so on.

Just as Array have length property, Map comes with a size property.

Performs better when a lot of insertion and removal operations are involved.