One of the first code\/algorithm challenges that we set out to solve as budding software engineers and web developers is to see if we can figure out how to reverse a string. Remember that a string is just a collection of characters and spaces. What we need to set out to do is to try to reverse, for example, the string \u201cHello World!\u201d and return \u201c!dlroW olleH\u201d. There are several ways we can solve this problem and we\u2019ll cover a few of them here in this article.
<\/p>\n\n\n\n
Write a function, The first, and probably one of the most straightforward solutions is to use a for loop and go backwards through the string. We\u2019ll need to instantiate, or create, a variable that holds the new reversed string as we pass each character in the string: <\/p>\n\n\n\n We assign i <\/em>to the last index (which is figured out when we take 1 from the length of the string) \u21d2 this is our initialization<\/strong> and will serve as the first index we loop through. The second portion of the for loop is our condition <\/em><\/strong>\u21d2 <\/em>this tells the loop when to stop. The third and last portion of the for loop is how much our i will increment <\/em><\/strong>after completion of the loop and the condition still holds true : i– essentially takes our i and reassigns it to i – 1; As we loop through each iteration we take each character at str[i] and add it to the newStr. We then return the newStr outside of our for loop and terminate the function. Try it yourself in the code editor:<\/p>\n\n\n\n JavaScript has a built in array method that was new to ES6 called map<\/strong>. What this does is it returns a new array with the specified values. The map method has three parameters: The current item, the index of the item, and a copy of the array it\u2019s coming from. We will use the last two parameters in the solution. The first thing we need to do is split the string into an array using the Since we are wanting to essentially swap indexes, we need to figure out the index of the character we want to put in the current index\u2019s place. That will be the character we return. To do that, we find the length of the array, minus one because we are a zero-based array, and then take away the position of the current index. The array[swapIndex] we return essentially takes the place of the current index. This gives us an array of reversed characters in a string. The final thing we need to do is join the array together into a string and return it. Test out the solution in the code editor!<\/p>\n\n\n\n The big thing to remember is that map returns a new array \u2013 so we are not modifying the original str\/array passed in. This method of solving this code challenge uses the built in functions\/methods Try running the code below and testing it out for yourself to see it work!<\/p>\n\n\n\n Essentially what the built-in These are not the only definitive ways to solve this problem \u2013 these are just some of the more popular ways to solve it. Experiment and see if you can find other solutions for yourself in the code editor above. Just edit the reverseString<\/code>, that reverses a string and returns it. The string to reverse is given as an argument in the function.
<\/p>\n\n\n\nSolution # 1: For Loop<\/h4>\n\n\n\n
function reverseString(str) {\n let newStr = '';\n for(let i = str.length - 1; i >= 0; i--) {\n newStr += str[i];\n }\n return newStr;\n }<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" \/>\n <meta http-equiv="X-UA-Compatible" content="IE=edge" \/>\n <title><\/title>\n <meta name="description" content="" \/>\n <meta name="viewport" content="width=device-width, initial-scale=1" \/>\n <link rel="stylesheet" href="" \/>\n <script>\n function reverseString(str) {\n let newStr = '';\n for(let i = str.length - 1; i >= 0; i--) {\n newStr += str[i];\n }\n return newStr;\n }\n function showInput(e) {\n e.preventDefault();\n const inputStr = document.getElementById('user_input').value;\n if(inputStr.length < 1) {\n alert("Must enter a string to reverse. Try again.")\n }\n let reversed = reverseString(inputStr);\n \n document.getElementById(\n 'display'\n ).innerHTML = reversed;\n document.getElementById('user_input').value = '';\n }\n <\/script>\n <style>\n * {\n box-sizing: border-box;;\n }\n body {\n width: 100%;\n max-width: 500px;\n height: 100vh;\n background: lightblue;\n margin: 0 auto;\n display: flex;\n flex-flow: column wrap;\n align-items: center;\n justify-content: center;\n }\n div {\n display: flex;\n flex-flow: column wrap;\n align-items: flex-start;\n width: 100%;\n }\n form {\n display: flex;\n flex-flow: column wrap;\n width: 100%;\n background: lightgray;\n padding: 20px;\n border: 5px double slategray;\n \n \n }\n #user_input {\n width: 100%;\n }\n #submit_button {\n width: 25%;\n align-self: flex-end;\n margin-top: 10px;\n }\n #display {\n font-size: 1.4rem;\n height: 50px;\n }\n <\/style>\n <\/head>\n <body>\n <div>\n <form onsubmit="showInput(event);">\n <label id="label">Enter a String to Reverse:<\/label>\n <input type="text" name="message" id="user_input"\/>\n <input type="submit" onclick="showInput(event);" id="submit_button"\/><br \/>\n <label>Your input: <\/label>\n <p><span id="display"><\/span><\/p>\n <\/form>\n \n \n <\/div>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\nSolution # 2: JavaScript\u2019s ES6 map method<\/h4>\n\n\n\n
<\/p>\n\n\n\nsplit()<\/code> method. If we split on an empty string, the method will give us an array with each individual character in it. We then use that new array to map over. <\/p>\n\n\n\nfunction reverseString(str) {\n let newArr = str.split('');\n let rev = newArr.map((letter, index, array) => {\n let swapIndex = array.length - index - 1;\n return array[swapIndex];\n });\n return rev.join('')\n }<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" \/>\n <meta http-equiv="X-UA-Compatible" content="IE=edge" \/>\n <title><\/title>\n <meta name="description" content="" \/>\n <meta name="viewport" content="width=device-width, initial-scale=1" \/>\n <link rel="stylesheet" href="" \/>\n <script>\n function reverseString(str) {\n let newArr = str.split('');\n let rev = newArr.map((letter, index, array) => {\n let newIndex = array.length - index - 1;\n return array[newIndex];\n });\n return rev.join('')\n }\n function showInput(e) {\n e.preventDefault();\n const inputStr = document.getElementById('user_input').value;\n if(inputStr.length < 1) {\n alert("Must enter a string to reverse. Try again.")\n }\n let reversed = reverseString(inputStr);\n \n document.getElementById(\n 'display'\n ).innerHTML = reversed;\n document.getElementById('user_input').value = '';\n }\n <\/script>\n <style>\n * {\n box-sizing: border-box;;\n }\n body {\n width: 100%;\n max-width: 500px;\n height: 100vh;\n background: lightblue;\n margin: 0 auto;\n display: flex;\n flex-flow: column wrap;\n align-items: center;\n justify-content: center;\n }\n div {\n display: flex;\n flex-flow: column wrap;\n align-items: flex-start;\n width: 100%;\n }\n form {\n display: flex;\n flex-flow: column wrap;\n width: 100%;\n background: lightgray;\n padding: 20px;\n border: 5px double slategray;\n \n \n }\n #user_input {\n width: 100%;\n }\n #submit_button {\n width: 25%;\n align-self: flex-end;\n margin-top: 10px;\n }\n #display {\n font-size: 1.4rem;\n height: 50px;\n }\n <\/style>\n <\/head>\n <body>\n <div>\n <form onsubmit="showInput(event);">\n <label id="label">Enter a String to Reverse:<\/label>\n <input type="text" name="message" id="user_input"\/>\n <input type="submit" onclick="showInput(event);" id="submit_button"\/><br \/>\n <label>Your input: <\/label>\n <p><span id="display"><\/span><\/p>\n <\/form>\n \n \n <\/div>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\nSolution #3: Built-in JavaScript Method<\/h4>\n\n\n\n
split()<\/code>, reverse()<\/code>, and join()<\/code> to solve it in this one-liner: <\/p>\n\n\n\nfunction reverseString(str) {\n return str.split('').reverse().join('');\n }<\/pre><\/div>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" \/>\n <meta http-equiv="X-UA-Compatible" content="IE=edge" \/>\n <title><\/title>\n <meta name="description" content="" \/>\n <meta name="viewport" content="width=device-width, initial-scale=1" \/>\n <link rel="stylesheet" href="" \/>\n <script>\n function reverseString(str) {\n return str.split('').reverse().join('');\n }\n function showInput(e) {\n e.preventDefault();\n const inputStr = document.getElementById('user_input').value;\n if(inputStr.length < 1) {\n alert("Must enter a string to reverse. Try again.")\n }\n let reversed = reverseString(inputStr);\n \n document.getElementById(\n 'display'\n ).innerHTML = reversed;\n document.getElementById('user_input').value = '';\n }\n <\/script>\n <style>\n * {\n box-sizing: border-box;;\n }\n body {\n width: 100%;\n max-width: 500px;\n height: 100vh;\n background: lightblue;\n margin: 0 auto;\n display: flex;\n flex-flow: column wrap;\n align-items: center;\n justify-content: center;\n }\n div {\n display: flex;\n flex-flow: column wrap;\n align-items: flex-start;\n width: 100%;\n }\n form {\n display: flex;\n flex-flow: column wrap;\n width: 100%;\n background: lightgray;\n padding: 20px;\n border: 5px double slategray;\n \n \n }\n #user_input {\n width: 100%;\n }\n #submit_button {\n width: 25%;\n align-self: flex-end;\n margin-top: 10px;\n }\n #display {\n font-size: 1.4rem;\n height: 50px;\n }\n <\/style>\n <\/head>\n <body>\n <div>\n <form onsubmit="showInput(event);">\n <label id="label">Enter a String to Reverse:<\/label>\n <input type="text" name="message" id="user_input"\/>\n <input type="submit" onclick="showInput(event);" id="submit_button"\/><br \/>\n <label>Your input: <\/label>\n <p><span id="display"><\/span><\/p>\n <\/form>\n \n \n <\/div>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\nreverse()<\/code> method does is the map()<\/code> method (the method we outlined in our previous solution) under the hood; however<\/em><\/strong>, it mutates the original array instead of returning a new one since it reverses in place<\/em>. If you are solving a bigger problem, you may need to create a copy of the original array so you can still access the original if needed.
<\/p>\n\n\n\nreverseString()<\/code> function and nothing else if you would like to see it on screen. <\/p>\n","protected":false},"excerpt":{"rendered":"One of the first code\/algorithm challenges that we set out to solve as budding software engineers and web developers is to see if we can figure out how to reverse a string. Remember that a string is just a collection of characters and spaces. What we need to set out to do is to try…","protected":false},"author":77,"featured_media":19018,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-19017","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\n