DEV Community

loading...

Reverse a String with JavaScript

runosaduwa profile image Runo-saduwa ・4 min read

Today marks my 10th month anniversary in software development and with my little experience i must admit that one of the ways of effectively assessing the depth of your knowledge in a programming language is by solving algorithms, that explains why most tech companies test applicants with algorithms. Solving algorithms will train you on how to manipulate data and as we all know, data is the basis of programming and your ability to manipulate data gives you the power to solve problems.

This is my first post here on Dev and i will like to keep it simple. I'm dedicating this post to every developer who is willing to learn how to Reverse a string. Very Basic!

I Have Two ways of Solving this

As we already know, In programming there are several roads to one destination. the only differences between these roads is the ease at which it could get you to your destination. In this case i have two roads/ways:

  • The not so straight-forward way: Using the for loop
  • The straight-forward way: Using Array methods

The not so straight-forward way: Using the for loop

Ok so here we go, the first thing we'll do is to make a function to contain our code, this should be done to make the code reusable and clean. So here we'll simply name our function Reverse and pass in a parameter that will represent the string, lets name the parameter str.

      function Reverse(str){

     }

Your code should look like this. Great!, we're making progress.

Now lets fill our function block with some logic.

By using a loop, we will simply create an array from the string, by using
the split() method and we'll store the the array in a variable called arr.


     function Reverse(str){
     let arr = str.split('');
   }

Note: we inserted an empty string in the parentheses to split the characters (incuding white space) individually.

Next up, we need a variable to store the reversed word after the looping is completed. so lets declare a variable named reversed and assign an empty string to this value!


function Reverse(str){
     let arr = str.split('');
     let reversed = '';
   }

Finally, where the magic happens!, we're going to set our loop to run from the end of the array to the beginning of the array! this could be tricky, but watch close, you'll get it.

in this case we'll use a for loop and remember our for loop takes in 3 parameters.

  • the initializer: We are starting our loop from the back, so our initializer which is i in this case is assigned to the index value of the last element in the array!
let i = arr.lenght-1;

N.B: Taking 1 out of the total length of an array will give us the index number of the last element because arrays start count from 0

  • the Condition: the condition if simply, if i is greater than or equal to 0, then the loo should keep running!;
i >= 0;
  • Decrement: This part tells the i the next direction to take, in this case i is decreasing because we are looping from the last to the first element!
i--

lets put all of this together in our for loop and fix the for loop in the Reverse function!

    function Reverse(str){
    let arr = str.split('');
    let reversed = '';
    for(let i = arr.lenght-1; i >= 0; i--){
    }
  }

finally, all we need to do is to append arr[i] to reversed, like so:

  reversed += arr[i];

outside the for loop block, return reversed and your final code should look like this:

 function Reverse(str){
   let arr = str.split('');
   let reversed = '';
   for(let i = arr.length-1; i >= 0 ; i--){
     reversed += arr[i];
   }
  return reversed;
 }

  //If every thing went well then Reverse('runo') must return `onur`

The straight-forward way: Using Array methods

Here, we'll simply chain three methods to the string.

To achieve this we'll declare a variable called reversed and apply the following steps to it

  • first we'll apply the split('') method to the string to form an array of individual string charaters
  • then we'll chain the reverse() method to the split('') method to make the array reverse.
  • then we'll chain join('') to reverse() method and finally
  • return reversed!
    function Reverse(str){
    let reversed = str.split('').reverse().join('')
    return reversed;
   }


   Reverse('Runo') //onuR

Woo hoo!!!, this looks much cleaner and depicts that you actually know the language more!, so i guess everyone loves the straight forward way!

I hope you enjoyed this!, i will be dropping solutions to different type of algorithms (basic, intermediate and advanced), so watch out!

Happy halloween and Happy Coding!

Discussion (4)

pic
Editor guide
Collapse
tux0r profile image
tux0r

The memory-efficient way: Pass it to WebAssembly. (Disadvantage: Browsers still don't have <script type="application/wasm"> so it will still need to be routed through JavaScript - but one day, one day...)

Collapse
runosaduwa profile image
Runo-saduwa Author

Wow, that would be cool, I guess. Can you please explain this "web assembly?", is it a replacement for JavaScript?

Collapse
tux0r profile image
tux0r

Not quite yet, but it's slowly ascending. Mozilla explains it decently. Basically, C/C++/Rust/... in your browser - no DOM yet though.

Thread Thread
runosaduwa profile image
Runo-saduwa Author

Nice, I'll check it out