DEV Community

JS Array Manipulation Quirks

Jen Chan on December 07, 2019

In my previous post I mentioned I’d been practicing problem-solving by handwriting answers. It's taking much longer than on an IDE or cargo-program...

Read full post

Ryan Kahn (he/him) • Dec 7 '19 • Edited

Good points! You could iterate through a string directly though with a for loop, accessing the character at each index!

function forEachChar(str, cb) {
   for (let i = 0; i < str.length; i++) {
      cb(str.charAt(i))
   }
}

willsmart • Dec 8 '19 • Edited

As a rule I see charAt/charCodeAt/length for strings as useful optimisations in well-curated performance code and anti-patterns in typical code.

They are great if you know what's in the string (i.e. you made it or "sanitised" it to take all the interesting bits out), but can get you in trouble for arbitrary user input where at some stage some fool is going to try out some fancier unicode.

spreadem = s => {
  for (let i=0; i<s.length; i++) console.log(`Char at index ${i}: '${s.charAt(i)}'`); 
  console.log(`Spread graphemes: '${[...s].join("', '")}'`);
}

charAt works nicely in the usual case:

> spreadem("01234")
< Char at index 0: '0'
< Char at index 1: '1'
< Char at index 2: '2'
< Char at index 3: '3'
< Char at index 4: '4'
< Spread graphemes: '0', '1', '2', '3', '4'

But get's funky when multi-char graphemes exist:

> spreadem("𝟘𝟙𝟚𝟛𝟜")
< Char at index 0: '�'
< Char at index 1: '�'
< Char at index 2: '�'
< Char at index 3: '�'
< Char at index 4: '�'
< Char at index 5: '�'
< Char at index 6: '�'
< Char at index 7: '�'
< Char at index 8: '�'
< Char at index 9: '�'
< Spread graphemes: '𝟘', '𝟙', '𝟚', '𝟛', '𝟜'

(see speakingjs.com/es5/ch24.html for a bit of background)

Ryan Kahn (he/him) • Dec 8 '19

This is a really good point! Multi-character glyphs do mess with string iteration whether you split, spread, or loop. Trying to remember my solution to this the last time I encountered it in practice. I may have used a library to convert the strings to multi character arrays...

Jen Chan • Dec 8 '19

Omg I have not thought of this either. Multi-char graphemes really mess with my head

Jen Chan • Dec 8 '19

Wow yesss! I didn't think to!

Andrew Bone • Dec 7 '19

const newArr = arr.slice()

Is my favourite way to clone an array

Jen Chan • Dec 8 '19

woah woah woah! Does it clone past 1 level deep?

Andrew Bone • Dec 8 '19

jsperf.com/cloning-arrays/38

Eugene Karataev • Dec 8 '19

forEach doesn't mutate an array. Mutation happens only if you explicitly mutate array items in iteration function.

Andrew Bone • Dec 8 '19 • Edited

I guess if you're using forEach like map you could say it mutates

arr.forEach(a => a = {id: a})

// VS

const newArr = arr.map(a => {id: a})

// VS

const newArr = [];
arr.forEach(a => newArr.push({id: a}))

Eugene Karataev • Dec 8 '19

Well, actually if we execute your examples, we can notice that forEach doesn't mutate the original array.

Jen Chan • Dec 8 '19 • Edited

Thanks for pointing that out. This seems like a gray area. I don't know how I got under the impression that forEach mutates the original array items, maybe it was this post I looked up as I was writing the post. It's not entirely clear to me what forEach actually returns if I ran it on an array its own.

I have around the web read general opinions that forEach iterates straight through arrays without breaking, and skips empty values, so that if one wanted to include a condition it would be easier to go with a for-loop. I don't have enough experience with forEach to tell, tbh

Francesco Belvedere • Dec 8 '19

To address your point "what forEach actually returns", the answer is "nothing". forEach does not return a value, it is a void function.

Jen Chan • Dec 9 '19

Thank you! That makes a lot of sense.