Fraser Hamilton

How to reverse a string in JavaScript

July 06, 2020

By leveraging JavaScript’s built in methods we can reverse a string in 3 easy steps. First we use split to turn our string into an array so we can use those handy Array.protoype methods.

const foo = 'Hello World!'

const bar = foo.split('')

console.log(bar)

// ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d", "!"]

Then we can use the reverse method to reverse our array.

const foo = 'Hello World!'

const bar = foo.split('').reverse()

console.log(bar)

// ["!", "d", "l", "r", "o", "W", " ", "o", "l", "l", "e", "H"]

And finally use join to reassemble our string from the reversed array.

const foo = 'Hello World!'

const bar = foo
  .split('')
  .reverse()
  .join('')

console.log(bar)

// !dlroW olleH

Although we’ve reached the desired result it might be nicer to have this as a little utility function you can reuse around your project.

const reverseStr = str => {
  return str
    .split('')
    .reverse()
    .join('')
}

const foo = 'Hello World!'

const bar = reverseStr(foo)

console.log(bar)

// !dlroW olleH

You could even extend JavaScript’s existing String.prototype with your shiny new method although doing so isn’t always a good idea, when you extend an object you change it’s behaviour and this can cause bugs.


Written by Fraser Hamilton a full stack developer based out of Edinburgh, Scotland.

© 2020, Fraser Hamilton