Question from the 'Title Case' challenge. This part ---> String.prototype.replaceAt

Question from the 'Title Case' challenge. This part ---> String.prototype.replaceAt
0

#1

I got stuck on the ‘Title Case a Sentence’ Basic Algorithm challenge. When I say stuck I mean it built a little brick wall on my FCC path and I’ve spent a month trying to get through it.

My question is about the 'Basic Code Solution’ from the ‘Get a Hint’ button. This method below has a bunch of parts that are new to me:

String.prototype.replaceAt = function(index, character) {
    return this.substr(0, index) + character + this.substr(index+character.length);
};

What is this.? My guess is that it references a string to be used with substr(). If so, what string is it refferencing? I’m confused because I thought we were dealing with the array we made after splitting the initial string. If it sounds like I’m way off please give me as much detail as you can.

My next obstacle, the 'String.prototype.replaceAt', what are String and prototype doing? I’m at a complete loss on this part.

I understand what the rest of the function is doing (I think 0_o).

Thanks for your time friends!


#2

That example solution creates a new method for strings that replaces a character in a string (based on its location) with another character. (Technically you could replace it with another string too). The person who wrote that solution chose not to convert the string to an array. This is one solution, but definitely not the one most new students would arrive at. You can solve this challenge without creating any new functions.

The “Get a Hint” threads are of varying quality and helpfulness. (And a while ago we had a problem with them getting vandalized overwritten by users, and we may not have managed to successfully revert them all).

Please don’t feel like you have to spend a month fighting with a challenge before asking for help. Often if you come to the forum when you first feel stuck, someone can give you a nudge to help point you in the direction of solving the problem yourself.


#3

First off, doing what was done in that solution is not necessary - I solved it using an array.
Second, what they did in the solution is sometimes considered a bad practice.

What they did is called “extending native prototypes”. JavaScript has certain objects native to it: Strings, Arrays, etc. In JavaScript, the “parent” or top-level object is the prototype and other objects extend it. When you create a string or array, your object has access to the protoype functions from the natiive. As a quick example, here is some pseudocode:

// native to JavaScript, you don't have to write this
String.prototype.substr() = function() { // do whatever };
Array.prototype.foreach() = function() { // do whatever };

// your string or array can access this in code
// because all strings and arrays have these prototype functions
"bla bla".substr(2); // a
[1, 2, 3].foreach(n++); // [2, 3, 4]

You can see the protype functions available on strings here:

The String prototype doesn’t have a method to do exactly what is wanted, so whoever wrote the code modified the string prototype so that it would. When you add the function to the String prototype, now every string will have access to that function.

String.prototype.repeatMe = function() {
    return this + ' ' + this;
};

'hi'.repeatMe(); // 'hi hi'

this refers to the object that calls the function. In my example, 'hi' called the function, so it is this.


Seek and Destroy didn't understood the solution
#4

Thanks for the encouragement and explanation. I will be using the forum much sooner next time.

It sucks that some people messed around with the solutions but it is encouraging! Next time I read one that seems way difficult to be at the level I’m at I’ll just assume it’s been vandalized and do more research, lol.


#5

I had no idea that the prototypes worked in that way. I was reading up on them but didn’t get that understanding. Thanks for that explanation!

What would the this. be in the Get a Hint example? is it newTitle[st]?


#6

Formatting it like this may help.

for (var st in newTitle) {
    updatedTitle[st] = newTitle[st]
        .toLowerCase()
        .replaceAt(0, newTitle[st]
                          .charAt(0)
                          .toUpperCase()
        );
}
return updatedTitle.join(' ');

newTitle is the this in toLowerCase. What is returned from toLowerCase is the this at replaceAt. Inside the arguments of replaceAt call, newtitle is the this of charAt. the result of charAt is the this in toUpperCase. All of that is then put to the value of updatedtitle. Updatedtitle is then the this in join.

Good luck figuring that one out.


#7

Thanks for that. After a few reads it made sense. That was a good breakdown. I am still not clear on the code from the example:

String.prototype.replaceAt = function(index, character) {
    return this.substr(0, index) + character + this.substr(index+character.length);
};

Is the ‘this’ after the return referring to the result of the replace.At function? And the other ‘this’ in the return line, is it referring to the same thing, the function?


#8

this refers to the string the function operates on, it’s the context in which the function is called. You use it like 'hello'.replaceAt(0, 'y') (which returns a new string 'yello'). So this in that case is the string 'hello'