TIDBITS BLOG COURSES CONTACT Press "s" to search

How to Reverse a
String in JavaScript
Welcome to the first Mini Code Tutorial!
@fototeka.inikas sent a DM to me saying I should

🤣 😂
start a shorter tutorial series. He said I would be
number 1 if I did it . So let’s see if he’s right .
JK. Doing this shorter tutorial have been on my list
for awhile. But have you every had a huge list of
things to do, and you never end up doing any of it
all. Anyways, I’m happy for the nudge!

In today's lesson, we're going to learn how to

reverse a string! Remember in my Web Basics
Series, we covered these 3 methods. Let's now

👍
apply them and solve this popular algorithm
challenge

split()
reverse()

join()
Download HD Image

The Challenge
Write a function that reverse a string.
Download HD Image

1. split()
In JavaScript, there is no built-in method to reverse
a string. There is however, a built-in method to
reverse an array. So the first step is convert our
string into an array.

Split our string into an array of letters.

Download HD Image

2. reverse()
Excellent, now that we have an array of letters. We
can call our built-in array method to reverse the
order.

Reverse the order of the items in our array.

Download HD Image

3. join()
Now that our array contains the reversed letters.
Let's convert the array back into a string.

Join the items in our array back into a string.

Download HD Image

Final Solution
And there we have it! We can chain our methods
together to a nice function. Congratulation, you

🥳
have now learned how to reverse a string in
JavaScript

Shutterstock Free Trial -

Get images, video, music &
easy to use design tools
with one subscription.
 Shutterstock Free Trial - Get ima
video, music & easy to use des
tools with one subscription

ADS VIA CARBON

PICTORIALS
Step by Step Code Tutorials 👣
1 How to Reverse a String in
JavaScipt

2 How to Truncate a String in

JavaScipt

3 How to Remove All Falsy

Values from an Array in
JavaScipt

4 How to Find the Longest

Word in a String in
JavaScipt

Download HD Image 5 CSS inline vs inline-block vs

block

6 How to Capitalize a String

More Solutions in JavaScipt
ADS VIA CARBON

Using reverse

js
function reverseString(str) {

return str

.split('')

.reverse()

.join('');

Using reduce

js
function reverseString(str) {

return [...str].reduce((accumulator, current)

 return current + accumulator;

});

// OR One-Liner

// return [...str].reduce((accumulator, curre

}

Using reduceRight

js
function reverseString(str) {

return [...str].reduceRight((accumulator, cur

}

Using for loop

js
function reverseString(str) {

let result = '';

for (let i = str.length - 1; i >= 0; i--) {

result += str[i];

return result;

Using sort

js
function reverseString(str) {

return str

.split('')

.sort(() => 1)

.join('');

Using recursion
 js
function reverseString(str = '') {

const [head = '', ...tail] = str;

if (tail.length) {

return reverseString(tail) + head;

return head;

Know other solutions? Submit it

here

How to Truncate a String in JavaScipt

Share to Share to Share to

Twitter Facebook LinkedIn

Share to Share to Email

Reddit Hacker News

MORE COURSES

Flexbox30
- Learn Flexbox with 30 Code Tidbits ✨
🎄
CodeTidbits30
- 30 days of the best JS, CSS, HTML
tidbits

Web Basics
- Web Basics Explained with Tidbits 🍎
TOP TIDBITS
 Converting Object to Array in JavaScript How to Remove Array Duplicates in ES6 How to Deep Clone an Array in J

HOME TIDBITS BLOG COURSES NEWSLETTER ABOUT CONTACT

What I Flexbox30 Pictorials Web Invite me to Become a

use Basics speak sponsor

© Copyright 2022. Samantha Ming