Using javascript array.reduce to remove duplicates

Question

I am new to javascript and I am having a bit of challenge learning it myself from web tutorials. Please help me to solve the problem below.

Problem:

Write a function that takes two or more arrays and returns a new array of unique values in the order of the original provided arrays.

In other words, all values present from all arrays should be included in their original order, but with no duplicates in the final array.

The unique numbers should be sorted by their original order, but the final array should not be sorted in numerical order.

Use only Array.reduce to solve this ! This is what your solution should look like:

function unite(arr1, arr2, arr3) {
  return arr1;
}

unite([1, 2, 3], [5, 2, 1, 4], [2, 1]);

I am not able to understand how I can use reduce here. All the internet examples are so easy compared to this. https://www.airpair.com/javascript/javascript-array-reduce http://adripofjavascript.com/blog/drips/boiling-down-arrays-with-array-reduce.html

My wrong solution:

function arrayDiff(resultArray, element){
    var idx = anotherArray.indexOf(element);
    if(idx != -1){
        resultArray.push(element);
        return resultArray;
    }
}

function unite(arr1, arr2, arr3) {
    var arr = [];
    var r1 = arr1.reduce(arrayDiff);
    var r2 = arr2.reduce(arrayDiff);
    var r3 = arr3.reduce(arrayDiff);
    arr.concat(r1).concat(r2).concat(r3);
    return arr;
}


r = unite([1, 2, 3], [5, 2, 1, 4], [2, 1]);
console.log(r);

Error: ReferenceError: anotherArray is not defined

well, that's because anotherArray is not defined. What that variable is supposed to refer at? — zerkms
– zerkms, Commented Aug 10, 2015 at 21:02
Yes, anotherArray is not defined. What did you expect it to be? — Bergi
– Bergi, Commented Aug 10, 2015 at 21:03
@Bergi - I just saw the example here - var sum = [1, 2, 3].reduce( function(total, num){ return total + num }, 0);. Looks like total is the result variable. So, I followed that example and made anotherArray as my result variable. This is confusing. — stack1
– stack1, Commented Aug 10, 2015 at 21:05
If you look again on the example you provided you will notice that total is the first argument. — zerkms
– zerkms, Commented Aug 10, 2015 at 21:06
@Bergi yep, already realized that and decided to remove it at all — zerkms
– zerkms, Commented Aug 10, 2015 at 21:20

Paul Boutes · Accepted Answer · 2017-02-06 21:49:24Z

7

To handle multiple array parameters, you can use arguments. Thanks to that, your function can take N parameters, it is more generic.

Then, you can flat all your array parameters, and start to reduce your data. When you will reduce our array, you will create a new array by excluding redundant data. So you will start with an empty array, and you will populate it through the reduce process.

  function unite(){
    //Flat array arguments, then process to reduce data
    return [].concat.apply([], arguments).reduce(function(result, current){
      //If my result array doesn't get current element
      return result.indexOf(current) === -1
      //concat current element to result and return it
      ? result.concat(current)
      //Otherwise, just return actual result array
      : result;
    }, []);
  }

  var array = unite([1,2], [1,6,2,3], [4,5]);

  console.log(array);
  //[1,2,6,3,4,5]

EDIT 06/02/2017:

Now, you can use the spread operator in order to handle multiple parameters, by destructuring the assignment for example. Moreover, we can improve performance by using the indexOf() operation with the bitwise operator ~.

function unite(...data) {
  return [].concat.apply([], data).reduce((result, current) => {
    return ~result.indexOf(current)
    ? result
    : result.concat(current)
  }, []);
}

console.log(unite([1,2,3], [1, 4, 4, 5, 6]));

edited Feb 6, 2017 at 21:49

answered Aug 10, 2015 at 22:53

Paul Boutes

3,3152 gold badges21 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter Over a year ago

I pretty much wrote the exact same solution, but I'll just up-vote yours :)

Bergi · Accepted Answer · 2015-08-10 21:36:08Z

1

I think you wanted to check whether the element is already in the resultArray, not in some anotherArray. With that, it could kinda work:

function arrayDiff(resultArray, element){
    var idx = resultArray.indexOf(element);
    if (idx == -1) { // add only when not already found in the result array
        resultArray.push(element);
    }
    return resultArray; // always return the resultArray even if we didn't add to it
}

function unite(arr1, arr2, arr3) {
    var r0 = [];
    var r1 = arr1.reduce(arrayDiff, r0); // supply some start accumulator argument
    var r2 = arr2.reduce(arrayDiff, r1); // and pass the results through so that
    var r3 = arr3.reduce(arrayDiff, r2); // duplicates are filtered amongst all arrays
    return r3;
}

edited Aug 10, 2015 at 21:36

answered Aug 10, 2015 at 21:08

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

7 Comments

stack1 Over a year ago

Did not understand this - supply some start accumulator argument

Bergi Over a year ago

@stack1: You know what the second parameter of reduce does, don't you?

zerkms Over a year ago

@stack1 btw, this solution does not solve your original task (but that's good, now you have chance to improve it)

Bergi Over a year ago

@stack1: Yes, that one. We start with the empty array, then reduce over the first arr1 to get all non-duplicate values from there, then we reduce with that result as the starting values over arr2 to add the values that are not already in there, etc

Bergi Over a year ago

@zerkms: Did you mean the !=? Not intentional :-)

|

Robert Tudor · Accepted Answer · 2017-05-16 09:42:31Z

0

This is my solution, a lot cleaner/shorter:

function uniteUnique(arr) {
  var args = Array.from(arguments);
  var test = [];

  for ( var i = 0; i < args.length; i++ ) {
    for (var j = 0; j < args[i].length; j++ ) {
      if ( test.indexOf(args[i][j]) == -1 ) {      
          test.push(args[i][j]);
      }
    }
  }

  return test;
}

uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]);

answered May 16, 2017 at 9:42

Robert Tudor

171 gold badge2 silver badges9 bronze badges

Comments

Rahul Thakur · Accepted Answer · 2020-04-27 15:31:17Z

0

My solution

function unique(array) {
  return array.reduce(function(results,currentItem){ 
    //using array include
    return results.includes(currentItem)? results: [...results,currentItem];

    //using array find
    //return results.find(function(result){return currentItem===result})?results:[...results,currentItem];
  },[]);
}

edited Apr 27, 2020 at 15:31

answered Apr 27, 2020 at 15:11

Rahul Thakur

413 bronze badges

Comments

bradrice · Accepted Answer · 2023-04-25 14:50:35Z

0

Reduce is very powerful, but can be confusing. Make sure you always initialize the accumulator and return the accumulator from the reducer function.

    let originalArray = [[1,2], [1,6,2,3], [4,5]];

    let arrayFiltered = originalArray.reduce((acc, arrayvalue) => {
      arrayvalue.forEach(item => {
        if(acc.indexOf(item) === -1) {
        acc.push(item);
      }})
      return acc;
    }, []);

  console.log(arrayFiltered); //[1, 2, 6, 3, 4, 5]

The value of each number is checked inside the forech loop, if it exists in the accumulator, if not it is pushed in.

https://jsfiddle.net/bradrice/bq84wry2/1/

answered Apr 25, 2023 at 14:50

bradrice

1,8173 gold badges26 silver badges50 bronze badges

Collectives™ on Stack Overflow

Using javascript array.reduce to remove duplicates

5 Answers 5

1 Comment

7 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related