Check out a free preview of the full Advanced JS Fundamentals to jQuery & Pure DOM Scripting course:
The "Exercise 15: Eliminating “new”" Lesson is part of the full, Advanced JS Fundamentals to jQuery & Pure DOM Scripting course featured in this preview video. Here's what you'd learn in this lesson:

This exercise tasks you with removing the need to call the “new” operator to create new instance of the $ function. The $ function will now check to see if new has been called. If not, it will return a new instance.

Get Unlimited Access Now

Transcript from the "Exercise 15: Eliminating “new”" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Justin Meyer: But what we're gonna do is remove the need to call new when we're using our $ function, right. So right now to create an instance you have to use the new operator but what we wanna do is make our $ function detect if new wasn't used. And then make sure new was called.

[00:00:28] So let's take a look at our $ function and see if you guys have any ideas on how to do this. So here's our $ function, we need to make it so that if I call something like $("li"), that's still gonna create an instance of $ and still return that instance li's.

[00:00:53] So that we can do things like call our HTML method on it. All right, so quick question. What's going to happen if we call the $ function like this? What will this be inside here?
>> Speaker 2: Window.
>> Justin Meyer: Window, absolutely right, so that's wrong. So you guys need to figure out some way of detecting if this is incorrect.

[00:01:27] And then make sure $ is called with the correct thing. So I'll kind of write this out.
>> Justin Meyer: And I'm not gonna say what correct means cuz you can try to figure out what not correct means, if this isn't correct, call new $(,
>> Justin Meyer: selector) otherwise, continue as normal.

[00:02:03] So that's what you need to do, any questions about this? This is the tricky part, that I want you guys to kinda think about how you might make this work. The test has
>> Justin Meyer: Test just make sure that the same kinda, you were getting the same thing back that using new used.

[00:02:34]
>> Justin Meyer: Although it probably should be testing to make sure that context has an HTML method on it. But other than that, this should be test the same thing. So I'll put this up and we'll put the, this should be like seven minutes about that. We'll start with about seven minutes.

[00:02:52] Was there a question?
>> Speaker 3: Yeah, from before I think if this makes sense. He was asking about the HTML solution, arguments.length, can that be explained again?
>> Justin Meyer: Yeah, let me go to that.
>> Justin Meyer: To the HTML solution. So when we call, we get our li's
>> Justin Meyer: We'll make lis equal that.

[00:03:24] And we wanna call this HTML function. In jQuery if you call [COUGH] The the HTML function without any arguments, it returns the innerHTML of first li, might be something like a Doberman. If you call li's with multiple arguments or sorry, if you call li, or sorry if you call HTML with an argument, a string argument.

[00:04:02] Such as like, hey there, that's gonna go to every li and updated its innerHTML, to this. So this is what the behavior we want, we want this behavior for our HTML function, where it does different things depending on if a value was passed here. Now there's a way that a lot of times people will do it, they'll just say hey if we have a new val or new HTML.

[00:04:28] Then run through this because hey they passed something so we'll do the setter instead of the getter. But this isn't a great technique because what happens if someone wanted to just remove the HTML and set it to pass in an empty string? An empty string is false, so it would return the, it would do the getter code and return the first items in our HTML.

[00:04:56] Where we really want to be setting every element in our HTML to the empty string. So instead of doing it this way, also instead of doing like undefined, that would actually work for this case. But in case someone did pass an undefined and we actually wanted to set innerHTML to undefined, which really doesn't make sense for HTML.

[00:05:19] But it does make sense for other places where you might want to actually pass in an undefined value. The strongest best way of just checking if someone actually called it with an argument or not, is to do arguments.length. Now, the reason why arguments.length works is anytime a function is called along with the other, with all the values like the arguments, new HTML being put in the call object, and this being put in the call object.

[00:05:50] There's also an arguments array-like structure that you can access inside of a function and that gives you an array-like structure of each argument that was passed to the function. And arguments also has a length to tell you how many arguments that function was called with. So that is about as thorough of an explanation as I think I can get.

[00:06:14] Hopefully that helps.