Replace method javascript with function

Question

the logic behind itI have the following code that I made based on an example from MDN.

function spinalCase(str){
 return  str = str.replace(/[A-Z]/g,function(match, offset, string) {
   return (offset > 0 ? '-' : '') + match.toLowerCase();
});          
}

Would someone please explain me how the following line of code works?

return (offset > 0 ? '-' : '') + match.toLowerCase();

I've tried to understand it based on the replace() method page from MDN but so far I don't understand the logic behind it.

What I mostly don't understand is how (offset > 0 ? '-' : '') + match.toLowerCase() returns the word with the replacement. Does the replace function do a loop to iterate through all letters? Or does it just returns the entire ready string with the replacement...

Which part you don't understand? Are you familiar with [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)? — PM 77-1, Feb 09 '18 at 22:53
Yes, I am, but I don't understand the "offset > 0" part... And how it simply adds the match.toLowerCase() after the ternary part — Caio Gomes, Feb 09 '18 at 22:55
Lets clarify this ternary operator: if offset bigger than 0 then '-' else '' and String concatenation — PashaB, Feb 09 '18 at 22:57
Possible duplicate of [How do you use the ? : (conditional) operator in JavaScript?](https://stackoverflow.com/questions/6259982/how-do-you-use-the-conditional-operator-in-javascript) — ecarrizo, Feb 09 '18 at 22:57
Once evaluated `(offset > 0 ? '-' : '')` becomes `'-'` or `''` then it concatenate to that result the `match.toLowerCase()` value. — ecarrizo, Feb 09 '18 at 23:01
For example: if I use spinalCase("CaioGomes") and ask the function to return offset, it returns me 0aio4omes. So what I mostly don't understand is how 0aio4omes > 0 will insert the dash (-) in all the lowercase followed by uppercase scenarios. — Caio Gomes, Feb 09 '18 at 23:06
@CaioCésarSilvaGomes It's not checking whether the uppercase is after lowercase. It's putting the dash before every uppercase character except the first character. `offset` is `0` if the match is at the beginning it's `> 0` for every other match. — Barmar, Feb 09 '18 at 23:12
@CaioCésarSilvaGomes, the str.replace function is taking as search parameter a regex that will seek for UpperCase letter only, then the provided callback is executed for all Matches (C and G), on the first execution it return the first letter that matches, since the offset is 0, it appends before nothing, then at the second execution it replaces 'G' for '-g'. IT does not works with numbers. — ecarrizo, Feb 09 '18 at 23:14

score 3 · Accepted Answer · answered Feb 09 '18 at 23:17

The JS String Replace method can take a function as it's second parameter, which will get passed matches in the input string. Each match gets passed into that inner function, and is replaced in the input string by whatever that inner function returns.

In this case the pattern matches [A-Z] (all capital letters).

So in the string "ThisIsAString" we will match "T", "I", "A", and "S"

The inner function uses a ternary: offset > 0 ? '-' : '' (compact if/else) to prefix a dash if this match is not the first character. It could be reworded as: "if this match is not the first character, prefix with a dash. Otherwise, do not prefix anything."

the last part: + match.toLowerCase() converts the matched character to lowercase, so now our matches will be replaced by: "t", "-i", "-a" and "-s"

@caio the 'offset' argument of the inner function refers to the match's offset from the start of the string. In my example "T" has an offset of 0 (first char), "I" has an offset of 4 (fifth char) etc — Samuel Gluss, Feb 09 '18 at 23:32
if you want to experiment with the code some more to understand it better, try out your browser's debugger! Here's a crash course in Chrome for example: https://developers.google.com/web/tools/chrome-devtools/javascript/ — Samuel Gluss, Feb 09 '18 at 23:34

Replace method javascript with function

1 Answers1