An alternative solution for flatmap in JavaScript

Question

An alternative solution for flatmap in JavaScript

Searching for a workaround for flat map not working on IE led me to this solution, but the reasoning behind it eludes me.

var gadjets = [
  {computers:['asus', 'hp'],
  sellphones:['Galaxy', 'Nokia']
  },

  {computers:['dell', 'insys'],
  sellphones:['iphone', 'samsung']
  }
];

const getValues = gadjets.reduce((acc, gadjet) => acc.concat(gadjet[computers]), []) // instead of gadjets.flatMap(gadjet=> gadjet[computers])

The output of this code snippet is:

['asus','hp','dell','insys']

But shouldn't it actually return:

['asus','hp'],['dell', 'insys']

javascript arrays ecmascript-6 flatmap

Answer 1

Answer №1

The reason for this behavior is that the reduce function in JavaScript accumulates or adds up the values provided to it. To illustrate, consider the following code snippet:

let numbers = [1, 2, 3, 4, 5];
console.log(numbers.reduce((total, num) => total + num));

In this example, each number is added to the running total, which is then passed on as a new total to the next iteration of the reduce function.

What you were doing in your code was passing an entire array into the accumulation process through acc, and then concatenating a new array using elements from gadgets['computers']. This effectively creates a combined list of computer items from an array of objects.

For more detailed information about the reduce method, you can refer to the documentation here.

Answer 2

The reason for this behavior is that the reduce function in JavaScript accumulates or adds up the values provided to it. To illustrate, consider the following code snippet:

let numbers = [1, 2, 3, 4, 5];
console.log(numbers.reduce((total, num) => total + num));

In this example, each number is added to the running total, which is then passed on as a new total to the next iteration of the reduce function.

What you were doing in your code was passing an entire array into the accumulation process through acc, and then concatenating a new array using elements from gadgets['computers']. This effectively creates a combined list of computer items from an array of objects.

For more detailed information about the reduce method, you can refer to the documentation here.

Answer 3

Answer №2

However, shouldn't the outcome be different

I am uncertain about what you are attempting to demonstrate, but if you are referring to the following:

[['asus','hp'],['dell', 'insys']]

In that case, the result should not be like that. concat merges the arrays you provide into a single level:

const a = [].concat(['asus','hp'], ['dell', 'insys']);
console.log(a); // ["asus", "hp", "dell", "insys"]

Thus, acc.concat(gadjet[computers]) combines all the computers arrays into one new array, which is the accumulation result of the reduce.

Answer 4

However, shouldn't the outcome be different

I am uncertain about what you are attempting to demonstrate, but if you are referring to the following:

[['asus','hp'],['dell', 'insys']]

In that case, the result should not be like that. concat merges the arrays you provide into a single level:

const a = [].concat(['asus','hp'], ['dell', 'insys']);
console.log(a); // ["asus", "hp", "dell", "insys"]

Thus, acc.concat(gadjet[computers]) combines all the computers arrays into one new array, which is the accumulation result of the reduce.

Answer 5

Answer №3

If you're looking to get the output as an array of arrays, give this a try:

var electronics = [
  { laptops: ["MacBook", "Dell"], smartphones: ["iPhone", "Samsung"] },
  { laptops: ["HP", "Lenovo"], smartphones: ["Google Pixel", "OnePlus"] }
];
const groupItemsBy = key => {
  let result = electronics.reduce((objectsByKeyValue, obj) => {
               let arr = [];
               arr.push(obj[key]);
               return objectsByKeyValue.concat(arr);
        }, []);
   return result;
};
console.log(groupItemsBy("laptops"));

Answer 6

If you're looking to get the output as an array of arrays, give this a try:

var electronics = [
  { laptops: ["MacBook", "Dell"], smartphones: ["iPhone", "Samsung"] },
  { laptops: ["HP", "Lenovo"], smartphones: ["Google Pixel", "OnePlus"] }
];
const groupItemsBy = key => {
  let result = electronics.reduce((objectsByKeyValue, obj) => {
               let arr = [];
               arr.push(obj[key]);
               return objectsByKeyValue.concat(arr);
        }, []);
   return result;
};
console.log(groupItemsBy("laptops"));

An alternative solution for flatmap in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing a JavaScript function to toggle the Bootstrap dropdown without the need for manual clicking

Using @click within a Vue.js component does not trigger any response or action

Transmitting information through ajax and fetching it using Request.Form[""]

Adding a namespace in a .js file

Initiating a GET request to retrieve the file generated by the server

What sets apart .andReturn(...) from .respondWith(...) when running AJAX call tests in JavaScript using Jasmine?

Exploring promises with loops and patience?

Finding the main page URL using PHP within a JavaScript include: A comprehensive guide

Troubleshooting issues with JSON data in d3 Sankey charts

Issue with accessing Vue.js parameter in route

Optimal method of creating and initializing store items in Vue using Vuex

problem with increasing/decreasing buttons in a react application

The array containing prime numbers fails to display its contents accurately

Switch the minimum value in a NumPy array with a different value

Modifying a variable in $rootScope data will also update other instances of $rootScope data

What is the method for ensuring that a GreaseMonkey script impacts elements on a page prior to their appearance?

Guide on transferring value from a <select> element using JavaScript

Switch up the side navigation panel display

What is the best method for aggregating multiple JSON responses into a single array?

Setting up a software from a GitHub source