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

Tips for controlling the size of a canvas element: setting minimum and maximum width and height properties

Tips for implementing personalized command buttons in Kendo Grid with AJAX request utilizing JavaScript

Encountering an Issue Executing Selenium Test on jQuery v2.0.2 and Play Framework

Can you identify the type of component being passed in a Higher Order Component?

Exploring the world of jQuery AJAX alongside Google's currency calculator

Ajax sends the URL location to Python

Create a receipt by utilizing jQuery with dynamically generated inputs

Is there a way to implement retry functionality with a delay in RxJs without resorting to the outdated retryWhen method?

Ways to incorporate a custom JavaScript function that is activated by an external server system?

"Ensure that the data in the div is being updated accurately via AJAX in ASP.NET MVC

Keep the multiselect dropdown list of the select component open

Show the image on top of the div block as the AJAX content loads

Style binding for background image can utilize computed properties or data for dynamic rendering

Tips for bypassing the 'server-only' restrictions when executing commands from the command line

Incorporating yarn into your Vue3 project with Typescript

Identifying Flash content in a unique way

Altering the "src" property of the <script> tag

What are the recommended TypeScript tsconfig configurations for running Node.js 10?

Utilizing the power of $.ajax() to parse through an XML document

Is there a way for me to properly type the OAuthClient coming from googleapis?