Skip to content
Search

DEV Community

Cover image for 1 line of code: How to reverse a string
Martin Krause
Martin Krause

Posted on

1 line of code: How to reverse a string

#javascript #webdev #productivity #codequality 
const reverseString = str => [...str].reverse().join("");
Enter fullscreen mode Exit fullscreen mode

Returns the reversed string.

The repository & npm package

You can find the all the utility functions from this series at github.com/martinkr/onelinecode
The library is also published to npm as @onelinecode for your convenience.

The code and the npm package will be updated every time I publish a new article.

Follow me on Twitter: @martinkr and consider to buy me a coffee

Photo by zoo_monkey on Unsplash

Subscribe to the weekly modern frontend development newsletter

Top comments (10)

Collapse
 
t0nyba11 profile image
Tony B • • Edited

I was just messing around with a few ways to do this, and timed this approach. To my surprise, it seems to be twice as fast as your example on my setup :/

const reverseString = str => [...str].reduce((a,c) => c + a);
Enter fullscreen mode Exit fullscreen mode

Heck, this might even be a little quicker than that on larger strings

const reverseString = str => [...str].reduce((a,c) => c.concat(a));
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lexlohr profile image
Alex Lohr •

If this was about speed, it would probably be faster not to use an array at all:

const reverseString = str => { for (let r = '', i = str.lenght; i >= 0;) r += str[--i]; return r }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
t0nyba11 profile image
Tony B •

Actually, everything I tried that didn't use an array was slower, because the built in functions likely map to better compiled code.

Collapse
 
frankwisniewski profile image
Frank Wisniewski •

Uncaught ReferenceError: r is not defined...

Thread Thread
 
lexlohr profile image
Alex Lohr •

My bad, typed that on the cellphone.

const reverseString = str => { let r = ''; for (let i = str.lenght; i >= 0;) r += str[--i]; return r }
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
frankwisniewski profile image
Frank Wisniewski •

The function doesn't return anything...it seems to be an old turntable phone..;-)

Thread Thread
 
lexlohr profile image
Alex Lohr • • Edited

I'll try it later when I have my PC.

Found the issue, but it is indeed slower.

Collapse
 
martinkr profile image
Martin Krause •

Hi everyone,

thanks to everyone for the efortand the thoughtful contributions.
I setup a benchmark with all one-line contributions. For me, on chrome, the article's function is the fastest with 400 ops/s.
Interested to see which results you guys get

Collapse
 
adam_cyclones profile image
Adam Crockett •

I prefer to hard code my reversed strings 🥁

Collapse
 
frankwisniewski profile image
Frank Wisniewski • • Edited

the fastest solution in one line:

const reverseString=([firstChar,...str])=>firstChar?reverseString(str)+firstChar:''
Enter fullscreen mode Exit fullscreen mode

It's a nice game to write functions in one line. But nothing more...

const areverseString=([firstChar,...str])=>firstChar?areverseString(str)+firstChar:''
//duration of 1.000.000 calls = 478 ms 

const breverseString = str => [...str].reverse().join("");
//duration of 1.000.000 calls = 1210 ms 

const creverseString = str => [...str].reduce((a,c) => c.concat(a));
//duration of 1.000.000 calls = 943 ms 

//now the classical way....
const reverseString = function (str) {
  let length = str.length
  let reverse = ''
  for (let i = 0; i<length; i++ ){
    reverse = str[i] + reverse
  }
  return reverse
}
//duration of 1.000.000 calls = 210 ms 

let start = performance.now()  
for (let y=1; y<1000000 ;y++){
  reverseString('Sauerkrauttopf');
}
let duration = performance.now() - start;
console.log(duration)
Enter fullscreen mode Exit fullscreen mode

Read next

krishhnaa profile image

Understanding angular ControlValueAccessor with an example

krishna -

aaronksaunders profile image

Working With Appwrite Databases, Vue, Ionic & Capacitor

Aaron K Saunders -

kelechithenigerian profile image

Glasp for Newbies: A Comprehensive Guide To the Social Web Highlighter

Temitope Ajao -

just_another_react_dev profile image

Add MUI v5 Theme Switcher in NextJs/React

Just another React Dev -