A guide on effectively utilizing the Map datatype in JavaScript

Recently, I've started delving into the world of es6 Map due to its unique features, but I have some reservations regarding pure operations.

For example, when removing properties from objects, I usually use the following function:

function cloneOmit( obj, props ) {
  const keys = !Array.isArray(props)
    ? Object.keys(obj).filter(k => k !== props)
    : Object.keys(obj).filter(k => !props.includes(k));

  return keys.reduce(
    (clone, key) => {
      return { ...clone, [key]: obj[key] };
    },
    {}
  );
}

I adapted this function to work with Maps as well:

function cloneOmitMap( map, keys ) {
  const oldKeys = Array.from(map.keys());
  const newKeys = !Array.isArray(keys)
    ? oldKeys.filter(k => k !== keys)
    : oldKeys.filter(k => !keys.includes(k));

  return newKeys.reduce((newMap, key) => {
    return newMap.set(key, map.get(key));
  }, new Map());
}

This solution works, but I'm unsure about its performance and effectiveness. While I appreciate Maps for their iteration capabilities (using Object.keys() repetitively can be cumbersome), maintaining order insertion, and allowing any value as a key, they don't seem as conducive to pure operations as plain Objects are.

For example, adding a property to an object purely can be done simply like this:

const object = { foo: 'bar' }
const newObject= { ...object, fooFoo: 'barBar' }

I'm curious if there are any lesser-known Map operations that could facilitate working with them in a more pure manner, or perhaps a utility library that might help. Any guidance would be greatly appreciated!

Answer №1

I would suggest utilizing the iterator interfaces of Maps. Although creating multiple temporary immutable Maps may not be as efficient as using them mutably, iterators are generally faster than handling everything through array conversions.

If you incorporate these helpful functions into your code, it could appear like this:

function cloneOmit(map, keys) {
  const predicate = Array.isArray(keys)
    ? Set.prototype.has.bind(new Set(keys))
    : k => k === keys

  return new Map(filter(map.entries(), ([key, value]) => !predicate(key)));
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a basic search functionality in an Express Node.js application

Recently, I decided to work on a project to enhance my coding skills. I wanted to create a simple search functionality where the URL would be "/search/(parameter here)" and display products whose names match the parameter. After writing a middleware for t ...

What is the best way to prevent a form from being submitted and conduct validation using JavaScript?

Encountered a form that is unchangeable in appearance: <form id="mx_locator" name="mx_locator" method="post" action="search-results"> <!-- form elements --> <span><input type="image" src="/images/search.png" onclick="loader()"> ...

Eliminate web address parameter using regular expressions

Looking to remove a specific URL parameter from a given URL. For instance, if the URL is: http://example.com?foo=bar&baz=boo And I want to eliminate foo=bar to get: http://example.com?baz=boo Or removing baz=boo would leave me with: http://exampl ...

What is the best way to reassign key-value pairs in JSON mapping using JavaScript/TypeScript?

Given {"a": {"name": "king", "firstname": "Thomas"},"b": {"age": "21"}} I'm exploring a simple way to convert it to {"name": "king","firstname": "Thomas","age": "21"} In the realm of Javascript/Angular. Any helpful suggestions are greatly appreci ...

How to Determine If a String Represents an HTML Tag Using jQuery

Checking if a string is an HTML tag can be tricky. I've tried various methods found on Google, but none have been successful so far: var v = $(string).html() ? 1 : 0; --or---------------------------------------------- var htmlExpr = new RegExp("/^( ...

Error: EsLint detected that the classname is not a valid Tailwind CSS class

I am encountering an EsLint error indicating that "className is not a TailwindCSS class" after incorporating custom classes like colors into my tailwind.config.js file. Despite this, I am unsure about how to resolve this issue. Shouldn't EsLint recogn ...

Tips for deleting a button from a DataTable file upload feature

I currently have Datatable set up to upload images using the code snippet below: { label: "Images:", name: "files[].id", type: "uploadMany", display: function ( fileId, counter ) { re ...

Unable to utilize jQuery's .append(data) function due to the need to use .val(append(data)) instead

I have been attempting to utilize JQuery .append(data) on success in order to change the value of an input to the appended data like this: .val(append(data)), but it doesn't seem to be working. Surprisingly, I can successfully change the value to a st ...

Restrict the Angular ng-repeat directive to specific rows only

Suppose we have a JSON dataset listing all languages of books: $scope.data = [{ "title": "Alice in wonderland", "author": "Lewis Carroll", "lang": ["en"] }, { "title": "Journey to the West", "author": "Wu Cheng'en", "lang": [" ...

Obtain the leaf nodes from a combination of arrays and objects using Lodash

Here is the code structure I want to share with you before explaining my requirements. It displays the input array layout along with the desired outcome: [ { link: "someurl", name: "Foo", subCats: [ { link: "anotherurl", ...

What is the correct way to implement the chain populate method in a Node.js application?

I am developing a blog application with node.js and react, utilizing MongoDB and Mongoose's .populate method to fetch data across collections. Currently, I have three collections: Post, User, and Category. Successfully, I managed to link the username ...

Determining when all promises have either been rejected or resolved using vanilla JavaScript promises

In an effort to transition to loading all resources in my web application asynchronously using basic JS promises, I have implemented a ScriptLoader function. Below is the code snippet for the ScriptLoader used to load .js files: function ScriptLoader() { ...

Converting UK DateTime to GMT time using Angular

I am currently working on an angular project that involves displaying the start and end times of office hours in a table. For instance, the office operates from 8:30 AM to 5:30 PM. This particular office has branches located in the UK and India. Since u ...

Determine if an element from the first array is present in the second array

I've encountered a challenge while building a simple react app and I could use some help. The Problem at Hand :- My goal is to compare items in firstArray (which contains separate dictionaries) with those in secondArray. While the loop for checking ...

Displaying the API request using the UseEffect API is not working upon the page

Sorry if this question has been asked before, but I’m really stuck on this small bug. I’m trying to display a collection of tweets from Firestore when the page loads, but currently it only works after a post request. Here’s my code: useEffect(() ...

Tips for addressing flickering issues when scrolling on your device

I am facing an issue with two elements that are set to a fixed position on the page. When these elements reach the bottom of the page, I want them to revert back to a static position using JavaScript. The problem occurs when trying to scroll by clicking a ...

Having trouble adding HTML content to a parent div using jQuery and BackboneJS?

Utilizing Backbone Marionette to create a series of views, I am now faced with the task of making an AJAX call to my backend. In order to provide visual feedback to the user indicating that an action is being performed, I decided to integrate a spinner int ...

Pressing a shortcut key will direct the focus to the select tag with the help of Angular

I was trying to set up a key shortcut (shift + c) that would focus on the select tag in my form when pressed, similar to how tab works. Here is the HTML code for my form's select tag: <select id="myOptions"> <option selected> Opti ...

I am encountering a problem with my Vuex getter where it is sending an Array with a length of 0, but when expanded in the console,

Currently, I'm utilizing Vuex to interact with a Django API in order to fetch count data. state: { DailyCycleDate: [] }, getters: { DailyCycleDate : state => { console.log('Getter') console.log('Length of Array: &apo ...

webpack encountered an issue: The configuration.module contains an unidentified property 'loaders'

Upon starting the server with npm run start, I encountered the following error message: ✖ 「wds」: Invalid configuration object. Webpack has been initialized using a configuration object that does not comply with the API schema. - Configuration cont ...