Reversing a string with .reduce (and arrow function)

JavaScript
1

I’m working through the basic java script algorithms section of the curriculum and i’m working on different ways of reversing strings. I found a website that goes through different ways of doing it and I’m trying to understand how each one works. This is the one I’m currently stuck on.

function reverse(str){
  return str.split("").reduce((rev, char)=> char + rev, ''); 
}

From what little I understand
str.split("") splits the string that was passed to reverse(str) into an array.

Next, .reduce(lots of confusing stuff); reduces the array into a single item, in this case a string.

Inside of the reduce function is where I’m getting confused. The arrow function is
(rev, char) => char + rev
if I break that down to what it would look like it should be something like

function (rev, char) {
     return char + rev;
}

which takes the array I made before as an argument and adds them together, which wouldn’t be anything special but because it’s inside of

reduce((rev, char)=> char + rev, '')

each element of the array is being added to a new string in reverse…? This is where my logic fails, I see how char + rev is the reverse of rev, char but I’m just not understanding how the arrow function is breaking down the array and how it’s put into the empty string in reverse order. What does ‘rev’ and ‘char’ represent in the array exactly?

Sorry if this is rambling, I’m just trying to think through the logic of this while I’m working on it lol. Appreciate any help you guys could give!

2 
const initialValue = ''
array.reduce((accumulator, element) => element + accumulator, initialValue)

Reduce callback function takes two arguments: accumulator and current array element. If initial value for accumulator is not provided, then accumulator will be the first element of the array and reduce will start from second element.

In the example you posted, reduce goes through every element of the array and adds it to the beginning of accumulator (initially an empty string) so the first element will end up being last etc.

1 Like
3

Ok, so

const initialValue = ''
array.reduce((accumulator, element) => element + accumulator, initialValue)

if I had [1, 2, 3, 4, 5] being added to the emptry string "" it adds the “1” and then because the arrow function has element + accumulator that means every element after will be added to the beginning of the accumulator, so the 2nd time through it will be “21” and so on.

Ok, I think I’m starting to get this. that was really helpful, thanks. I tried to google that but I didn’t understand what the accumulator and elements were exactly. Thanks so much!

4

Yes, you are wright. str.split("") method will return array. So .reduce is the method of array. Syntax of Array.reduce() method is:

image
image1000×188 6.99 KB

And parameters of Array.reduce() method is:
image
image754×318 13.1 KB

image
image745×525 23.8 KB

image
image745×305 6.97 KB

More info.

1 Like
5

so in my example

reduce((rev, char)=> char + rev, '')

I don’t actually see the callback function because of the arrow function and my example doesn’t have an index or array stated.

6

callback function is in the form of anonymous function literal i.e.
(rev, char)=> char + rev
callback can be function literal or function variable example using callback as function variable:

function reverse(str){
  return str.split("").reduce(myCallback, ""); 
}
function myCallback(revvvvv,ccccchhhhhrr){
 return ccccchhhhhrr+revvvvv;
}

callback function as function literal:

function reverse(str){
  return str.split("").reduce(ccccccallbackkkk(rcccc,vvvv){
            return rcccc,vvvv;
      }, ""); 
  }

callback function as arrow function.

function reverse(str){
  return str.split("").reduce((reeeeeev, cheeeear)=> cheeeear+ reeeeeev, ''); 
}

as you see rev and char can be renamed to any text. Provided we must know what type of value is in argument 1 and argument 2 and argument 3 …