DEV Community

Discussion on: JS Array Manipulation Quirks

Collapse
shiftyp profile image
Ryan Lynch (he/him) • 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))
   }
}
Collapse
jenc profile image
jen chan Author

Wow yesss! I didn't think to!

Collapse
willsmart profile image
willsmart • 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)

Collapse
shiftyp profile image
Ryan Lynch (he/him)

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...

Collapse
jenc profile image
jen chan Author

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