DEV Community

Discussion on: Array Methods in JS - reverse()

View post
Collapse
 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡ •

Another one, this time with recursion:

/**
 * Reverses a string recursively
 * @param {string} str 
 * @returns {string}
 */
const reverseString = (str) => (str === '') ? '' : reverseString(str.substr(1)) + str.charAt(0);
Enter fullscreen mode Exit fullscreen mode 
reverseString("hello") // olleh
reverseString('Hello, how are you?') // ?uoy era woh ,olleH
Enter fullscreen mode Exit fullscreen mode

๐Ÿ˜

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari •

yeah but i only tried to discuss the inbuilt reverse() array method but this one liner implementation is also cool ๐Ÿ˜Ž

Collapse
 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡ •

Say no more:

const reverseStr = (str) => str.split("").reverse().join(""));
Enter fullscreen mode Exit fullscreen mode

๐Ÿ˜‚๐Ÿ˜‚

I'm loving this posts you do on your learning, following up to read more ๐Ÿ˜

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari •

Yeah this one is also good but then I had to explain this also and i am trying to show everything as a beginners perspective so later they can simplify the code on their own and come with these type of one liner solutions ๐Ÿ˜‰
Also I want to explain join and split in a separate posts that's why I didn't explained much about them in this blog ๐Ÿ˜‚๐Ÿ˜‚

Thread Thread
 
frankwisniewski profile image
Frank Wisniewski •

seen 1000 times and wrong 1000 times...

const str = 'Hello ๐Ÿ˜Š World';
const reversedStr = str.split('').reverse().join('');
console.log(reversedStr); // 'dlroW ๏ฟฝ๏ฟฝ olleH'
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡ • • Edited

Yes yees we know, that doesn't mean it's wrong. You don't need to deal with emojist most of the time and when you do, simply

const reverseStr = (str) => [...str].reverse().join('');
Enter fullscreen mode Exit fullscreen mode

There are multiple ways to deal with that ๐Ÿคท๐Ÿปโ€โ™€๏ธ

Thread Thread
 
frankwisniewski profile image
Frank Wisniewski • • Edited

the only correct way: Intl.Segmenter!!

it's not about emojis, it's plain and simple also about characters in other languagesโ€ฆ

dev.to/lukeshiru/comment/20d68

Thread Thread
 
rkallan profile image
RRKallan •

Intl.Segmenter is not working with Firefox

Thread Thread
 
frankwisniewski profile image
Frank Wisniewski •

use a polyfilll

Thread Thread
 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡ • • Edited

So I tried to break this down a bit

const reverseStr = (str) => [...str].reverse().join('');
Enter fullscreen mode Exit fullscreen mode 
reverseStr('๐Ÿ˜hi๐Ÿ˜…hello') // 'olleh๐Ÿ˜…ih๐Ÿ˜'
reverseStr('๐Ÿ˜ะฟั€ะธะฒะตั‚') // 'ั‚ะตะฒะธั€ะฟ๐Ÿ˜'
reverseStr('ๅพ่ผฉใฏ็Œซใงใ‚ใ‚‹๐Ÿฑ') // '๐Ÿฑใ‚‹ใ‚ใง็Œซใฏ่ผฉๅพ'
reverseStr('๐Ÿ˜ฎโ€๐Ÿ’จ') // '๐Ÿ’จโ€๐Ÿ˜ฎ' <-- this is a ZWJ Sequence working properly
// You can also set the `u` flag for Unicode codepoints like that:
"๐Ÿ˜„๐Ÿ˜„".split(/(?:)/u); // [ "๐Ÿ˜„", "๐Ÿ˜„" ]
Enter fullscreen mode Exit fullscreen mode

but this won't work for some ZWJ Sequences (multiple emojis joined with a zero-width joiner character being displayed as a "single emoji") and I was wondering why.

If we look at the Unicode Technical Standard, @lukeshiru you pick the emoji wisely to showcase.

reverseStr('๐Ÿง‘๐Ÿปโ€๐Ÿ’ป') // '๐Ÿ’ปโ€๐Ÿป๐Ÿง‘' <--  this is a ZWJ Sequence working 'wrong'
Enter fullscreen mode Exit fullscreen mode

Actually it's doing "great" reversing the whole thing as it did with

reverseStr('๐Ÿ˜ฎโ€๐Ÿ’จ') // '๐Ÿ’จโ€๐Ÿ˜ฎ'
Enter fullscreen mode Exit fullscreen mode

The issue I think is that the "computer" can't be joined with the "skin tone" and we see this weird symbol because skin tone does not work standalone.

Also I noticed that destructuring has issues with words in hindi as well:

[...'เคนเคพเคฏ เค†เคช เค•เฅˆเคธเฅ‡ เคนเฅˆ'].reverse().join() // 'เฅˆ,เคน, ,เฅ‡,เคธ,เฅˆ,เค•, ,เคช,เค†, ,เคฏ,เคพ,เคน'
Enter fullscreen mode Exit fullscreen mode

Thus it actually works "fine", or as intended from the computation point of view, it's just that we don't have a valid "translation" to show the result, let's say computer &zwj; skin-tone-medium &zwj; human and something similar should be happening with hindi words (and presumably other languages).

Whenever you need to work with ZWJ Sequences or some specific languages, Intl.segmenter is the option because it simply doesn't break those joined unicodes into something "unreadable". And to be precise it doesn't reverse the icons.

If the standard covered symbols to be directional let's say "faceโ€airBlow"๐Ÿ˜ฎโ€๐Ÿ’จ and then "airBlowโ€face" being the opposite (blowing to the left) and also joining the modifiers to the compatible icons (either be right or left), every emoji sequence could be effectively reversed without breaking the "emoji" render.

On the other hand I can't understand -yet- why Firefox is not supporting it, I'll search to see if I can find the reason somewhere.

Do you guys have more detail on that?

Edit: I get some info about it here if you want to check. TL;DR It will be supported in short (theoretically).

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari •

this goes directly above my head ๐Ÿ˜‚๐Ÿ˜‚