Could someone please explain the last part of the advanced solution for this algorithm, specifically, why we need to add the (L) => L.toUpperCase()); at the end of the Regex .replace() command?
The last example on this BitDegree webpage https://www.bitdegree.org/learn/javascript-replace/ also uses this same command and I can’t work out its logic. I understand what it does - replaces the letters to uppercase, however I can’t understand how it knows what the L is supposed to represent in the string.
1 Like
The regex, /(^|\s)\S/g, is selecting for any nonwhitespace char that is either at the beginning of the string or is preceded by a whitespace char. You didn’t ask about how the regex works so I’ll skip that.
The replace accepts needs a second parameter, what you are going to replace the selections with. Often it is just string. For example, if you did:
str.toLowerCase().replace(/(^|\s)\S/g, 'ribbit')
Then those chars would be replaces with the word “ribbit”.
But we want to do some processing on it. To do that we are using some ES6 (more recent JavaScript), specifically an arrow function. It is a function that accepts a parameter L that gets passed into the function and there is an implied return of the uppercase version of that char.
with the implicit return it is:
(L) => L.toUpperCase()
without the implicit return it would be
(L) => { return L.toUpperCase() }
and without the ES6 arrow function, it would be
function(L) { return L.toUpperCase() }
All these three functions do the same thing. The first two are a tad faster and a little “cooler”. (Actually, to be even cooler, the parentheses are optional.)
ES6 looks weird until you use it. I might recommend checking out some basic ES6 so at least you can recognize it when you see it. I’m sure there are some good youtube videos going over the basics.
1 Like
What I specifically don’t understand is this part you detailed here:
But we want to do some processing on it. To do that we are using some ES6 (more recent JavaScript), specifically an arrow function. It is a function that accepts a parameter L that gets passed into the function and there is an implied return of the uppercase version of that char.
with the implicit return it is:
(L) => L.toUpperCase()
I more or less understand ES6’s new formatting, and that isn’t an issue. What I’m having trouble understanding is how does the function know that the parameter L that’s passed into it is referring to the appropriate place in the Regex replace part. And what exactly is implicit return?
1 Like
how does the function know that the parameter L that’s passed into it is referring to the appropriate place in the Regex replace part.
If we were to pull back the hood on replace, I think we’d see that it checks the type of the second parameter. If it is a string, it just uses that. If it is a function, it feeds it a parameter (in this case given the name “L”) and accepts the return value.
And what exactly is implicit return?
With arrow functions, if you don’t give it a code block but a simple expression, it will just return whatever that expression evaluates to:
(L) => L.toUpperCase()
JS sees that it isn’t a code block (surrounded in curly braces) so it knows that it is just an expression and returns whatever it evaluates to.
Thanks for the explanation, however I still can’t understand how the replace command knows that the function parameter L is referring to the matched regex string. For all it knows the L could be referring to some other part of the string.
It doesn’t know and doesn’t care. All it knows is that it is getting a string (in this case of one char) and needs to do something with it.
Let’s break this down.
Again, this regex - /(^|\s)\S/g - targets either the first char or any char after a space. It’s not clear to me if you understand the regex. If that is the issue, please ask but I’ll avoid the explanation to avoid confusion. Just suffice to say that that magic combination of regex targets the chars that we want to go after.
So replace feeds those targeted chars that it gets from the regex and feeds them into the callback function. The replace method doesn’t know or care what chars are targeted - that is the job of the regex. The replace method doesn’t know or care what the callback function will do with them - all it cares about is what gets returned. So, replace steps through each of the chars that the regex gives it and feeds them through the callback. replace doesn’t know or care what happens inside the callback. It just see that it returns a value and it “replaces” the original targeted value in the regex with whatever the callback returns. All the replace knows is “The first parameter is going to feed me strings and I’m going to replace those with whatever strings the second parameter returns.”
To clear up another possible source of confusion, in (L) => L.toUpperCase(), the letter L is arbitrary. It could have been (x) => x.toUpperCase() or even (frogSkinPajamas) => frogSkinPajamas.toUpperCase(). replace doesn’t know or care what it is called. It sends a parameter and the callback can name it whatever it wants and do with it whatever it wants.
One small correction - in an earlier post I thought that replace did some kind of type checking on the second parameter to see if it was a string or a function. Now I suspect that it doesn’t care. Now I think it just sends the parameter and checks to see what the second argument evaluates to. If it’s just a string then it just evaluates to that string.
Yes, functional programming is weird. Yes, callbacks are weird. But they are both very important to JavaScript. I was an ex-programmer and it took me a while to wrap my head around it. If you’re still struggling, just focus on what it does for now and the understanding of how will come later.
5 Likes