DEV Community

Array manipulation in JavaScript 🧐

thomasaudo on February 12, 2019

Introduction When we start programming, we tend do create our own function with our own loop to manipulate arrays. In reality, almost al...

Read full post

Luke • Feb 13 '19 • Edited

Your brackets in your arrays make me feel nauseous

l2aelba • Feb 13 '19

and the white texts :D

Mihail Malo • Feb 13 '19

Horrible. Truly horrible.
How did these make it into the language?
And it was already after people started caring about JS performance, not before :/

Alfonso • Feb 13 '19

Can you explain your answer plis?

Mihail Malo • Feb 13 '19

These garbage Array -> Array methods made it into the runtime, instead of something good like iterator adapters.
Now numbers.filter(Number.isInteger).map(x=>x*2).reduce((a,b)=>a+b) does

const filterArr = []
for (const num of numbers) {
  if (Number.isInteger(num)) filterArr.push(num)
}
const mapArr = new Array(filterArr.length)
for (let i = 0; i < filterArr.length, i++) {
  mapArr[i] = filterArr[i] * 2
}
let acc = mapArr[0]
for (let i = 1; i < mapArr.length, i++) {
  acc += mapArr[i]
}

instead of numbers.filter(Number.isInteger).map(x=>x*2).reduce((a,b)=>a+b) doing

let acc
for (let i = 0; i < numbers.length; i++) {
  const num = numbers[i]
  if(!Number.isInteger(num)) continue
  acc = typeof acc === "undefined" ? num * 2 : acc + num * 2
}

Alfonso • Feb 13 '19

I didn't know how works this functions at low levels, but yes, this was a really good answer.
Maybe I think when you are not looking optimization of code and only legibility of it, use reduce, filter, etc. can have sense, no?

Mihail Malo • Feb 13 '19

Legibility is extremely important.
I want everyone to write semantic, functional code without boilerplate.
But that depends on the language providing first-class support for it, instead of normalizing iterating 3 times instead of once and creating intermediate arrays.

Darkø Tasevski • Feb 13 '19 • Edited

I find using map/reduce/filter much more easier to read than this mumbo jumbo:

if(!Number.isInteger(num)) continue
  acc = typeof acc === "undefined" ? num * 2 : acc + num * 2
}

This wouldn't pass any code review in my office... We're writing code for the machine but humans will need to read that code too, and as far as I know, performance gains are minimal, and in the end, you have @babel plugin which transforms map/reduce/find and similar methods into for loops.

Would like to add that you should use those "advanced" array methods only if you know what you're doing, in the end, it's really important for the developer to know what's going under the hood and to know, at least, to write some of those examples in regular for/while loops.

Raphaël Moreau • Feb 13 '19

Thank you for these tips :)

One question :
console.log(arr.every(condition))
// Should output true

It should not be false instead ? (There is at least one human under 18 in the list).

thomasaudo • Feb 13 '19

Totally!
Thanks for noticing, I've fixed it :)

Thamaraiselvam • Feb 13 '19

Awesome dude

Luke Davies • Jul 18 '19

Thank you! this is a really handy page to bookmark

Stephen Chiang • Feb 13 '19

Just purely a question... But is using these convenience methods really more advanced than doing it manually without them? I can see arguments both ways...

Cedric • Feb 14 '19

Cool man,thanks. What about some() though?
developer.mozilla.org/en-US/docs/W...

Mihail Malo • Feb 18 '19 • Edited

It tries the predicate on every item until it returns a truthy value.
If it reaches the end, returns false instead:

Array.prototype.some = function some(fn){
  for (const item of this) if (fn(item)) return true
  return false
}

The opposite is every():

Array.prototype.every = function every(fn){
  for (const item of this) if (!fn(item)) return false
  return true
}

Matheus Luz • Feb 13 '19

Finally some good examples of how this works, I've never really understood the image with food analogy

Tomer • Feb 13 '19

the every function was new to me . thanks

MosALs • Feb 13 '19

Thank u very much