Reverse a String with JavaScript
Tags: beginners, javascript, algorithms
Published: 2018-11-01 17:15:38

---
title: Reverse a String with JavaScript
published: true
description: A detailed technical post on how to reverse a string
tags: #beginner, #javaScript, #algorithms
---
<p>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.</p>

<p>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!</p>





###__I Have Two ways of Solving this__
<p>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:</p>

<ul>
<li>The not so straight-forward way: Using the for loop</li>
<li>The straight-forward way: Using Array methods</li>
</ul>

###__The not so straight-forward way: Using the for loop__


<p>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 <code>Reverse</code> and pass in a parameter that will represent the string, lets name the parameter <code>str</code>.</p>

   ```javascript
      function Reverse(str){

     }
```

  <p> Your code should look like this. Great!, we're making progress.</p>

   <p>Now lets fill our function block with some logic.</p> 
  
  <p> By using a loop, we will simply create an array from the string, by using
   the <code>split()</code> method and we'll store the the array in a variable called <code>arr</code>.</p>

   ```javascript
     function Reverse(str){
     let arr = str.split('');
   }
 ```
   __Note__: we inserted an empty string in the parentheses to split the characters (incuding white space) individually.

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

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

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

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

   - the initializer: We are starting our loop from the back, so our initializer which is <code>i</code> in this case is assigned to the index value of the last element in the array!
```javascript
let i = arr.lenght-1;
```
   __N.B__: Taking <code>1</code> out of the total length of an array will give us the index number of the last element because arrays start count from <code>0</code>

 - the Condition: the condition if simply, if <code>i</code> is greater than or equal to <code>0</code>, then the loo should keep running!;
   ```javascript
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!
   ```javascript
i--
```
   lets put all of this together in our for loop and fix the for loop in the <code>Reverse</code> function!

  ```javascript
    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 <code>arr[i]</code> to reversed, like so:
```javascript
  reversed += arr[i];
```

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


 ```javascript
 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 <code>split('')</code> method to the string to form an array of individual string charaters
   - then we'll chain the <code>reverse()</code> method to the <code>split('')</code> method to make the array reverse.
   - then we'll chain <code>join('')</code> to <code>reverse()</code> method and finally
   - return <code>reversed</code>!

   ```javascript
    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!