JavaScript Namespaces

How to use namespaces in JavaScript to avoid conflicts with another developer's variables and functions.
Code GIST: gist.github.com/prof3ssorSt3v...

[@rotrose7531]

These tutorials are the BEST ever uploaded on youtube, I am confident that it is only the matter of time the community following you will grow bigger and bigger. Please continue your style of teaching, We love it.

[@williambluish]

Oh this is super awesome! I just came from programming C# with Unity. Namespaces are the key! Thanks Steve!

[@perkin524]

Great series of videos - but the sound is poor - background hiss.

[@double__dash__]

Thank you! Really useful and clear, exactly what I was looking for it really helped

[@totfosk]

Thanks a lot Steve. I was trying to understand a JS library called Phaser 3 and I didn't understand the structure of it. I will give it a new try after this. Lots of love!

[@vinithbabum5282]

Excellent Man!!! Thanks a lot

[@timb.4902]

Just a note: this is immensely useful, and "can" be used for all intents and purposes as a "workaround" to mimic small namespaces. Some tricks would be required to continue to define the same namespace in additional javascript files that are part of this namespace to avoid creating an unwieldy jumbo file that is hard to navigate and maintain.

[@SteveGriffith-Prof3ssorSt3v3]

Now that ES Modules are widely supported it makes it much easier to create your namespaces in combination with the modules and scale more effectively.

[@Colstonewall]

Thanks, Steve!

[@chesterxp508]

Another very cool tutorial !!!

[@MrMarkgyuro]

to be clear, the ev parameter is the 'mouseover' and the 'mouseout' in this example?

[@SteveGriffith-Prof3ssorSt3v3]

Yes. Ev is the event object.

[@jodycurry1478]

In this example you have a HTML file and a JavaScript file, is it possible to do it all just in a JavaScript file or is it best to have both?

[@SteveGriffith-Prof3ssorSt3v3]

It's best to have both. In the HTML file will be where you put your content. Then you add a script tag to link to your JavaScript file. Put all the JavaScript in that file.

[@asgharibraheem8938]

Very well explained 👍👏

[@aminkushesh6058]

This tutorial is best but noise distracting

[@eh-lo2do]

can't i just use self invoked function to do the job ? i mean since i will not have access to the variables inside self invoked function ?

[@SteveGriffith-Prof3ssorSt3v3]

kzbin.info/www/bejne/l3nFZ2mnn55gbJY

[@ifcwlme]

If you cannot predict colorDiv in namespace1.js will be used by namespace2.js. How you can predict TONY was used already in namespace1.js ? If both case are not predictable. Why we don't simply change colorDiv to colorDiv2 in one of the js. It solve the same things.

[@SteveGriffith-Prof3ssorSt3v3]

The problem we are addressing is when you are using scripts that are written by other people or scripts that were written for different projects. We need to be able to avoid naming conflicts because you won't always be able to change code written by other people. So, we can wrap our code in namespaces to avoid the problems. Another way that we can accomplish this now is with ES Modules and Dynamic Importing. Here are a few videos about those: kzbin.info/www/bejne/eH3EnGiXh5mkjtk kzbin.info/www/bejne/ooq2l32nZr2Flas kzbin.info/www/bejne/f5m6oX9mnJiEg6c

[@einsteinwallah2]

sound not clear ... also if this was trying to solve problem of resolving conflict arising out of two authors of two scripts using same name then it has replaced that problem by declaring steve and tony which could have been same names ... so really the problem has not been solved

[@SteveGriffith-Prof3ssorSt3v3]

It does resolve the majority of naming conflicts because there is only one object per file that contains all your code. As long as good naming convention is followed you won't run into issues. Namespaces in many languages are there to help organize and avoid naming conflicts. It is also a good first step towards modules.

[@ceeeskayaar2281]

Regret to say that the suggested technique to passing object method as 2nd argument in addEventlistner method points to document rather pointing to method object when event to which its attached takes place ... where to send you my code snippets to have your suggestions...

[@SteveGriffith-Prof3ssorSt3v3]

Sorry. I don't have time to review people's code. Sounds like an issue caused by using an arrow function though. - kzbin.info/www/bejne/ep2xaXh5gM-UgNk

[@tinpham6413]

After JS, do you suggest me what to learn next, people suggest me learn framework but I want to stick at JS a little while (I think my JS skill didn't enough when see your hundred of video about JS), also want to build app with backend stuff I already approach with these: HTML, CSS, Sass, JS, npm, Fetch API, Async, Tailwind,...

[@SteveGriffith-Prof3ssorSt3v3]

Learn about PWA and service workers. Learn about managing history and location with SPAs. Then pick a framework like Vue or React to learn. Doesn't matter which one first. You should learn more than one but get good at one first. The more plain JS you know when you start a framework the easier it will be, but you dont need to know everything before learning a framework.

[@tinpham6413]

@@SteveGriffith-Prof3ssorSt3v3 Thanks. And also love your channel so much

[@buskinglankans]

Hey thanks man

[@romeojoseph766]

What If we use something like this.key rather than objName.key

[@SteveGriffith-Prof3ssorSt3v3]

In some cases you can. However, the value of this is impacted depending on how you write and call your methods. Lexical scope - if you understand how it works with `this` then you can - kzbin.info/www/bejne/m4iniZqpfsyHfc0

[@ayhamala3ma189]

thanks man ❤❤

[@vasylboyko7299]

Good lesson, bad sound.

[@SteveGriffith-Prof3ssorSt3v3]

My old videos were done with a cheap mic. Anything in the last year and a half has much better audio quality.

[@catwhisperer8889]

This is NOT about namespaces. It's about letting procedural code behind and get into object- orientated coding.

[@NurioonSoftware]

What if both their name's are Tony :D

[@SteveGriffith-Prof3ssorSt3v3]

Conflicts are still possible but much less likely. Now that ES Modules exist in the browser we can combine these two things to avoid conflicts.

[@yarik83men51]

+++

[@julybibhabib4106]

You create awesome videos but i need to say that your sound system is not good and hard to listen..

[@SteveGriffith-Prof3ssorSt3v3]

My microphone when I started 3 years ago was a cheap one. Anything in the last two years has much better audio

[@samuelokeke3149]

Sound is terrible

[@SteveGriffith-Prof3ssorSt3v3]

Some of my old videos from years ago were made with a cheap mic.

[@bdidue6998]

Audio quality is really bad. Lots of static in the background

[@SteveGriffith-Prof3ssorSt3v3]

Some of my old old videos were done with a cheap mic.