Logo

dev-resources.site

for different kinds of informations.

Refactoring chronicles: Extract unique values from an array of objects

Published at
3/18/2019
Categories
refactoring
codereviews
es6
javascript
Author
dvddpl
Author
6 person written this
dvddpl
open
Refactoring chronicles: Extract unique values from an array of objects

Quick note out of a code review I made today.
Use-case was extracting the list of all unique IDs out of all the rows of a CSV file.

After loading the CSV and parsing, the array looked like this:

const rows = [
  {"id":1,"date":"03.03.2019","otherProps":483},
  {"id":2,"date":"22.02.2019","otherProps":573},
  {"id":3,"date":"11.03.2019","otherProps":645},
  {"id":4,"date":"03.03.2019","otherProps":483},
  {"id":2,"date":"08.03.2019","otherProps":573},
  {"id":4,"date":"26.02.2019","otherProps":645},
  {"id":5,"date":"13.03.2019","otherProps":483},
  {"id":3,"date":"22.01.2019","otherProps":573},
  {"id":1,"date":"01.03.2019","otherProps":645}
];
Enter fullscreen mode Exit fullscreen mode

implementation in the Pull Request was this:

const findUnique = (arr) => {
  return arr.reduce((acc, row) => {
            if (typeof row.id === 'number' && acc.indexOf(row.id) < 0) {
                acc.push(row.id)
            }
            return acc
        }, [])
}
Enter fullscreen mode Exit fullscreen mode

I really appreciated that the dev tried to use reduce here but as useful and cool reduce is, I found the code too verbose.

IMHO a more readable solution might have been first estracting only the IDs to remove the clutter and then filter for the first occurence of each and ignore the duplicates.

const findUnique = (arr) => arr.map(r => r.id).filter((id, i, ar) => ar.indexOf(id) == i)
Enter fullscreen mode Exit fullscreen mode

but my suggestion was this magical es6 trick that would make that function a one-liner

const findUnique = (arr) => [ ...new Set(arr.map(r => r.id))]
Enter fullscreen mode Exit fullscreen mode

What is this doing?
We are extracting via map the IDs and creating a Set with the result.
Since as stated in the docs A value in the Set may only occur once; it is unique in the Set's collection. all duplicates are automagically removed.
Then using the ... operator we convert the Set back into an Array.

tadaa

PS: Always be cautious when using map reduce filter and other magick tricks ( like here the conversion of an Array into a Set and back) because with very big arrays performance might be affected. In such case, it is best to sacrifice readability and coolness and execute all the necessary operation in a single loop so that array is traversed only once.

PPS: Always have Unit Tests for your methods so that when trying out other solutions you are sure your code still works as intended.

import test from "ava"
test('return list of unique IDs', t => {
    const expected = [1, 2, 3, 4, 5]
    const result = findUnique(rows);
    t.deepEqual(result, expected)
}
Enter fullscreen mode Exit fullscreen mode

You can play around with the code and try out other solutions with this CodePen

codereviews Article's
30 articles in total
Favicon
The Right Time to Approve a Pull Request: Embracing Improvement Over Perfection
Favicon
How one line of code caused a $60 million loss 📉😓
Favicon
Better Coding Practices / Python / Part-1
Favicon
Code Reviews are bottlenecks. What is the point of Code Reviews?
Favicon
Code Review chronicles: destructuring, linting and one valid reason for Typescript
Favicon
Harmless code and Obvious code - a Code Review Chronicles about Date validation
Favicon
5 JavaScript Static Analysis Tools
Favicon
Top 7 Static Code Analysis Tools
Favicon
Improving Pull Request Process with Complexity Labels
Favicon
Why do code reviews?
Favicon
Check that spelling, please! (code review chronicles)
Favicon
A simple thing I learned during a code review: Tagged templates
Favicon
Keep your Ego away from coding
Favicon
How to get your code reviewed faster
Favicon
How To Start Reviewing Code
Favicon
Refactoring chronicles: Extract unique values from an array of objects
Favicon
Refactoring chronicles: spread operator, map, reduce.
Favicon
How to make good code reviews and win colleagues?
Favicon
Code Reviews Are Awesome, Here Are 7 Reasons Why
Favicon
Time to level up Code Reviews
Favicon
Sane office environment with code review guidelines
Favicon
Git branching done right with Gitflow & improving code quality with code reviews
Favicon
What I Learned From a Single Lesson using Exercism.io
Favicon
An Ode to Code Reviews
Favicon
Code reviews
Favicon
KCDC 2019 and Best Practices for Code Reviews
Favicon
Effective code reviews: a primer
Favicon
The taste of Python
Favicon
Imperfect Code
Favicon
Writing Code That Makes Your Teammates Lives Easier

Featured ones: