Tips for adding an item to an array within a Map using functional programming in TypeScript/JavaScript

Question

Tips for adding an item to an array within a Map using functional programming in TypeScript/JavaScript

As I embark on my transition from object-oriented programming to functional programming in TypeScript, I am encountering challenges. I am trying to convert imperative TypeScript code into a more functional style, but I'm struggling with the following snippet:

const foos: Map<
  string,
  Bar[]
> = new Map();

export const addBar = (
  key: string,
  bar: Bar
) => {
  const foo = foos.get(key);

  if (foo) {
    foo.push(bar);
  } else {
    foos.set(key, [bar]);
  }
};

While I grasp how to use methods like .map, .filter, and .concat on arrays, handling a Map that contains arrays is proving to be a challenge.

I am questioning whether the foos Map should be made read-only, along with the arrays of Bars inside it, which would mean that methods like .set and .push are not viable options. If modifying a read-only Map is not permissible, perhaps using an object instead of a Map would be more appropriate?

Without relying on mutability, I am unsure of how to add an element to an array within the values of the Map, or create a new map with an array if the specified key does not already exist. How can this be achieved in a functional manner?

Furthermore, I am concerned about performance. Given that I need to frequently add new elements to various arrays, will copying the entire map each time a change occurs have a significant impact on performance compared to traditional mutation methods?

javascript typescript functional-programming

Answer 1

Answer №1

Using the native Map is not recommended due to its imperative interface.

An alternative approach is to utilize a popular open source library such as ImmutableJS.

If you prefer, you can also create your own persistent (immutable) data structures. The key requirement is that operations on the data structure do not alter the original input. Instead, each operation should return a new data structure -

const PersistentMap =
  { create: () =>
      ({})
  , set: (t = {}, key, value) =>
      ({ ...t, [key]: value })      // <-- immutable operation
  }

Initially, we start with an empty map and observe the outcome of a set operation without modifying the initial map -

const empty =
  PersistentMap.create()

console.log
  ( empty
  , PersistentMap.set(empty, "hello", "world")
  , empty
  )

// {}
// { hello: "world" }
// {}

We then move on to a new state, m1. With each set call, a new persistent map is returned without affecting the previous state -

const m1 =
  PersistentMap.set(empty, "hello", "earth")

console.log
  ( m1
  , PersistentMap.set(m1, "stay", "inside")
  , m1
  )
// { hello: "earth" }
// { hello: "earth", stay: "inside" }
// { hello: "earth" }

To address additional use cases, we introduce a push operation to our PersitentMap, ensuring that the input remains unaltered. Here's one possible implementation -

const PersistentMap =
  { // ...

  , push: (t = {}, key, value) =>
      PersistentMap.set            // <-- immutable operation
        ( t
        , key
        , Array.isArray(t[key])
            ? [ ...t[key], value ] // <-- immutable operation
            : [ value ]
        )
  }

The effect of the push operation can be observed below. Note that neither m2 nor empty are altered during this process -

const m2 =
  PersistentMap.push(empty, "fruits", "apple")

console.log
  ( m2
  , PersistentMap.push(m2, "fruits", "peach")
  , m2
  , empty
  )

// { fruits: [ "apple" ] }
// { fruits: [ "apple", "peach" ] }
// { fruits: [ "apple" ] }
// {}

Expand the code snippet above to test the results in your web browser

const PersistentMap =
  { create: () =>
      ({})
  , set: (t = {}, key, value) =>
      ({ ...t, [key]: value })
  , push: (t = {}, key, value) =>
      PersistentMap.set
        ( t
        , key
        , Array.isArray(t[key])
            ? [ ...t[key], value ]
            : [ value ]
        )
  }

const empty =
  PersistentMap.create()

console.log
  ( empty
  , PersistentMap.set(empty, "hello", "world")
  , empty
  )
// {}
// { hello: "world" }
// {}

const m1 =
  PersistentMap.set(empty, "hello", "earth")

console.log
  ( m1
  , PersistentMap.set(m1, "stay", "inside")
  , m1
  )
// { hello: "earth" }
// { hello: "earth", stay: "inside" }
// { hello: "earth" }

const m2 =
  PersistentMap.push(empty, "fruits", "apple")

console.log
  ( m2
  , PersistentMap.push(m2, "fruits", "peach")
  , m2
  , empty
  )
// { fruits: [ "apple" ] }
// { fruits: [ "apple", "peach" ] }
// { fruits: [ "apple" ] }
// {}

Answer 2

Using the native Map is not recommended due to its imperative interface.

An alternative approach is to utilize a popular open source library such as ImmutableJS.

If you prefer, you can also create your own persistent (immutable) data structures. The key requirement is that operations on the data structure do not alter the original input. Instead, each operation should return a new data structure -

const PersistentMap =
  { create: () =>
      ({})
  , set: (t = {}, key, value) =>
      ({ ...t, [key]: value })      // <-- immutable operation
  }

Initially, we start with an empty map and observe the outcome of a set operation without modifying the initial map -

const empty =
  PersistentMap.create()

console.log
  ( empty
  , PersistentMap.set(empty, "hello", "world")
  , empty
  )

// {}
// { hello: "world" }
// {}

We then move on to a new state, m1. With each set call, a new persistent map is returned without affecting the previous state -

