What To Do When You Don’t Care

(About Finding Items in Arrays)
[What Do You Care About?]

About Mike Frazier

Software Engineer @ Quizlet

Hack Reactor Remote

Former educator

Recent skateboarder

Music stuff too and junk

Twitter: @AFrazGuy

DenverDevs: @frazier

Blog: mikedoescoding.com

some

findIndex

lastIndexOf

includes

indexOf

find

ES5

ES6+

Note About Examples

Examples for object arrays are parsing for specific key-value pairs

 

To compare object to object, a workaround is to "stringify" the objects and compare strings

 

Repl available with some examples: https://bit.ly/2Lj2ZPV

I just care about getting back the index of the item!

Array.prototype.indexOf
Array.prototype.lastIndexOf

Returns the index of the found item

Returns -1 if no item is found

 

Considerations

  • Works really well for primitive values
  • Uses a strict equality check (===)
  • Won't find NaN

Array.prototype.indexOf
Array.prototype.lastIndexOf

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

let foundIdx = arr.indexOf(3); // 2

let lastFoundIdx = arr.lastIndexOf(3); // 5

let idxNotFound = arr.indexOf(7); // -1

let arr2 = [ { id: 1 }, { id: 2 }, { id: 3 } ];

let willNotWork = arr2.indexOf({ id: 2 }); // -1

Array.prototype.findIndex

Return the index of the found item that passes the comparator function
Returns -1 if no item is found


Considerations

  • Returns the first item that passes the comparator
  • Visits every index in the array -- even those without an assigned value
  • Have to explicitly check for NaN

Array.prototype.findIndex

let arr = [
  { id: 1, color: 'red' },
  { id: 2, color: 'blue' },
  { id: 3, color: 'green' },
];

let foundIdx = arr.findIndex(item => item.color === 'blue'); // 1

let notFoundIdx = arr.findIndex(item => item.id === 4); // -1

let arr2 = [ 'hearts', 'stars', 'horseshoes', 'clovers' ];

let starsIdx = arr2.findIndex(item => item === 'stars'); // 1

I just care about getting back the item!

Array.prototype.find

Returns the found item that passes the comparator function

Returns undefined if no item is found


Considerations

  • Returns the first item that passes the comparator
  • Visits every index in the array -- even those without an assigned value
  • Have to explicitly check for NaN

Array.prototype.find

let arr = [
  { id: 1, color: 'red' },
  { id: 2, color: 'blue' },
  { id: 3, color: 'green' },
];

let foundItem = arr.find(item => item.color === 'red'); 
  // { id: 1, color: red }

let notFoundItem = arr.find(item => item.id === 4); // undefined

let arr2 = [ 'hearts', 'stars', 'horseshoes', 'clovers' ];

let starsItem = arr2.find(item => item === 'stars'); // 'stars'

I just care that the item might exist!

Array.prototype.some

Returns true/false if any item in the array passes the comparator function

As soon as function returns truthy, loop is exited

Skips over indices without assigned values


Considerations

  • Changing values or adding indices are not tested/visited once some is invoked

Array.prototype.some

let arr = [
  { id: 1, color: 'red' },
  { id: 2, color: 'blue' },
  { id: 3, color: 'green' },
];

let foundItem = arr.some(item => item.color === 'red'); // true

let notFoundItem = arr.some(item => item.id === 4); // false

let arr2 = [ 'hearts', 'stars', 'horseshoes', 'clovers' ];

let starsItem = arr2.some(item => item === 'stars'); // true

Array.prototype.includes

Return true/false if the item is in the array

Uses SameValueZero algorithm for comparison

 

 

 

Considerations

  • Works really well for primitive values
  • Kind of like strict (===) equality
  • -0 / +0 are the same
  • NaN is NaN

Array.prototype.includes

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

let found = arr.includes(3); // true

let notFound = arr.includes(7); // false

let nanFound = arr.includes(NaN); // true

let arr2 = [ { id: 1 }, { id: 2 }, { id: 3 } ];

let willNotWork = arr2.includes({ id: 2 }); // false

But, like, what about filter or reduce? Actually, I just care about using reduce.

Array.prototype.filter

Return an array of items that pass the comparator function
Returns empty array if no items pass


Considerations

  • Congrats! You have another array of items!
  • Have to explicitly check for NaN

Array.prototype.filter

let arr = [
  { id: 1, color: 'red' },
  { id: 2, color: 'blue' },
  { id: 3, color: 'green' },
];

let foundItem = arr.filter(item => item.color === 'red'); 
  // [ { id: 1, color: 'red' }]

let notFoundItem = arr.some(item => item.id === 4); // [ ]

let arr2 = [ 'hearts', 'stars', 'horseshoes', 'clovers' ];

let starsItem = arr2.some(item => item === 'stars'); 
  // [ 'stars' ]

Array.prototype.reduce

Returns anything you want


Considerations

  • Your imagination
  • Have to explicitly check for NaN

Array.prototype.reduce

let arr = [
  { id: 1, color: 'red' },
  { id: 2, color: 'blue' },
  { id: 3, color: 'green' },
];

let foundItem = arr.reduce((acc, curr) => {
  if (curr.color === 'red') return curr;
  return acc;
}, null);
  // { id: 1, color: 'red' }

I just care about performance. Talk about that.

Performance

indexOf/lastIndexOf/findIndex (coming soon)

 

some/includes (coming soon)

 

for-loop/find

Resources

Selection of Examples (repl.it): https://bit.ly/2Lj2ZPV


MDN for Arrays: https://mzl.la/1kML43T

 

SameValueZero Algorithm: https://mzl.la/2wihz4x

Copy of What To Do When You Don't Care (About Finding Items In Arrays) [What Do You Care About?]

By Mike Frazier

Made with Slides.com

Copy of What To Do When You Don't Care (About Finding Items In Arrays) [What Do You Care About?]

Presented at DenverScript 08/28/2018

  • 88

More from Mike Frazier