What is the best aproach using ES6+ sintaxe to go from this:

const mapedTopicsArray = [
                            ['javascript', 'reactjs'],
                            ['Java', 'reactjs'],                   
                         ]

To this:

const topicsArrayMergedWithoutDuplicates = ['javascript', 'reactjs','Java']                   
                         

I know that if I use .reduce() I can aplish that, but I can't figure out how, the nested Array thing is bogging me.

What is the best aproach using ES6+ sintaxe to go from this:

const mapedTopicsArray = [
                            ['javascript', 'reactjs'],
                            ['Java', 'reactjs'],                   
                         ]

To this:

const topicsArrayMergedWithoutDuplicates = ['javascript', 'reactjs','Java']                   
                         

I know that if I use .reduce() I can aplish that, but I can't figure out how, the nested Array thing is bogging me.

• javascript
• arrays
• ecmascript-6

• 2 Look into array.flat(), Set() (the constructor specifically), and Array.from(). – Joseph Commented Nov 2, 2021 at 16:03

2 Answers 2

You can easily achieve the result using Set and flat.

const mapedTopicsArray = [
  ["javascript", "reactjs"],
  ["Java", "reactjs"],
];

const topicsArrayMergedWithoutDuplicates  = [...new Set(mapedTopicsArray.flat())];
console.log(topicsArrayMergedWithoutDuplicates );

const mapedTopicsArray = [
                            ['javascript', 'reactjs'],
                            ['Java', 'reactjs'],                   
                         ]


const result = mapedTopicsArray
    .reduce((acc, prev) => acc.concat(prev), [])
    .filter(ifThisItemFirstAppearance)

function ifThisItemFirstAppearance(value, index, self) {
    return self.indexOf(value) === index
}

console.log(result)

First reduce the list of lists into a list, then filter repeated items.

Partial credit to this answer on how to filter duplicates