const m1 =
  PersistentMap.set(empty, "hello", "earth")

console.log
  ( m1
  , PersistentMap.set(m1, "stay", "inside")
  , m1
  )
// { hello: "earth" }
// { hello: "earth", stay: "inside" }
// { hello: "earth" }

To address additional use cases, we introduce a push operation to our PersitentMap, ensuring that the input remains unaltered. Here's one possible implementation -

const PersistentMap =
  { // ...

  , push: (t = {}, key, value) =>
      PersistentMap.set            // <-- immutable operation
        ( t
        , key
        , Array.isArray(t[key])
            ? [ ...t[key], value ] // <-- immutable operation
            : [ value ]
        )
  }

The effect of the push operation can be observed below. Note that neither m2 nor empty are altered during this process -

const m2 =
  PersistentMap.push(empty, "fruits", "apple")

console.log
  ( m2
  , PersistentMap.push(m2, "fruits", "peach")
  , m2
  , empty
  )

// { fruits: [ "apple" ] }
// { fruits: [ "apple", "peach" ] }
// { fruits: [ "apple" ] }
// {}

Expand the code snippet above to test the results in your web browser

const PersistentMap =
  { create: () =>
      ({})
  , set: (t = {}, key, value) =>
      ({ ...t, [key]: value })
  , push: (t = {}, key, value) =>
      PersistentMap.set
        ( t
        , key
        , Array.isArray(t[key])
            ? [ ...t[key], value ]
            : [ value ]
        )
  }

const empty =
  PersistentMap.create()

console.log
  ( empty
  , PersistentMap.set(empty, "hello", "world")
  , empty
  )
// {}
// { hello: "world" }
// {}

const m1 =
  PersistentMap.set(empty, "hello", "earth")

console.log
  ( m1
  , PersistentMap.set(m1, "stay", "inside")
  , m1
  )
// { hello: "earth" }
// { hello: "earth", stay: "inside" }
// { hello: "earth" }

const m2 =
  PersistentMap.push(empty, "fruits", "apple")

console.log
  ( m2
  , PersistentMap.push(m2, "fruits", "peach")
  , m2
  , empty
  )
// { fruits: [ "apple" ] }
// { fruits: [ "apple", "peach" ] }
// { fruits: [ "apple" ] }
// {}

Answer 3

Answer №2

When considering the approach to take in your code, it really depends on your end goal. If you value testability, Functional Programming (FP) offers more than just writing functions. While classes can still be used, separating complex pieces of code for testing purposes is a viable option. An example of this would look something like:

// types.ts
type FooDis = Record<string, object[]>;

// addBarToFoos.ts
export const addBarToFoos = (foos: FooDis) => (key: string, bar: object): FooDis {
  foos = {
    ...foos,
    [key]: [
      ...foos[key],
      bar
    ]
  };

  return foos;
}

// FooClass.ts 
export class FooClass {
  private foos: FooDis = {};

  addBar(key: string, bar: object) {
    this.foos = addBarToFoos(this.foos)(key, bar);
  }
}

This method allows for the isolated testing of "complex" code sections without external dependencies, while utilizing an implementation that incorporates said method.

Answer 4

When considering the approach to take in your code, it really depends on your end goal. If you value testability, Functional Programming (FP) offers more than just writing functions. While classes can still be used, separating complex pieces of code for testing purposes is a viable option. An example of this would look something like:

// types.ts
type FooDis = Record<string, object[]>;

// addBarToFoos.ts
export const addBarToFoos = (foos: FooDis) => (key: string, bar: object): FooDis {
  foos = {
    ...foos,
    [key]: [
      ...foos[key],
      bar
    ]
  };

  return foos;
}

// FooClass.ts 
export class FooClass {
  private foos: FooDis = {};

  addBar(key: string, bar: object) {
    this.foos = addBarToFoos(this.foos)(key, bar);
  }
}

This method allows for the isolated testing of "complex" code sections without external dependencies, while utilizing an implementation that incorporates said method.

Tips for adding an item to an array within a Map using functional programming in TypeScript/JavaScript

Answer №1

Answer №2

Similar questions

Issues with ng-show functionality occurring during the initialization of the webpage

In a responsive design, rearrange a 3-column layout so that the 3rd column is shifted onto or above the

Find distinct elements in an array of objects

Can we switch the country name to the database name in Jvector?

Create a dynamic HTML table in React by leveraging arrays

Tips on displaying data in pie chart legend using react-chartjs-2

Ensuring draggable div remains fixed while scrolling through the page

Is there a method to generate an endless carousel effect?

Struggling to decide on the perfect CSS selector for my puppeteer script

Within the ng-repeat loop, every switch button undergoes a status change

Getting started with Babylon.js using npm: A step-by-step guide

What is the proper way to import and define typings for node libraries in TypeScript?

The Slide Out Menu functioned properly in HTML, but it seems to be malfunctioning when implemented in PHP

How to determine if an Angular list has finished rendering

An Unexpected ER_BAD_FIELD_ERROR in Loopback 4

leaving code block using Express and Node

Looking to create a chat room on Google App Engine? Are there any demonstrations or examples available?

"Discover the process of incorporating two HTML files into a single HTML document with the help of

Storing Images in MySQL Database with JavaScript and Node.js: A Step-by-Step Guide

Guide on Developing a JavaScript Library