Bonfire: Reverse a String Solution

It seems my previous Bonfire post has been fairly popular, so I figured I might as well share some of my other solutions in case someone might find it useful. This time, I’m tackling the Bonfire prior to the Factorializing one.

These solutions aren’t necessarily the best, most efficient way of solving the Bonfires. They’re just my approach to the problem. Within programming, coding and development, there’s usually multiple ways to solve the same problem. And depending on the philosophy of the coder, they might view certain approaches as more ideal than others. I’m just presenting what I have in case it helps someone.

Approaching the Problem

So the Free Code Camp Bonfire starts us off with the following code:

function reverseString(str) {
  return str;
}

reverseString('hello');

Already we see that we need to use a function that takes a parameter of str. Str in the function call has a value of “hello”. So, we are going to have to figure out how to reverse the string, “hello”. Having gone through the old Free Code Camp (they updated their lessons sometime in late-August) track that involved moving through Codeacademy’s JS course, we’ve encountered this problem before.

What I did for that solution was I separated the string by the letter and loaded them into an array. From that array, we can rebuild the string but backwards this time using a for loop. While this works, it’s hardly efficient and has us writing a ton of convoluted code to do something relatively simple.

Here’s what exists within JS to allow us to do this more efficiently. There are three pre-made functions within JS: split(), reverse() and join(). We can combine all three of these to quickly split up the string into an array that will resemble: [h, e, l, l, o], reverse it and turn it into [o, l, l, e, h], then join it back into a string: “olleh”.

The Immutable String Issue

Why do we need to turn the string into an array? Strings in JS are immutable. Immutable elements cannot be modified after they have been created.

So in the above code, str is set to a string that says “hello”. We cannot actually modify hello because it is immutable. That means, we can’t even do something as simple as reverse the string. To get around this, you have to turn the string into an array, reverse the array, then join the array back into a string. Because you join the array back into a string that will then say “olleh”.

Reversing the String & Returning It

Now we need to do all this in one step and on the str parameter. To combine functions you use the . (dot) operator. So it should look like this:

return str.split('').reverse().join('');

The above code is doing exactly what I said in the previous section. It is taking whatever str is, splitting it into an array. Then it reverses the array, then joins the array back into a string. Using a pre-built function allows us to sidestep the messy exercise of writing a loop.

So overall, this is what the final code looks like:

function reverseString(str) {
  return str.split('').reverse().join('');
}

reverseString('hello');

All this gets returned outside the function and the console in the Bonfire should return “olleh” and validate all the conditions.

Resources

Ten Ways to Reverse a String in JS, Edd Man
Really good resource for exactly what we’re facing in this Bonfire. It also includes the above solution using pre-built functions as well as a few other approaches using various loops. And one example using recursion if you really felt like it.

How Do You Reverse a String in Place in Javascript, StackOverflow
Excellent resource and discussion on how to reverse a string.


Posted

in

by

Comments

6 responses to “Bonfire: Reverse a String Solution”

  1. Sooypai

    Thank you for this post. It is really helpful and now I acctualy understand what I did in this Bonefire 🙂

    1. Thanks for dropping by and leaving a message, Sooypai. I’m glad this was helpful!

  2. Tommy

    Thank you for your help. When I’m searching for a solution for Bonfire, I’m always trying to find an answer that’s practically the most short and efficient, correct? If I’m creating a solution that just seems too long and unnecessary, that’s where I should turn back and look for a different solution.

    1. Thanks for stopping by and leaving a comment, Tommy. I’m glad this was helpful. The shortest and easiest way is usually my favorite, even if it takes a little more explaining to understand what its doing. 🙂