How Do You Reverse a String?

There are three common approaches and they differ in how they handle characters outside the basic multilingual plane.

The most direct one splits the string into an array, reverses it and joins it back. The array reverse method reverses in place and works on any array, so you need to turn the string into an array first. Splitting on an empty string splits it into code units, which is where the emoji problem comes from. Spreading the string instead gives you whole characters, so that is the version to prefer.

The second approach is a manual loop that builds the result one character at a time, either with the charAt method or by indexing. It is more code and slower, but it works and it is easy to read when you need to be explicit.

The third is the reverse method on the array prototype applied to a split result, which is the same as the first one but written differently.

One thing to know about the underlying methods. The array reverse method mutates the array it is called on, so if you reverse the result of a split you are fine, because the split produced a fresh array. The string reverse method does not exist, so any answer that claims otherwise is wrong.

For the interview, the version to reach for is the spread one, and the reason to give is that it handles astral characters correctly. If the input is guaranteed to be plain ASCII, the split-on-empty-string version is fine and marginally more familiar.

Reversing each word while keeping the words in place is a two-step job: split the sentence into words, reverse the characters of each word, and join the words back together.

const sentence = "the quick brown fox";

// Reverse every character.
console.log([...sentence].reverse().join(""));
// "xof nworb kciuq eht"

// Reverse the word order, keeping the characters.
console.log(sentence.split(" ").reverse().join(" "));
// "fox brown quick the"

// Reverse each word but keep the word order.
console.log(sentence.split(" ").map((w) => [...w].reverse().join("")).join(" "));
// "eht kciuq nworb xof"

// The spread operator matters for characters outside the basic plane.
const symbol = "\u{1F600}";
console.log(symbol.split("").reverse().join("").length);   // 2 - and the emoji is broken
console.log([...symbol].reverse().join("").length);        // 1 - still one character

The spread operator inside the map callback is the detail that matters. Splitting a word on an empty string splits it into UTF-16 code units, so an emoji becomes two broken halves. Spreading it gives you an array of whole characters, which reverse and join can handle correctly.

One more note. The word splitting assumes a single space as the separator. Real sentences contain tabs, newlines and repeated spaces, so a more careful implementation splits on a regular expression matching any run of whitespace and joins with a single space, which also stops you from producing empty strings for repeated spaces.