Jacob Ruiz

View Original

Mastering Javascript Fundamentals: noConflict (Part 1)

Get the fundamentals down and the level of everything you do will rise. - Michael Jordan

As stated in my original post, I do 1 hour of video lessons from Watch and Code every day. If you're interested in learning Javascript in a way that goes beyond basic tutorials and gives you a foundational, practical knowledge without relying on frameworks - I'd highly recommend it. If you're reading these posts, please keep in mind that these are just my notes, and I'm not an expert (yet!). If your goal is also to master the fundamentals of Javascript, please head over to Watch and Code and start your journey there!

All screenshots were annotated using Shotty.

noConflict

Remember from previous lessons that we had this if/else statement to check whether librarySystem existed:

See this content in the original post

There's a problem with the else case where it attaches sandwichLibrary to the Window object: what if sandwichLibrary already has a value before sandwichLibrary is loaded.

For example let's say window.sandwichLibrary is set to a string, and then sandwichJS runs and overwrites this string. This is a problem.

See this content in the original post

So how do we use both when they are competing for the same name?

The open source community has come up with a solution for this. The solution goes something like this:

See this content in the original post

So by calling .noConflict on sandwichLibrary, it resets the window.sandwichLibrary to the original value, and it also returns the sandwichLibrary object.

The code above won't actually work yet, because we haven't written the noConflict method, so let's do that in the else case, since that's the only place where it applies.

See this content in the original post

Then let's add a debugger statement right before we call noConflict:

See this content in the original post

No in the debugger we can see that it resets window.sandwichLibrary to oldSandwichLibrary.

We can also see oldSandwichLibrary and sandwichLibrary (the object) in the Closure:

Then once we get to the end of our function, we can see in the debugger that we are, in fact, returning the sandwichLibrary object.

This is a technique used in a lot of javascript libraries, and it's important to be able to recognize it.

For example, jQuery has a noConflict method:

Link: https://api.jquery.com/jquery.noconflict/

It's a little a bit different, but more or less the same idea.

Another example is in Underscore:

To be continued...