Lots to unpack here - can anyone explain how this works please?

[igorgetmeabrain]

This is one of the given solutions to the Intermediate Algorithm challenge Search and Replace:

String.prototype.capitalize =
  String.prototype.capitalize ||
  function() {
    return this[0].toUpperCase() + this.slice(1);
  };

const Util = (function() {
  function textCase(str, tCase) {
    if (tCase) {
      return setCase(str, tCase);
    } else {
      return getCase(str);
    }
function setCase(str, tCase) {
      switch (tCase) {
        case "uppercase":
          return str.toUpperCase();
        case "lowercase":
          return str.toLowerCase();
        case "capitalized":
          return str.capitalize();
        default:
          return str;
      }
    }

function getCase(str) {
      if (str === str.toUpperCase()) {
        return "uppercase";
      }
      if (str === str.toLowerCase()) {
        return "lowercase";
      }
      if (str === str.capitalize()) {
        return "capitalized";
      }
      return "normal";
    }
  }

  return {
    textCase
  };
})();

function myReplace(str, before, after) {
  const { textCase } = Util;
  const regex = new RegExp(before, "gi");
  const replacingStr = textCase(after, textCase(before));

  return str.replace(regex, replacingStr);
}

I’m tearing my hair out a little trying to work out exactly how this code works. Can anyone explain it to me please? Many thanks!

(FWIW, my solution to this challenge is considerably shorter and simpler!)

[JeremyLT]

Which part don’t you understand?

[DanCouper]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[igorgetmeabrain]

Thanks, I was wondering how to do that!

[igorgetmeabrain]

Ok, here’s my limited understanding of what’s going on:
You create a string method. Easy.
Then you create an IIFE, assigned to the variable Util.
I don’t understand the textCase function. How are the arguments str and tCase being supplied and how is tCase being assessed as true or false?
When that executes, it either invokes setCase or getCase.
The switch in setCase I don’t understand. I though that switch statements required breaks? I just don’t get how that makes a decision about which of the return commands to execute.
Where is the str argument getCase coming from? When it checks the status of str it returns the appropriate case label for the setCase function?
And what is return “normal”? The string “normal” doesn’t appear anywhere else in the code.
What does return { textcase } do?

Ok, then you have the actual replace function itself.
const {textcase} = Util is an example of destructuring assignment? What does it do exactly?
The regex thing I understand.
Finally, replacingStr is the textCase function which passes after and then a nested version of itself which passes before?? I just don’t get how this works either.

My solution to the same challenge used a simple regex and ternary operator and the entire function is three lines of code. The solution above seems (to my novice coder brain) wildly over-engineered!

[igorgetmeabrain]

Hmmm, I have been searching for further info on this challenge solution (no.4) and came across this post, the author of which is less than impressed with the solution: Intermediate Algorithm Search And Replace needs to have solution replaced · Issue #34761 · freeCodeCamp/freeCodeCamp · GitHub

FWIW, The final ‘solution’ (no.5) provided in the guide is actually wrong and doesn’t even pass the challenge!

In fact, other provided solutions are also arguably inaccurate, in that they actually go beyond the criteria of the challenge, but don’t actually fail in any cases.

[JeremyLT]

I don’t know that I would call a regex soultion simple for most beginners. I would agree that this one is pretty overenginered though.

I’m not sure what you mean by ‘go beyond the criteria’.

[igorgetmeabrain]

The criteria stipulate that the initial character of the replacing word should match the case of the initial character of the word being replaced. IIRC, a couple of the solutions iterate through the entire word, matching case of all characters.
My issue with these solutions is that they either go further than required, are so complex that they cover methods way beyond what has been already covered in the course, or that they’re actually just plain wrong (i.e. no.4).
That said, I’ve found solutions to other challenges to be really useful and instructive on the whole.
As for my solution, it’s about as basic as it gets and uses only methods which have been fully covered in the course. The regex /^[A-Z]/ is way simpler than many others covered in that section of the course.

[JeremyLT]

I’ll say again, most beginners do not find regex simple or easy to understand. It’s cool that you like regex, but it’s a common source of confusion and frustration.

[igorgetmeabrain]

Yes, sure, I understand. I just figured that using a regex was an obvious approach as it’s a method which had been covered in considerable detail earlier in the course, that’s all.
I certainly agree that regexes can be pretty confusing at times though!

[igorgetmeabrain]

Ok, I think I’ve almost got my head around this now.
The one thing I just don’t quite understand is:

return { textCase }

This creates an object with a single key/value pair (textCase: textCase) but I don’t understand exactly why it’s required? When const textCase is defined within the myReplace function, does that alone not allow you to call upon the textCase function within Util? I’m sure it’s a really basic failure of understanding about how these things work but if someone could explain it to me, it would be really helpful!