JavaScript: Understanding the Weird Parts – The First 3.5 Hours
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703109279_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: JavaScript: Understanding the Weird Parts – The First 3.5 Hours
JavaScript it’s one of the most popular programming languages today maybe you’re new to it maybe you’ve been using it for years but you can’t deny that some of the most important some of the most widely used software in the world is written in it but the question is how well do you really know this surprisingly powerful sometimes odd an often beautiful programming language welcome to JavaScript understanding the weird Parts hi I’m Tony Alisa I’m a 15-year veteran of web application development and user experience design and welcome to this course this course is on JavaScript let’s be clear right from the start this course is not about making a web page interactive in jQuery or the In-N-Outs of node.js this course is focused on JavaScript the programming language in this course you’re going to learn how JavaScript Works under the hood we’ll delve into advanced concepts you’ll come to understand things that the people that built jQuery understand and that will make you a better web programmer a better node.js programmer or however else you’ll be using your JavaScript knowledge perhaps you’re coming from being a newer JavaScript programmer or perhaps you’ve been using JavaScript for years or maybe you’ve been involved in some other programming language and are coming to JavaScript either way this course will help you to understand that JavaScript falsely looks like other programming languages languages like Java or C++ or C JavaScript is nothing like those languages it’s a different concept A different mindset a different Paradigm this course will help you to understand that and while many programmers learning JavaScript or using JavaScript find some of its elements as they dig into the more advanced features odd or difficult to learn or weird you’re going to find that when you truly understand it understand how JavaScript works and why it works the way it does you’ll discover that JavaScript is a deceptively powerful and beautiful programming language and that’s one of the reasons why it’s so popular now that actually leads to My Philosophy when it comes to learning code My Philosophy is this don’t imitate understand the biggest mistake I think people make in designing programming courses and then looking for programming courses and books and materials is looking for or providing just code to imitate now don’t get me wrong examples are very important but examples parting writing down the code that somebody else wrote for you on a screen or on a piece of paper only takes you so far as soon as you’re in the real world and you have to debug a difficult problem or you have to start some code from scratch that isn’t anything like what you’ve seen in your examples you’re going to fall down you’re going to have problems you won’t be able to move forward however if you deeply understand what the tool is doing for you and a programming language is just a tool then you’ll be able to debug those hard problems come up with Innovative and interesting Solutions be able to look at other people’s really good code and understand it borrow from it or enhance it so in this course we’ll look at plenty of coding examples but we’ll focus first on the understanding the deep understanding of the programming language so that then the examples make sense and then you can use your knowledge in the real world in brand new situations that said it is expected that you have very very basic JavaScript knowledge as you come into this course so you understand what a Javascript file is variables functions basic understanding of functions we’re going to dive much deeper into functions through this course and Loops just the very basic knowledge of beginning programmer might have if you have that you’re good to go so let’s get started we’ll dive in and I think you’ll come to appreciate this beautiful programming language JavaScript all the more let’s understand JavaScript let’s get started let’s take just a moment and talk about setting up for this course you’ll need two things one an internet browser with developer tools that could be Internet Explorer Firefox Safari or Chrome in our case we’ll be using Google Chrome and you’ll also need a text editor I’ll be using brackets.io which is free and also lets you quickly and easily run web pages in JavaScript code now I know we said this course isn’t about building websites or jQuery or that sort of thing just focusing on the JavaScript programming language we’re going to do that though by writing JavaScript code and then running it in the browser and using the browser’s tools to learn more and dig deeper into what the language is doing if you’d like to match up for this course with the tools we’ll be using you’ll need Google Chrome again you can find that if you don’t have Google Chrome at google.com/chrome go to that address download and install Chrome on your computer once you have it installed you’ll be able to go to the menu and you’ll be able to go to more tools and then developer tools or you can hit F12 on your keyboard we’re going to spend a lot of time inside these developer tools they’ll probably pop out like this for you and then you can use this button if you like to undock into a separate window and give yourself a bit more space you can also hold down your control or command key and then do plus or minus to increase or decrease the font I’ll be using a larger font size so that you can see what we’re doing in the video now I’ll close this with the X in the upper right of the developer tools window and if you want an excellent text editor perfect for this course just go to brackets.io brackets is provided by Adobe it’s free and it lets you edit HTML CSS and JavaScript and the really nice part is you can immediately run it in the browser because it comes with a little server that’s just part of the package again this is free you can go to brackets.io in install it on your computer once you do that you just open it and as we’re writing code in this course or you’re perusing the downloadable cord uh code that the course makes available we’ll just go to file open folder find a folder say a folder on your desktop or whever you choose to download these files or work on it and that will be the folder that contains your code and then we’ll just open our file and begin writing our code you can adjust the theme under view themes to change your color scheme or increase and decrease your font size I’ll be using again an increased font size for the purposes of the video and that’s it Google Chrome and brackets and you’re ready to go for this course let’s take a moment to describe something that we’ll do throughout this course wherever necessary in computer science in programming in all these fields there’s a tendency to use words that sound a lot bigger and more complicated than the thing that they’re actually describing so every now and again as we’re going through this course when we’re covering a concept or a topic and it’s important that we’re using the same vocabulary and that we be understood we’ll drop one of these big word alert when you see that that means we’re about to discuss a word that’s probably a lot less complicated than it sounds when we see that we’ll break glass for emergencies and give the definition and then some more detail and talk about it in some depth so as we’re going through this course because this is an under the hood style course a course that delves into the details don’t be intimidated by vocabulary these words these terms that we may use some you may have heard before others you may have not are not a big deal we’ll stop we’ll discuss them and then we’ll show how they are used how these concepts are used throughout JavaScript so remember it’s just vocabulary a couple of last notes in regard to this idea of understanding remember the JavaScript the programming language is really abstracting you away from how the computer works and how the browser works if that’s what you’re using to implement JavaScript or the server that’s running the JavaScript we need to understand how the tool is functioning in order to be able to properly write JavaScript code deep Advanced JavaScript code we’re going Beyond just the basics so even though it may seem at moments through this course course that we’re covering something that oh you don’t really need to know you’ll find as we progress that that fundamental foundational knowledge is going to brighten the path for you give you plenty of aha moments so be patient as we go through Concepts because very quickly you’ll see just how important they really are this course is also going to talk about Frameworks one of the best things about JV JavaScript the past several years also happens to be in some ways one of the worst the open source Community has developed a tremendous amount of very popular very powerful JavaScript libraries and Frameworks things like jQuery and angularjs these things are great and they help us quickly build some pretty neat and pretty awesome software applications however a lot of people are being introduced to JavaScript via these Frameworks rather than learn JavaScript first you might learn jQuery or learn angularjs and JavaScript kind of comes along for the ride the problem is that jQuery and angularjs and all these other Frameworks and libraries as awesome and wonderful as they are are just JavaScript code they’re a Javascript file that you include in your application that provides you a bunch of code that other people really smart good Developers ERS have written but a lot of developers if they opened up those files if they opened up that code they wouldn’t be able to understand what’s in it because we tend not to then understand the deeper parts of JavaScript and that’s dangerous if you want to build a robust good JavaScript application you can’t just know jQuery or know angular you have to know and understand the things that the people that wrote jQuery and angular know and understand and so that’s what this course is going to Endeavor to do to give you the kind of education the kind of information that will let you open up jQuery look at it look at the source code and understand it in fact at the end of this course that’s exactly what we’re going to do and then we’ll try building our own little mini framework or Library just like jQuery and angular and others have done using these same techniques for understanding how to structure JavaScript applications and how they work so that’s Frameworks now the weird parts of JavaScript have to do with people coming from other programming languages perhaps you are and having certain expectations because of how JavaScript looks and not understanding just how different it is under the hood from most of the main stream programming languages and yet its weird parts are often its most powerful and beautiful parts so when we say that we’re understanding the weird Parts what we’re really going to do is understand the how’s and whys also no programming language is perfect so occasionally through this course we’ll stop and point out something that’s a hazard something that’s a danger a downside of the JavaScript programming language or something that you should avoid so so that’s it understanding Frameworks and the weird Parts we’re ready to dig in to JavaScript it’s time for our first aside throughout this course we’ll have lectures that are asides that means that we’re going to cover something that’s just off to the side of what we’re talking about directly but very very important to understand whatever technique or concept or aspect of JavaScript that we’re about to cover now each aside might have a particular type in this case we’re going to do a conceptual aside the conceptual aside means we’ll focus on a concept or an idea that’s fundamental to the rest of the course of understanding and building slowly our knowledge of JavaScript which is what we’re going to do this conceptual assign will cover three ideas syntax parsers execution contexts and lexical environments these are fundamental concepts fundamental ideas to understanding the rest of what we’re going to talk about and you’re going to see these ideas come up again and again throughout the rest of this course now all three of these are complicated sounding terms that actually aren’t that difficult to understand so we’re going to give you your first three big word alerts in a row all right so here’s our first one big word alert syntax parser break glass a program that reads your code and determines what it does and if its grammar or syntax is valid so when you write JavaScript it isn’t magically directly telling the computer what to do you’re abstracted away from all of that you’re writing code but then someone else or other people built programs that convert your JavaScript into something the computer can understand those programs are called compilers and at times they also have to do with interpreters but those programs interpreters and compilers do the process the work of actually reading your code character by character and determining if the syntax is valid and then implementing that syntax in a way the computer can understand so when you’re thinking about your code think of it more like this you have your code that you’ve written and there’s a program that is going to convert what you’ve written into a real set of computer instructions something the hardware can physically understand so if you have a function with a variable that function and variable will be represented in memory but it’s being translated from what you’re writing what is more human readable to what the computer can understand there’s a compiler or an interpreter between those two things and part of that is a syntax parser so it’s going through character by character like f u n CT i o n and says oh that’s function so there should be a space after this and then the next thing I see up until the parentheses will be the name of the function etc etc and that gets translated by the systems that someone else wrote but that also means that in that translation process if they so choose the programmers that wrote the compiler can choose to do extra stuff your code is not what’s actually being given to the computer but a translation of it and so along the way the engine that is interpreting your code can decide to do other things those programmers those guys and girls could have chosen to do something else and in fact that’s going to come come up as an important element of understanding JavaScript so that’s syntax parsers and thinking about the programs that are actually running every time you run your JavaScript code that intermediate program that’s creating your code and we’re going to see this come up later on all right time for the second one so big word alert what’s the next big word we’re going to cover lexical environment that’s a big term where something sits physically in the code you write the word lexical means having to do with words or grammar so we’re talking about the code you’re writing its syntax its vocabulary now a lexical environment exists in programming languages in which where you write something is important so that sounds kind of funny but actually not every programming language is that way but remember we said you might have some code let’s say a function with a variable inside of it the variable sits lexically inside the function that is physically the code that you’re writing that’s where it sits but remember we said that your code is not what’s actually given directly to the computer but but it’s translated into something the computer can understand but in programming languages where the lexical environment is important that means that where you see things written gives you an idea of where it will actually sit in the computer’s memory of how it will interact with other variables and functions and elements of the program and that’s because the program the compiler that’s converting your code to those instructions cares about where you put things it makes decisions that syntax parer going through everything makes decisions so when we talk about the lexical environment of something in the code we’re talking about where it’s written and what surrounds it got that all right let’s move on to the third one our last big word alert what is it execution context a wrapper to help manage the code that is running there are lots of lexical environments areas of the code that you’re looking at physically but which one is currently actually running is managed bya what’s called execution context and an execution context contains your code the running code it’s running your code but it also can contain things beyond what you’ve written in your code because remember again your code is being translated being processed by a whole other uh feature a whole other set of programs that someone else wrote and so it’s executing your code and it can do other things as well and that’s what’s happening inside JavaScript we’ll see that very shortly so lexical environments we’re talking about execution context we’re talking about syntax parsers just remember it it’s important we’re going to hear these terms and understand them throughout the course and it will give us a basis to understand what’s happening under the hood in JavaScript all right let’s move on it’s time for a conceptual aside name value Pairs and objects as we talk about JavaScript objects are incredibly important and we’re going to spend a lot of time on them but we need to understand what we’re talking about when we say an object in regards to JavaScript itself first of all we need to understand the term name value pair it’s quite simple actually a name value pair is a name which maps to a unique value now that name may be defined more than once but it can only have one value in any given context remember we’re talking about execution context so in any particular execution context that is a section of code that is running a name can only exist and be defined with one value however that value may be more name value pairs okay that sounds a little confusing but all we’re really saying is and there’s a name and that name is assigned a value but that value could be a collections of name values okay for example this is a name value pair you’ve probably done things like this all the time in code you have a name a variable and a value in this case address is the name and 100 Main Street is the value that’s a name value pair pretty simple now when we’re talking about objects we can then use this name value pair concept to Define them an object is a collection of name value pairs that’s the simplest possible definition of an object when you’re talking about JavaScript now other languages other programming languages might have more complex Concepts when it comes to objects but when we’re dealing with objects in JavaScript that’s really what they are they’re a collection of name value pairs so for example I might have a name and that name has a value but that value might be a couple of other names and values and inside that name that value might be other name value Pairs and I might have a few of these so I have a name and a value but the value might be other lists of names and values which in turn might have other lists of names and values for example the address example we had before that was just a name value pair here it’s a collection of name value pairs address is a collection of other names and values address is still the name but the value is a collection street is a and Main is a name value pair number and 100 is a name value pair apartment is a name and its value is another list or collection of name value pairs floor is the name three is the value number is the name 301 is the value that’s an object in JavaScript when we’re talking about objects and JavaScript we’re talking about collections of name value Pairs and that value might itself be another object so apartment has a collection of name value Pairs and that’s an object so address it’s value is an object apartment its value is an object you see how they nest down don’t think any more deeply about objects in JavaScript than this we’re going to see some interesting things you can do with objects but at its core this is what an object is in JavaScript it’s just that simple I know what you’re thinking are we going to actually write any JavaScript code anytime soon yes right now and for the rest of the course this lecture is the global environment and the global object whenever code is run in JavaScript it’s run inside an execution context we’ve seen that word already meaning a wrapper that the JavaScript engine the program that other people wrote that’s parsing and looking at and verifying and executing your code that wraps that up that code that you’ve written it wraps the currently executing code in an execution context so when we look at our very first JavaScript program we’re going to be looking at an execution context being created and run and the base execution context we’ll look at a few because there’s more than one that runs during a JavaScript program normally the base execution context is your Global execution context and it has a couple of special things that come along for the ride the base execution context the global execution context and when we say Global we’re talking about the thing that’s accessible everywhere to everything in your code it’s Global all right so the global execution context creates two things for you you don’t have to in your code it creates a global object number in objects is just a collection of name value pairs it it creates this global object and it creates a special variable for you called this the JavaScript engine is creating these two things for you whenever your code is run because your code is wrapped in inside an execution context and these two things are created for you by the JavaScript engine all right let’s take a look all right it’s that time we’re going to look at our very first JavaScript program now we’re going to run our JavaScript in the browser this is very convenient again because we have our Dev tools and we can see what’s going on under the hood a little bit easier but we’re going to do that simply by having a simple HTML page reference referencing a single script I’m calling app.js which will always contain the code that we’re working with I have this sitting in a folder and I’m opening that folder in Brackets and then I’m going to hit this button in the upper right in order to launch Google Chrome and run this web page which will then cause the browser to run this JavaScript That’s How we’ll do all of our examples all right so are you ready here’s our very first JavaScript program let’s open app.js there it is what do you think I know what you’re thinking hey that’s empty there’s nothing in that file all right well you’re right I wrote no code let’s run it I’m going to hit my live preview button Google Chrome launches and then I’m going to open up the dev console notice there are no errors the JavaScript file was loaded the syntax parser started and realized there is nothing to parse so I had no code to execute but because it started executing the JavaScript because it ran the file an execution context was created and remember those two things that were supposed to be created for us a global object and a special variable called this well inside here inside the dev tools console window I can take a peek inside the execution context at the values of variables and what’s going on in memory so if I just go this look there’s something there now I didn’t build this I didn’t put that in the code the code is empty but the execution context was created by the JavaScript engine and it decided what the value of this should be and what this is is the window the current window that I’m in my browser window because I’m running JavaScript in the browser interestingly I have available an object called window the same object so this window object the current tab that I’m on is the global object inside browsers now if you’re using node.js if you’re running JavaScript on the server it won’t be the window object there’s a different global object but there is always a global object when you’re running JavaScript in the case of browsers it’s the window if I had a separate tab open that would be a separate global object because each tab each window is its own execution context its own Global execution context but notice I have these two values and I wrote no code that’s the JavaScript engine doing this for me so we just learned something an execution context was created at the global level there’s a global object meaning that object is available to all the code running inside that window inside that area inside that Javascript file inside that lexical environment and there’s a special variable that the JavaScript engine created that sits inside the execution context called this and what we saw was that the global object inside browsers inside internet browsers like Google Chrome or Firefox or whatever the case is the window object and that it did create a variable called this and at the global level those two things are equal this refers to the window object and you can also just say window and get the global object now just to be really clear when we say Global in JavaScript that means not inside a function don’t think too much deeper than that that means code or variables that aren’t inside a function is global all right so we already saw that we have window and this a global object and this available to us without a single line of code now what happens when we actually put some code in all right let’s write our first bit of code I’ll create a variable and call it a and just give it a value hello world and I’m going to create a function called B and just leave it empty got that a variable in a function and now I’ll run this and I’ll actually have some code now the execution context is created this code is not inside a function although I’m creating a function here all this code is not inside a function so it’s Global this and window are already available to me and you’ll see something interesting if I look at window and open it up remember JavaScript objects are name value pairs so here’s lots of names and lots of values function can be a value but if I scroll down ways there see that A and B my variable and my function in JavaScript when you create variables and functions and you’re not inside a function function those variables and functions get attached to the global object so if I just go like this a it’s hello world but I could also go window. a the global object. a it’s the same thing see that so your variables and your functions when lexically not sitting inside a function they’re just sitting right there on the global object all right so when code is executed your JavaScript code is executed and execution context is created at the base level when you’re not inside a function you have a global object that the JavaScript engine creates for you as part of that execution context if you’re running code inside a browser that global object is the window object you get a special variable called this and in the case of the browser this at that Global level is just the same as the window object it’s equal to the window object there’s also something that is something we haven’t talked about yet and we will shortly a link to the outer environment now when you’re running code inside a function that means the code that’s outside the function but when you’re running at the global level meaning you’re not inside a function well there is nothing outside you’re as outside as you can get there’s no outer environment so that’s just null it’s nothing at the global level but we’ll see this come up later very importantly when running and executing functions and finally the execution context is running your code if you’re creating variables and functions then that’s going to sit on the global object if you’re writing code that is global again that’s not inside a function but the important thing here is that there is this wrapper this execution context which has these other things that you didn’t write and JavaScript the JavaScript engine running your code is doing this for you all right so let’s move on so we’ve seen how JavaScript the engine is wrapping our executing code in an execution context but there’s an important aspect one of those weirder parts of JavaScript that we need to understand and to understand it we just need to dig a bit more into what the JavaScript engine does to create an execution context so this is the execution context creation and hoisting to start with let’s look at a phenomenon that happens in JavaScript that people find surprising and perhaps a bit confusing I have my simple variable here a and my function B I’m going to actually put a line of code in here just so the function does something I’m going to use console.log uh this writes to that console in W uh tool window in the dev tools in the browser if you haven’t used this before we be using this an awful lot throughout this course it’s just going to Output um whatever we put in here out to that Dev tools window so when we see called B we’ll know that we called this function now if I was to call the B function if I was to invoke it to execute it you would normally think I would do this and I can console.log a after that so what would you expect to see what I would expect to see called B and then hello world all right so let’s go ahead and execute this we’ll run it in the browser hit F12 for my Dev tools and look exactly what we expected now let’s do something a little different that in other programming languages you would expect to not work at all I’ll go ahead and go back to brackets and I’m going to move these calls where I invoke the B function and where I output the value of a to the top of the page I’ll save this now what would you expect to have happen well in most programming languages you would expect an error because programming languages execute their code one line at a time and since we haven’t gotten to the B function I can’t use it yet that’s what you would normally expect but JavaScript doesn’t like that when I go back and refresh this page to rerun the JavaScript look what happens it ran the function and instead of throwing an error it gave me a value but not the hello world value that I saved but this thing called undefined so even though the function was below where it was executed it still ran and in fact this a variable was available to me even though it wasn’t the proper value watch what happens if I just remove it outright so I’m trying to console. log a and I don’t have it declared as a variable anywhere now I actually get an error a is not defined but if I put it back so that somewhere on this Javascript file I have that a variable declared instead of an error I get a value the phrase undefined this phenomenon is called called hoisting but the way it’s explained I think can give you the wrong impression the way if you look online that hoisting is explained is that people say well that variables and functions in JavaScript are hoisted or moved to the top by the JavaScript engine as if they were moved physically up to the top so that they work no matter where you put them but we can tell that’s not quite right because a wasn’t set to hello world so it wasn’t like this was line was physically moved it behaves a bit more like this as if I had a variable declared and then set the value later but still that’s that’s really not what’s happening because we already said what’s executing isn’t what you’ve written it’s being translated by the JavaScript engine so it’s not like the JavaScript engine is physically moving the code that you typed around and then executed it so let’s undo all this here’s the code that we wrote to understand what JavaScript is doing we just need to dig a little bit deeper into the execution context and how it’s created the reason JavaScript behaves the way it does that variables and functions are to some degree available even though they’re written later in the code is because the execution context is created in two phases the first phase is called The Creation phase in that phase we know we have the global object which is set up and in memory we have this which is set up and in memory and again the global object only referring to when we’re dealing with the global execution context we’ll see other execution contexts later but this is always created inside an execution context there’s an outer environment that’s created and in that creation phase as the parser runs through your code and begins to set up what you’ve written for translation it recognizes where you’ve created variables and where you’ve created functions and so so it sets up in this creation pH the memory space for the variables and functions and it’s that step that is somewhat confusingly called hoisting it’s not actually moving code to the top of the page all this means is that before your code your code begins to be executed line by line the JavaScript engine has already set aside memory space for the variables that you’ve created in that entire code that you’ve built and all of the functions that that you’ve created as well so those functions and those variables exist in memory so when the code begins to execute line by line it can access them however when it comes to variables it’s a little bit different you see the function in its entirety is placed into memory space meaning that the function its name and the code inside the function that’s being executed however the next phase the execution phase which we’ll talk about in a moment where it actually executes your your code line by line that’s when these kind of assignments are set where a equals something so the JavaScript engine when it sets up the memory space for a it doesn’t know what its value will ultimately end up being until it starts executing this code so instead it puts a placeholder called undefined that placeholder means oh I don’t know what this value is yet that’s the same placeholder that we would have if we never said it at all all variables in JavaScript are initially set to undefined and functions are sitting in memory in their entirety that’s why it’s actually a bad idea to rely on hoisting in any way you can run into trouble when you realize that a value that value is actually undefined and not the value You’re Expecting so while this technically kind of works it’s better to always do this so that you don’t get caught up in that trap now that said we understand that when we’re talking about hoisting when we’re talking about this scenario where I can call the function even though it’s declared later really has to do with the fact that what I wrote is not what’s directly being executed but the JavaScript engine is then taking my code and making decisions in this first phase of creating the execution context the wrapper around my code being executed it’s going to set up the memory space for the functions and the variables that it sees that are going to be used when it starts executing the code and therefore we have access to them in a limited way before they actually physically appear on the page inside that lexical environment kind of weird right but not so much when you understand that it’s just phase one I’m going to set up the memory space so when the code begins executing those things are actually already sitting in memory because it looked at your your code and already preset things up to be ready for the code to start executing it’s time for another conceptual aside we’ve already talked about this a bit but it’s important enough to delve just a little bit into JavaScript and undefined we’ve already seen that there’s this first phase of creating an execution context in which there’s an global object for the Global execution context there’s a special variable called this which is always created there’s a reference or a link to the outer environment if there is one and this phenomenon called hoisting where variables are set up and functions as well and in the case of variables they’re initially set equal to undefined but what do we mean by that well let’s go back and make our example a bit simpler I’ll get rid of the function and the function call and we’ll just focus on the concept of undefined so I’ll just take my variable a declare it and then log it I’ll go ahead and run this in Brackets and we see the phrase undefined now remember we already saw that if I don’t declare it at all with the VAR keyword it actually throws an error where it says a is not defined but that’s confusing because is it not defined and undefined the same thing well no because when we say and I’m going to put the VAR a back in JavaScript when we see undefined as opposed to that error this isn’t simply the word undefined but it’s actually a special value that JavaScript has within it internally that means that the variable hasn’t been set to prove that I’ll show you something I’ll do if a I’m going to do triple equals now if you’ve never seen triple equals before we’ll talk about that at length later in the course but this is very similar to Double equals is equal to but it’s a bit saf and we’ll see why later just for now we’ll just use triple equals because this is good practice and we’ll explain why when the time comes but for now just imagine using triple equals anywhere where you would use double equals all right so triple equals and then I’m going to say the word undefined and then if it’s undefined I’m going to Output a phrase a is undefined and and then I’ll put else if it’s not undefined I’ll put console.log a is Def a is defined notice that undefined isn’t wrapped in quotes this isn’t a string it’s a special keyword it’s a value a special value in JavaScript and when I go back and run this notice that a is undefined so when this if statement checked if a was equal to this special keyword this special value undefined it said yes it is if I was to set a up here equal to a value then by the time we get down here a is set and so a is defined this was false it was not equal to undefined but if I don’t set the value again this will be true because the initial phase of creating the execution context sets all variables equal to undefined and if you don’t do anything else that’s what that value will be notice again this is different than if I simply never declare the variable VAR a and the tempt to console.log a when I refresh this it gives gives me an uncaught reference error a is not defined that’s because that initial execution context creation that creation phase when it went through it didn’t find a VAR a so it never set up the memory space so when it went to execute this code it said hey I don’t have a in memory at all so it gave you an uncaught reference a is not defined I don’t have it in memory that’s what the browser is saying that’s what the JavaScript engine inside the browser is saying however when I when I declare VAR a a is placed into memory during the creation phase so the execution context solve our a and set up a in memory and so even though I haven’t set it to a value the JavaScript engine which is doing more than what I’m just writing in my code already set it to the Special Value called undefined so undefined is not like empty or doesn’t exist it doesn’t literally not exist it’s actually a value it’s actually taking up memory space it’s a special keyword a special value that means this is the value that was initially set by JavaScript and that leads to a little bit of a warning never do this never set yourself a variable equal to undefined because actually you can for example I could set this initially to hello world and then console. log it and later for some reason set it to undefined and we’ll see that it is watch hello world and then later it’s undefined that’s perfectly valid JavaScript but it’s a little dangerous it’s better to let undefined that special keyword mean I the programmer never set the value that will really help you when debugging code if you make a habit of setting values equal to undefined then it’s really hard to tell if something is undefined because you said it or because the JavaScript engine said it and you never set it to anything else it’s always better to let undefined mean I’ve never set this value that’s really useful and it will help you in your debugging so undefined this is a special value that is also a special keyword in JavaScript and it’s the value that variables receive during the creation phase the first phase of creating an execution context sets up the memory of the variable and in that memory space puts the value called undefined I would have called it something else personally like not set but that’s what JavaScript calls it undefined and if you don’t in your code set it to anything else that’s what it will be or if you set it if you set it something else later and use it beforehand that’s what it will be all right so that’s JavaScript and undefined all right so remember we said there were two phases when it came to the execution context within the JavaScript engine the first phase was the creation phase when it set up the variables and functions in memory and then the second phase is the execution phase and this phase is pretty simple to understand in the execution phase we already have all those things set up that we had before and now it runs your code the code you’ve written line by line interpreting it converting it compiling it executing it on the computer into something the computer can understand and it runs your code line by line so if I go back to to our example that we used for hoisting and I console.log a here and I’ll just go ahead and move the function to the top so we’re using good practice so we don’t have confusion I have a function and I call it I’m logging a I’m setting a to equal to a value and declaring it and I’m logging a again so what do you think we’re going to c b will be called then a will be logged then a will be logged again we’re going to see three lines because console.log is also called so what are the three lines what’s the line here what are we going to see here and what are we going to see here all right let’s go ahead and run this refresh did you get it right it called the function the first time it called a it got undefined and the second time it got hello world why because now we’re in the execution phase so in the creation phase we set up this function and VAR a was set up and set equal to undefined and now it begins to execute code so line five is executed and it runs that function line seven is executed and it outputs the value of a to the console and since a was set to un defined in the creation phase that’s what we see then it executes line 9 and sets the value in memory of a to the string hello world exclamation mark and then in line 11 it once again outputs the value of a in memory to the counil which is now hello world so it just executed these things line by line and we understand between these two phases the creation phase and the execution phase now why we see what we see and why JavaScript behaves the way it does it’s time for another conceptual aside when it comes to JavaScript this one is single threaded synchronous execution so we have two rather large looking terms so guess what big word alert first of all single-threaded it sounds pretty complicated but it’s easy to understand that means that one command is being executed at a time so any program is full of many commands many commands within the code single-threaded execution means you’re only doing one at a time now when we’re dealing with browsers understand that JavaScript isn’t the only thing happening in the browser so when we say JavaScript is single-threaded it may not be under the hood of the browser but from our perspective as programmers JavaScript behaves in a single-threaded manner all right the next one and once again big word alert synchronous this is very similar to single thread synchronous meaning and the purposes of programming one at a time not two at a time or three at a time but one line of code being executed for synchronous execution at a time and for our purposes in order so the code is executed one line at a time in the order that it appears and that’s it single-threaded synchronous execution meaning that in JavaScript only one is happening at a time now I know what you’re probably thinking but hey I’ve heard of asynchronous requests in JavaScript especially on the web Ajax the a stands for asynchronous what are you talking about well we’ll see that in just a little bit but for now just trust me JavaScript is single-threaded synchronous execution in its behavior all this time we’ve been talking about the global execution context and how it’s created and executed but we also mentioned that functions are special in regards to this here we’ll talk about function invocation and the execution stack and we’re going to introduce this concept that will be fundamental to understanding some very important and advanced concepts in JavaScript before we do that though we’ve rather casually used a word here a word that sounds a lot more complex than it really is big word alert invocation that just means running a function or calling a function so when we say we invoke the function or function invocation we just mean hey run the function in JavaScript we do that by using parenthesis you put the name of the function and then put parenthesis when you did that you invoked the function you told the JavaScript engine to run it so now let’s talk about what happens when you invoke a function in JavaScript to do that let’s look at a simple example so I have a function B that I’ve created it does nothing a function a that calls or invokes function B and and then I’m invoking function a this is a very simple example but it helps us to understand what’s happening under the hood now Here Comes This fundamental very important concept let’s step through what we know is going to happen first if I put this code in a Javascript file and ran it first of all what’s going to be created that’s right a global execution context the parser will parse the code and then the compiler the program that’s going to interpret your code will start up and say well I need to create a global execution context it’ll create the variable this it’ll create a global object if you’re in the browser it will create a window object and then it will attach these functions to it will set up the memory space for them in the creation phase of the execution context that first phase so b and a will be in memory and then the code will be executed line by line now it won’t execute anything in those functions because they haven’t been invoked but when it hits a at the bottom and it says Ah I’m supposed to invoke or call or run that function a here’s the thing that actually happens a new execution context is created and placed on What’s called the execution stack and the stack is just what it sounds like one on top of the other on top of the other and whichever one is on top is the one that’s currently running so anytime you execute or invoke a function in JavaScript a new execution context is created and put on the execution stack so the execution context is created just like the global one it will have its own space for variables and functions it will go through that create phase and then it will execute line by line the code within the function however if I have another function invocation it’s going to stop at that line of code and create another execution context and run that code now in the case of B there is no code to run but this is how function invocation happens in JavaScript every function creates a new execution context which runs through the create phase and then executes the code line by line within the function when B finishes because it’s at the at the top of the stack it will get popped off the stack then a then back down to Global notice that this doesn’t matter the order lexically doesn’t matter nor does the rest of the code that happens to be surrounding those function calls for example let’s suppose we put a above B and we had some other code surrounding these function calls that doesn’t matter because even though lexically a is above B remember what’s happening both of those functions are already in memory during the create phase of the initial Global execution context those VAR C VAR D that you see down below each of those function calls let’s talk about what’s going to happen first of all a at the bottom will invoke function a so that will be the next put on the execution stack the execution context for the function a then that becomes the currently running code which means that very last line at the bottom r d below the a that’s not going to be run yet because JavaScript is synchronous one line at a time and what’s running is the current code within the current execution context which is the one at the top of the stack so when a is at the top of the stack it will start to run line by line it hits that line where it invokes b b creates a new execution context so that becomes the top of the stack and so it is running line by line and it runs its single line of code there and only when it finishes will we go back to finishing a why because when the function finishes the execution context is what’s called popped off of the stack so now what’s the current execution context again a so it runs the next line of code that hadn’t yet been run inside that execution context meaning that VAR C line and then when a is finished it’s popped off the stack and the next line of code that hasn’t yet been run in the global execution context is run which is that very last far D see how that works every time a function is called a new execution context is created for that function the this variable is created for that function the variables within it are set up during the creation phase and the code is executed line by line but every time a function is invoked even even if it’s invoking itself a new execution context is created put on top of the stack and then when the function finishes it’s popped off and whatever’s at the top is what’s currently running line by line synchronously this concept is very important to have in your mind as your mental model for what’s happening as you’re invoking functions because it has to do with the rest of what we’re going to discuss so let’s move on talking more about functions context and another addition variable environments here’s another phrase that’s used when talking about JavaScript under the hood it’s a lot more complicated sounding than it really is variable environments well big word alert the variable environment is just talking about where the variables live that you’ve created and how they relate to each other in memory so when you think about the variable environment just think about where is the variable let’s move on from there let’s look at a piece of sample code again I have two functions a function b and a function a inside function B I declare a variable called my VAR and don’t set it equal to a value in function a I set a variable called my VAR also and set that equal to two and then outside the functions I also declare a variable called my VAR again and set that equal to one then a is called and inside a b is called so what’s going to happen What is the value of my VAR at any point in time to answer that we need to think again about execution context what’s happening as these functions are invoked so at first what happens the global execution context is created and so that bottom myvar is put into memory space in the case of the global execution context its variable environment is the global object or a window in a browser so then the code is executed and that memory space will get a value of one when it hits that my VAR equals one line and then it hits the invocation of a and what happens a new execution context is created for a and when it’s created that my varb will be put into that execution context variable environment see every execution context has its own variable environment and its value will then be two during the execution phase when that line my VAR equals 2 is run then it invokes b and a new execution context with its own variable environment its own memory space for its variables is created and since it’s not set equal to a value my VAR will be put into memory with a value of as we’ve learned before undefined this has to do with something called scope just means where are we able to see the variable each variable that we are looking at is defined within its own execution context because it’s within a function and every time you call a function you get your own execution context so even though the myar is declared three times they’re distinct they’re unique and they don’t touch each other all right let’s prove that I’ve put my code into a Javascript file and I’ve added some console.log so we can see the values so we set my VAR equal to one log it then call function a which will create a new execution context on the execution stack on top of the global execution context so this will be the running code it will create myar in its own variable environment log it and then we start another execution context by invoking a function and it will put its own variable called myar into its variable environment and we’ll log that so what should you expect to see well we’re going to expect that we’d see this console.log happened first it runs a so we’d see this one second and then it runs B so we’d see this one third so I should see one two and what will be the value if I haven’t set a value what value does the execution context creation phase set all variables to that’s right the special value undefined so I should see one 2 undefined and so I’m going to go ahead and run this and open up the developer tools go to the console and look 1 2 undefined exactly as we expected so each of these myars is sitting in its own execution content text calling this function didn’t affect this myar watch I’ll console.log myar after calling a should that have an impact the answer is no because once we finish a we’re now the currently running code is the global execution context where myar is one so I should see another one when I console. log here let’s say that again this code is running inside the global execution context these variables are attached to the variable environment of the global execution context so when I log this I see a one this calls and this runs and that’s its own execution context with its own variable environment the same with B so when I leave b a a finishes and when a finishes I’m back to the global execution context because the b and a execution contexts have been popped off the stack they’re gone the currently running context is the global execution context and what was my VAR in that context one so I’ll save this run it what should I see that’s right 1 2 undefined one see that one because that’s inside the global execution context two because that’s inside A’s execution context undefined because that’s inside B’s execution context and then one again because we’re back to running inside the global execution context got that does it make sense try this code out for yourself mess around with it a bit see if you understand it remember this is important and as we move on if you’ve got this concept down it will reveal another concept that’s interesting fundamental and often causes confusion but you are going to understand it let’s move on this next lecture is on a concept that confuses a lot of people but now that you’re armed with your understanding of the execution stack execution context and variable environments the scope chain won’t be that difficult for you to understand let’s take a look at another piece of sample code very similar we have function B function a and the myars again except in function B we’re not declaring myar we’re just going to console.log it so what do you think is going to happen when we get to that line in function B and we console.log myar remember when B is invoked or executed a run it creates a new execution context puts it on the stack and puts into its variable environment any variables that are declared but my VAR is not declared so what do you think is going to happen let’s put the code into our Javascript file again I’m console. logging myvar inside the B function and here my VAR is one here my VAR is two I’m evoking B console.log and at the end I’m invoking a here so that’s where this will all start so what do you think I’ll see in the log let’s run this and when I look in the developer tools in the counil I get a one a one the value that was sitting here at the global level is that what you expected some of you might have expected it to be undefined because we didn’t Define my VAR we didn’t declare it inside this function function inside its variable environment and maybe some of you thought it might be two because we called B from function a and maybe somehow it would know what its value was there but instead it’s one the value at the global level let’s see why so remember this function B console.log myar was a one or what was sitting on the global execution context not undefined not two why well remember we have our execution stack at the global level it was one when a is run we also vared myar and that was a value of two and then when B was executed we just console. logged and we didn’t declare anything and that was just empty there is no myar in that execution context variable environment but when we requested variable when we do something with the variable JavaScript does more than just look in the variable environment of the currently executing context remember that each execution context has some special things that get created for you like the variable this remember we also mentioned one other thing that we haven’t used yet the reference to the outer environment every execution context has a reference to its outer environment now what is its outer environment well in the case of function B its outer environment is the global execution context and that’s also the case in function a even though a is directly below B in the execution stack as far as what code is going to run that little outer environment reference that each execution context gets doesn’t necessarily have to be the execution context directly below it instead it’s something that we’ve already talked about what kind of outer environment are we referring to remember that big word that we used almost at the beginning of this course the lexical environment wait a minute back up back up back up back up back up back up lexical environment didn’t that mean that where something is written physically in your code is important that it determines certain things as far as how the JavaScript engine will decide and interpret where things live and where things will sit in memory and how they’ll connect to each other that’s right so where does function B sit lexically it lexically sits on on top of the global environment in other words it’s not inside function a it’s sitting right there at the same level as that last line where my VAR equals 1 now don’t get lost about this we’re not changing our minds in that the execution contexts don’t matter don’t regard where something is sitting physically in the code it doesn’t the B could be above the a the a could be above the B it doesn’t matter what’s going to happen is the order of execution will determine how those are invoked how those execution contexts are created however JavaScript does something special it cares about the lexical environment when it comes to the outer reference that every execution context gets and when you ask for a variable while running a line of code inside any particular execution context if it can’t find that variable it will look at the outer reference and go look for variables there somewhere down below it in the execution stack and that outer reference where that points is going to depend on where the function sits lexically so my B function sits lexically not inside a but at the global level right smack dab at the outmost point of the code and so its outer en environment its outer lexical environment is global and so is A’s and JavaScript when I asked for my VAR inside that b execution context it couldn’t find it and so it went down and found it in the global execution context so again these execution contexts are created and it doesn’t matter where the code is physically written where these functions are physically written in regards to when these execution contacts are created that has to do with when you invoke them but when you invoke them when you invoke a function the JavaScript engine creates an outer reference for that execution context and it looks at where the code was physically sitting the syntax parser already knows because it went through line by line your code and it knows where that function was written and it then creates the appropriate outer reference based on where your function was physically written in the Javascript file now this entire Act of searching this chain of references to Outer environments because this execution context stack could get really tall and maybe my VAR is a ways down the stack it has to search one and then look for another outer environment and search again until gets all the way to the bottom where the global is where there is no outer environment to find my VAR so if I had several more functions calling each other it would keep on moving down until it hit Global if those functions were defined inside each other down those outer environment references until it finds it or doesn’t that whole chain is called the scope chain remember scope means where can I access a variable and the chain is those links of outer environment references lexical that is where it was physically written in your code so when we said inside function B council. logmar it looked for myar couldn’t find find it and went down the scope chain now it’s going to go down the execution stack but it jumps because it’s not necessarily right below it the outer environment in this case lexically was Global all right let’s show how we can change this by changing the lexical environment of the function all right so let’s take a look at function B again where is it lexically well it’s lexically sitting in the global environment remember that this is where it sits it’s actually attached to the global object it’s declared lexically physically at the same spot that my VAR is it’s not inside a function it’s just there on the Javascript file so the JavaScript engine when it generates the the execution context when B is called it creates that execution context and creates an outer environment along with the this variable and other things it creates an outer environment reference to the lexical environment that is to say hey the JavaScript engine saw that the function is sitting physically here or it could also be phys sitting physically here doesn’t matter it’s sitting physically though not inside any other functions so its outer reference is the global execution context variable environment so when it looks for myar you can’t find it in here so it goes down the scope chain skips over that a execution context because it’s not lexically in there and finds it here so when I run this code I get a one but if I change the Lex iCal environment and put function B inside function a a few things happen I’ve changed the lexical environment of B meaning that I’ve changed where physically sits in the code so that it’s inside a function and so its environment is different immediately that means I can no longer just call B out here at the global level because what will happen is the global execution environment will look for the function B but that was never added to its variable environment because it’s inside a so the JavaScript engine when it created the global execution context it found function a and added it but it didn’t go look inside function a or anything like that it just went to the end of function a and kept going so there is no B in the global execution uh context so I’m going to get an uncaught reference B is not defined see that because that first creation phase didn’t find function B in the global execution context was created only function a CU that’s where it’s sitting lexically function a is visible lexically but not B however when I call a did you notice what the value was I called a A’s execution environment m is created it’s execution context and when I call B what’s my VAR two do you see what just happened all right so what just happened well the same execution contexts were created a global and then a was called and then B was called however because B was sitting physically inside the a function the JavaScript engine said well it’s outer reference will then be a because that’s where it’s physically sitting and A’s would then still be the global and so when we asked for myar this time when it went down the scope chain because it couldn’t find it in b instead of going to Global it went to a found my VAR it said hey you asked for my VAR and when I went to the outer lexical environment I found my VAR and so it’s two make sense the outer lexical environment of B is a this time because B is physically sitting in the physical code that we typed it was physically sitting inside function a so where something sits physically thinking lexically is a really easy way to figure out how something will be found along the scope chain in other words if I don’t declare a variable inside a function where will I go find it so function B is sitting inside a so I’m if I don’t declare it inside B it will go look for it first inside a if it can’t find it inside a A’s outer reference is to Global and so it’ll look for it there so notice I just got rid of that it’s back to one see it went up or down depending on how you want to think about it the chain scope chain so I look for myar in the B execution context can’t find it the auto reference is a can’t find it the auto reference of a is global hey there it is see how that works now another way to think about this and if you don’t want to think lexically is who created me the outer reference is to the execution context in which the function was created so in this case function B isn’t created until A’s execution context is created right because the global is just going to add my VAR and a then when a is run it’s going to go through its create phase and say ah I need to create B and since B was created during the creation phase of A’s execution context that’s its outer environment if I moved B back out then now when is B created B is created when the global execution context is created and So that’s its outer reference it’s a different way of thinking about it it still works but the fastest way to think about it in my opinion is thinking about it lexically that way you can just look at your code and know oh if I have code that looks like this this is going to be a two because of where it sits physically lexically make sense all right so again if I just remove all of this it will go all the way up the scope chain and I still get a one all right so we’ve learned that where a function sits determines its outer environment reference but as it’s being executed those execution contexts are stacking up and it’s running synchronously we’ve learned quite a bit and we’re understanding the scope chain this concept can be confusing for people it can be a little weird but if you understand what’s happening under the hood of JavaScript you’ll be able to determine what’s really happening to your code and when you have a problem when a variable is an unexpected value you’ll be able to debug it and say I know why it’s is what it is because I know how this really works all right let’s move on so we’ve talked about execution contexts execution environments variable environments lexical environments and all of these things ultimately are defining what’s called scope especially when we talked about the scope chain that outer reference that any running function has so big word alert scope is where a variable is available in your code and sometimes it has to do if it’s really even the same variable or a new copy like if you call the same function twice it each gets its own execution context and though it looks like the same variable it’s actually two different variables in memory but in the end we’re understanding that all these things we’ve been talking about have helped us to understand something that a lot of developers find confusing but because of diving under the hood of JavaScript and seeing how it deals with variables and functions I hope you see how this helps us understand scope on a deeper level and in a way that it doesn’t seems so odd or so strange or so difficult to anticipate this again goes to My Philosophy about learning code some people say that they learn code better by example and again examples are important and we’ve looked at some already but understanding how things really work makes you a better developer it makes you a better coder I stand by that philosophy because I’ve seen it work I’ve seen it in production environments with large teams of coders those that learn how things really work under the hood solve problems better and are better coders overall in the end all right so we’ve talked about scope I just want to mention one more thing the next version of JavaScript which is called ecmascript 6 or sometimes ecmascript 2015 or just es6 is introducing a new way of declaring variables it’s called let this is used or can be used instead of VAR although it’s not replacing it VAR will still be around but let allows the JavaScript engine to use what’s called block scoping so you can declare a variable just like you would with VAR and during the execution phase where it’s created that variable is still placed into memory and set to undefined however you’re not allowed to use it until the line of code is run during the execution phase that actually declares the variable so if you’re trying to use C in this example before the let c equal true you’d get an error now it’s still in memory but the engine just won’t allow it the other important thing is that it’s declared inside a block a blocks are in general defined by curly braces so inside an if statement or a for Loop or something like that when that variable is declared inside that block it’s only available inside that block at that period of time for the running code this is true even for four Loops so if you have a loop and are running the same code over and over but you have a let statement you’ll actually get a different variable in memory each time the loop is running so this allows for what’s called block scoping as we mentioned which others who are used to other programming languages may be familiar with but again you can use both let and VAR in es6 and it’s good to know and understand how both work we’ll talk about this more later in the course but I just wanted to mention it now that there are more options available in the next version of JavaScript for how you Scope a variable before we finish up this section let’s go back to a question that many of you were likely asking we’ve been talking about all this synchronicity in JavaScript how things are executed synchronously but what about asynchronous callbacks many of you may have used these or perhaps have heard of them well first of all big word alert what do we mean by asynchronous asynchronous simply means more than one at a time so we may be dealing with code that’s executing and that starts off some other code to execute and that may start other code executing and all of those pieces of code are actually executing within the engine at the same time but JavaScript as we’ve said is synchronous it doesn’t execute asynchronously it executes code a line at a time yet there are things like click events or you can go off and get data in JavaScript and get it back where you have call back functions that run when that event is complete when that action is complete so since JavaScript is synchronous how does it handle or how is this handling those asynchronous events well first of all we need to think about the JavaScript engine itself when we’re talking about running JavaScript and the JavaScript engine itself we understand that it doesn’t exist by itself inside for example an internet browser there are other elements there are other engines and running pieces of code that are happening outside the JavaScript engine that runs JavaScript when you load it into the browser so there’s things like the rendering engine that actually r ERS or prints or Paints the screen whatever the web page is that you’re looking at or there’s elements of the browser that have to do with going out and getting HTTP requests responses so going out for example and getting data and the JavaScript engine has hooks where it can talk to the rendering engine and change what the web page looks like or go out and request data but all that is running while it may be running asynchronously meaning that the rendering engine and the JavaScript engine and the request are running asynchronously inside the browser what’s happening inside just the JavaScript engine is synchronous so when we asynchronously go out and make a request or we say let’s run a function when someone clicks on a button what happens because that is being handled asynchronously other parts of the browser are running and looking at that code while the JavaScript code is still running all right so let’s take a look we’ve already learned about the execution stack that we have these execution contexts that are being created and as functions are being called they’re being run stacked on top of each other and as they finish they leave the stack there’s another however list that sits inside the JavaScript engine called the event q and this is full of events notifications of events that might be happening so when the browser somewhere outside the JavaScript engine has an event that inside the JavaScript engine we want to be notified of it gets placed on the Queue and whether or not we actually have a function that needs to respond to it well we can listen for that event and have that function handle that event but either way the event gets placed on the Queue so a click event for example if someone clicks on the screen now what happens if I have a function that’s supposed to respond to that click event or maybe another event happens while code is running like I went out and got data and that code went out to the browser the browser went and got the data while my code kept running and now it’s finished well what happens is that event queue gets looked at by JavaScript when the execution stack is empty so let’s say my function B finishes and now it’s going to run function a finish whatever is going on there and when that finishes it keeps going and finishes whatever execution is at the global level and when the stack is empty then JavaScript periodically looks at the event queue it waits for something to be there and if something is there it looks to see if a particular fun function should be run when that event was triggered so it sees a click event it processes that click event and knows hey there’s a function that needs to be run for that event so it creates the execution context for whatever function when that event happened and so that event is processed and the next item in the queue moves up and so on and so forth but again the event queue won’t be processed until the execution stack is EMP until JavaScript has finished running all of that other code line by line so it isn’t really asynchronous what’s happening is the browser asynchronously is putting things into the event queue but the code that is running is still running line by line and then when this is empty when the execution context are all gone all finished then it processes the events it waits for them and sees an event and if an event causes a function to be created and executed and there it is it will appear on the execution stack and run like normal all right let’s see some code so we can see what this looks like so I have some code here to show what happens as far as how JavaScript handles asynchronous callbacks I have a function here that essentially simulates a function or an action that takes a long time so this while loop is just going to wait 3 seconds it’ll Force this function to take 3 seconds to finish running and then when it’s finished it’ll console.log it I also have a function that’s my click Handler so I’m going to listen for a browser event I’m going to listen for a click event to appear in that event queue and I’m going to run the click Handler function that’s what this line does I’m listening for click and I’ll run this click Handler function when the JavaScript engine decides to go look at and process the event Q so then I run this function the long one and I’m going to click around on the page while this 3 second function is running to see what happens and then I’m going to Cel that log that I’m completely finished so I should see all three of these console. logs but the question is if I run the page and click while this function is running the one that takes 3 seconds in what order order will these three console. logs appear so I’m going to run this in my browser and you’ll notice it takes 3 seconds for the page to finish loading that’s that long running function and because I didn’t click anything notice that I have finished my function and then finished the execution and that’s based on how we understand it this function when invoked here was placed on the execution stack and ex ution context was created it’s running when it finished it outputed that then this left the execution stack and the global code continued running and that’s what we see in that order now if I refresh this page and click while the long running function is running while it’s executing what should happen well the browser is going to place that click event on the event queue but when is Javascript going to look at that event queue and process it I’ll refresh click and there we go are you surprised notice that the function completed and the global code completed before it went off and created an execution context for that click Handler function why because the JavaScript engine won’t look at the event queue until the stack is empty so that means long running functions can actually interrupt events being handled but this is how JavaScript script synchronously is dealing with the fact that asynchronous events are happening that elsewhere simultaneously in the browser in this example things are happening that then complete that JavaScript needs to know about so all it does it just keeps running its normal code and when that’s all done it will then go and look at the event queue and if it’s already done then it will just continue to watch that event queue in the loop the event Loop that’s what that’s called The Continuous check and then when it sees something if there’s supposed to be a function if there’s a Handler if there’s a listener that’s supposed to run when that event appears in the event queue it will run it so that’s how JavaScript those synchronous deals with asynchronous events any events that happen outside of the engine get placed into that queue and if the execution stack is empty if JavaScript isn’t working on anything else currently it’ll process those events and will process the events in the order they happened so if a click event happens and then an HTTP event it will process The Click first and then run that function complete that function then look at the que start looking at the queue again all right so again asynchronous callbacks are possible in JavaScript but the asynchronous part is really about what’s happening outside the JavaScript engine and JavaScript via this event Loop via this list of of events that are happening when it’s ready we’ll look at events and process them but it does so synchronously it’s time for another conceptual aside types and JavaScript JavaScript is special different than what you might be used to if you’re coming from another programming language when it comes to the types of data that variables hold and how JavaScript deals with them so before we start with that big word alert we’re going to discuss a term that describes how JavaScript deals with types it’s called Dynamic typing that means that you don’t tell the JavaScript engine what type of data a variable holds you don’t put that into the code that you’re writing instead the engine figures it out while you’re code is running while it’s executing and so a single variable can at different times during the execution of your code hold different types of values because it’s all figured out during execution all right for example when you’re dealing with other programming languages like Java or C they use something called Static typing that means you tell the engine ahead of time the compiler ahead of time what kind of data you intend to hold inside a variable so you might have a keyword like buou to say that this variable should hold a Boolean value either true or false and then if you try to put a value that’s other than a Boolean into that variable you get an error but JavaScript isn’t like that JavaScript is dynamically typed meaning that there is no keyword to tell the engine what kind of data you intend to put inside the variable we just say VAR for example and then while the code is running the JavaScript engine will determine what type you’re giving that variable and you could change it I could put those three lines in order make it true and at that moment the engine will say ah you must mean this to be a Boolean type and I could give it a string yep and it’ll say yep you must have intended a string type and I could give it a one not inside quotes and it will say ah this is supposed to be a numeric type so JavaScript is dynamically typed it figures it out on the Fly this turns out to be quite powerful and can also cause you some problems if you don’t understand how JavaScript is going to make decisions as a result of dynamic typing before we can dive further into how Dynamic typing works and both its advantages and its disadvantages we need to talk a bit about the types that exist in JavaScript the types of data that you can store in a variable again you don’t say this directly through the variable declaration but there are six primitive types in JavaScript all right now one second big word aler what do we mean by primitive type A Primitive type is a type of data that represents a single value in other words something that isn’t an object because remember an object is a collection of name value pairs A Primitive type on the other hand is just a single value and again there are six types in JavaScript so let’s talk about each of the Primitive types first we have undefined we’ve already talked about this at some length undefined represents a lack of existence and it’s what the JavaScript engine sets variables to initially and it’ll stay undefined unless you set the variable to have a value so you really shouldn’t use this as far as setting a value you shouldn’t say a variable equals undefined just let that be the thing that means the code has never set the value but you can certainly test for it the second primitive type is null null also represents lack of existence this one is better for you to use when you want to say that something doesn’t exist that the variable has no value so leave undefined for the engine and you can use null the keyword n l lowercase for your variables when you want to set them equal to nothing next is Boolean this is familiar to most programmers this is either true or false just one of two values and in JavaScript it’s literally the word true or the word false lowercase next comes number another primitive or simple type in JavaScript actually there’s only one numeric type and it’s called number it’s a floating Point number meaning that essentially there’s always some decimals attached to it um unlike other programming languages others might have integer and decimal and other specific numeric types JavaScript only has one and while you can fake it as far as integers and other types of mathematical numbers are concerned there really is under the hood only one type called number and it’s a floating Point number and it can make math a little weird another familiar one is string this is another base primitive type in JavaScript it’s a sequence of characters and both single quotes and double quotes can be used to specify that we’re dealing with a string in some programming languages string is more complex and treated as a sequence of characters but in JavaScript a string is considered a primitive type and finally the sixth one this one’s new and it’s called symbol it’s used in es6 or ecmascript 6 which is the next version of JavaScript it’s being constructed and not fully supported by all browsers so we’re not going to talk about this here but as time goes on in this course I’ll occasionally post bonus lectures especially throughout this year as more and more is talked about with ecmascript 6 but for our purposes we’re just going to ignore the symbol AS A Primitive type in this course however it’s just good that you know that it’s coming so that’s it the six primitive types in JavaScript undefined null Boolean number string and symbol are you bored yet I know well we just needed to establish this because understanding the Primitive types and the fact that we’re dealing with Dynamic typing that is that the engine is figuring out what type of variable is on the Fly is key to understanding certain aspects of JavaScript and really weird funky problems and bugs that you can come up with that can be difficult to debug or understand so we needed to First establish types and we’ll focus on primitive types here and then we’re going to move on to another topic and then combine these two topics to fully understand some things that people normally have problems with in JavaScript it’s time for another conceptual aside we’ve already talked about types now it’s time to talk in depth about another concept which will help us to debug and understand some other kinds of problems people have in JavaScript because of its Dynamic typing let’s talk about operators if you don’t come from a computer science background what we’re about to discuss may surprise you well either way big word alert operators what do we mean an operator is actually a special function that is is syntactically or that is written differently than regular functions are written in your code generally operators take two parameters and return one result let’s look at an example I’m back to my index.html and my app.js file and I’m going to increase my font size here inside brackets just because what we’re about to discuss involves operators which are generally one or two characters long so I want to make sure that this is seen clearly in the video all right so let’s say that I declare the variable a and I’m going to set it equal to 3 + 4 and then console.log a all right so let me run this and I bet you can guess what I’m going to see on the screen that’s right S 3 + 4 is 7 obvious but here’s a question you may not have asked yourself how did the JavaScript engine do that how did it know that this was my intent to add three and four well the syntax parser and the rest of the aspects of the engine looked at this code saw the plus sign and added these two numbers this plus sign is an operator it’s the addition operator and it’s actually a function it be kind of like this it would be as if I declared a function and instead of giving it the name add and then maybe in two numbers I instead simply gave it the name plus gave it two numbers and then returned and then somewhere in there add the two numbers that was essentially what happened when JavaScript saw this line of code the difference is that instead of calling the function as you normally would if this was a function name I would then put parentheses and pass three and four to it and that would have been a normal function call but that would be a really annoying way to have to type your functions for common operators like Plus so instead the JavaScript engine provides along with many programming languages the option or the ability to write in what’s called infix notation infix means that the function name the operator sits between the two parameters so instead of plus 34 calling the function this way imagine that instead we remove the parens and the comma that’s called prefix notation I could put the plus sign at the end that would be called postfix notation a lot of old school accounting calculators work this way where you put the operator at the end but for our purposes in JavaScript this is infix notation it’s very human readable but this is essentially a function call passing to parameters and this function returns a value the value that it returns in the case of the addition operator is these two parameters added together so plus is an operator there are other operators common ones that you’ve used most likely like if I swap this and do minus and console.log this value what am I going to get obviously a one because this is an OP operator the minus sign or if I asked a question for greater than three this is a function a special one in operator the greater than function or the greater than operator this is different because it accepts two numbers and returns a Boolean remember those Primitives that we talked about so this will be true if the left par uh parameter is greater than the right parameter and it will be false otherwise so if I refresh this then yes four is greater than three so this function accepted two numbers and returned a Boolean so this is the concept to keep in mind that when we type these operators plus minus less than greater than and a bunch of others that we’ll talk about in just a moment that these are actually special types of functions that these parameters are being passed to those functions and a value is being returned and inside those functions there is pre-written code essentially for you that the JavaScript language the engine provides to do or run or invoke these functions and what’s happening inside those functions is important to understand especially when dealing with a dynamically typed language like JavaScript where you don’t necessarily know ahead of time what type the variable is the JavaScript engine will behave in special ways because of that but for now here let’s just keep in mind that operators are functions operator precedence and associativity we’ll extend our discussion of operators to discuss these two very important terms terms uh but precedence and associativity those again are some of those big words that describe things that are a lot simpler than what they sound like so big word alert first of all operator precedence operator precedence just means which operator function gets called first when there’s more than one on the same line of utable code and functions then are called an order of Precedence the higher precedence wins so if I have more than one operator the JavaScript engine will call or invoke the operator with the higher precedence first or the highest and then down the line from there we’ll see an example in just a bit but before we do that we need to add on One More Concept that goes along with this we mentioned it operator associativity yeah another big word alert it’s not as complex as it sounds either associativity that’s what order an operator gets called in so again we’re talking about which operator function in what order in this case either left to right associativity or called left associativity or right to left which is called right assoc itivity and this means when the operator functions have the same precedence so if I have a bunch of operators on a line of code the Precedence tells me which ones gets called first but if I have some of them they all have the same precedence then what do I do well depending on the associativity of that operator we’re either going to call the functions left to right or we’ll call the functions right to left all all right let’s look at some examples all right so let’s say I’m going to have another calculation here and I’m going to say 3 + 4 * 5 and output this now what do you think the answer is going to be well if you remember from mathematics class there is an order a press ents in mathematics in general to these operators and JavaScript does the same thing because there’s one of two options these are two function calls and remember JavaScript is synchronous so it’s not going to try to do this simultaneously it’s going to call one and then call the other but which one gets called first well first of all we’ll start with operator precedence and in order to answer this question we need to know what the operator precedence is in JavaScript there’s a terrific link which I’ll provide in the next lecture on the Mozilla developer Network or mdn that’s developer. mozilla.org called operator precedence for JavaScript and it actually has a table of operator precedence what I’ve done is taken this table and provided you a PDF which can download it’s attached to this lecture for download and we’ll use this PDF to discuss this so again remember that what’s happening is these are two functions operators are special types of functions and so the one with the higher precedence gets called first so the bigger the number on this table that means the one with the biggest number will get called First and the second biggest number will get called second Etc until all of the operators done so if I go down to this section of the PDF to explain what these little symbols here mean this is the operator there are large number of operators in JavaScript you can see them all in this PDF and these three dots just mean other code around it so in this case multiplication is a asteris division addition subtraction remainder and then there’s just code around it so a left parameter and a right parameters so these are the parameters being passed to that function so in my sample I have multiplication and addition notice that multiplication has a precedence of 14 and addition has a precedence of 13 and with operator precedence the higher one gets called first so multiplication is higher has a higher precedence than addition that means that what’s going to happen is this will get called First and remember that this returns a value so what’s really happening is 4 * 5 is run this operator function is invoked and returns 20 4 * 5 and then because this has the lower precedence this is called using that returned value as the second parameter and so that’s called and it’s 23 three equals is also an operator and essentially what we’re doing is setting a equal to 23 if the Precedence was different then it would do 3 + 4 if that was first that would be 7 and 7 * 5 is 35 so we’d end up with a is 35 so the Precedence makes a big difference in the value we get 23 if times or multiplication has the higher precedence and 35 if addition has the higher precedence but we’ve already seen that multiplication has the higher precedence in JavaScript so when I run this I get 23 I get 23 because this function is called first and I get a 20 and then this function is called and I get a 23 make sense that’s a very important concept to understand some of the strange bugs or things that look weird anyway that can happen to people when writing JavaScript code now what if more than one operator and I could have many in a row has the same associativity let’s go back to our table notice that in some cases for example multiplic Division and remainder all have the same associativity or I could have the same operator on one line of code well let’s take a moment and look at this I’m going to change what I’m doing here I’m going to say VAR a is 2 and VAR B is three and C is four so I now have three variables with three different values and then I’m going to run a statement a = b = c and then I’ll console.log all of these three variables all right let’s look at this I have three of three different values and then I’m setting a equal to b equal to C so in the end should all be equal but the question is what value will they all have when I console.log this will they all be two will they all be three or will they all be four what do you think take a look at the results when I refresh they’re all equal to four why because of itivity that’s this column here in the uh the table associativity is either left associativity meaning the furthest one to the left the furthest operator to the left will be called first or right to left or right associativity meaning the operator furthest to the right will be called first and that’s really it pretty simple all right so the operator I’m using is the equals operator or the assignment of equal that’s one of the assignment operators notice that its associativity is right to left so the equals operator is Right associative it has right to left associativity meaning that when I have it on a single line since it’s the same precedence it then looks at the associativity to decide which one should be called first so it goes to the furthest one to the right because it’s right to left associativity so it’ll call this one first if it was left to right associativity it would call this one first because that’s farthest to the left but no it’s right to left so this is furthest to the right on this line and so it calls this so it will set b equal to C and what is C four ah now here’s the interesting thing we said that operators generally take two parameters and return a value so the plus operator returned the value of the addition of the two parameters but what does equals return all right let’s go back to our console window I I’m going to set b equal to C so it will run this operator and the console window will show me the return value see the the method or the function called was invoked it did the work of setting the value in memory of b equal to the value in memory of c and then returned the value of the parameter on the right the parameter that we’re setting equal to so it gave me back a four so this statement actually returns a value it’s a function that returns a value so that means I can call it in order so since this is right to left associativity this is furthest to the left this is furthest to the right this is called first it sets b equal to four because C is four and returns a four and then this will be called so a will simply be set equal to four because that’s what this returned a is four so when this is done calling first this operator then this operator against The Returned value a B and C are all equal to four make sense that’s operator precedence and associativity precedence helps us determine which functions run first and so does associativity associativity comes into play when two or more operators have the same precedence so if an operator has precedence 14 and and another one 13 14 gets run first but if they both have 13 or some other value then it’s either left to right or right to left and we can see this in action if we go back to our original example where uh we said a was equal to 3 + 4 * 5 like that something like that so this ended up being 23 because precedence said 4 * 5 20 + 3 but notice in our operator precedence table what’s at the very top of the Precedence table is called grouping and that means I can put something inside parentheses that’s our special operator in this case and unlike some of these other operators it simply takes whatever is inside of it and says run this first so whatever’s in the perins always gets executed first those functions get first so if I put 3 + 4 in parentheses now what’s going to happen well JavaScript looks and sees that parentheses have a level 19 highest possible precedence and so runs this function that’s inside of it first the plus and then the 3 + 4 is 7 and we’ll then multiply that times 5 so if I run this I get 35 without the parenthesis the Precedence rule says well this has a higher precedence than plus and so I get 23 with the paren it changes the order that the functions are executed and that’s all it’s really doing so operator precedence and associativity you got that this is important again because JavaScript is dynamically typed and we’ll see that very soon it’s time for another conceptual aside this is another important concept that deals with some of the weirder surprising things that can happen sometimes in JavaScript because it’s a dynamically typed language but also can be very powerful this concept is coercion all right you know what that means big word alert coercion converting a value from one type to another that’s all it really means you might have a number and you coers it or attempt to convert it to a string or you have a string and you coers it or attempt to convert it to a number and so on and so forth this happens quite a bit in JavaScript because it’s dynamically typed let’s look at an example so I’ve already seen that I have an operator and it takes two parameters and that this is a function that returns a value so a is set equal to 3 because 1 + 2 is 3 very clear now you may also know that the plus operator is used to do something else if I pass two numbers to the Plus operator then I get addition but if I pass two strings like hello and world then instead of trying to add it as numbers it concatenates the string it puts them together now here’s the question what if I pass the operator two different types if I give this function a number and a what do you think is going to happen What will be my value well I refresh and I get what looks like 12 oh wait a minute did the math just go Haywire no what I got was as if these were two strings and it simply put them together one and then two so what just happened what happened was that this value the first parameter was coerced by the JavaScript engine into a string in memory the string one and the number one look nothing alike now they look awful similar when you’re typing on the screen but actually in the computer memory the number one and the string one don’t look anything alike but the JavaScript engine was smart enough to say well I know the people that coded the JavaScript engine coded this guess this best guess into the engine said when you call the plus operator this function and you give me a number and a string then I’m going to make a choice to try to coerce that number I’m going to try to figure out what it would be if it was a string and the JavaScript engine successfully coerced that one it didn’t literally type those in those characters but under the hood it coerced that from the number one to the string representation of the number one and then finished running that function notice that I didn’t ask JavaScript to coers this value I didn’t type something here special that said some kind of con convert this to a string value or something like that I simply called the function with these two parameters and when the function ran it chose to coers my value instead of giving me an error which is what some other programming languages would do and this has a lot to do with the fact that JavaScript is dynamically typed so it tends to try to convert things to the value that you want because you’re not explicitly telling it what values types should be this was just happening under the hood of the JavaScript engine and understanding that coercion is happening is very important because you can avoid some important bugs and debug things when things look a little strange for example if someone had accidentally typed this you would understand understand that 1 + 2 is 12 because of coercion because this is a string and this is a number and it’s being coerced sometimes these things can be hard to pick up on for example if I had just said VAR a equal 1 and bals 2 and then I outputed A + B I still get 12 because B is a string and a is a number and it coerced a but if there was a whole bunch of code in between these two lines and this B was set somewhere else in the code you could be really confused by the fact that that’s returning 12 but we understand coercion so we can track down what’s really happening and we also understand that operators are just functions so they’re running code and coercion is part of that process of calling that function so we understand that JavaScript is doing its best to understand what something should be that it’s dynamically typed and that coercion is a part a fundamental part of the JavaScript language as a result all right let’s move on it’s time to talk about comparison operators in JavaScript and here’s where we’ll see that what we’ve been discussing all these things that may have felt not very necessary till now regarding operators and precedents and associativity and coercion where they all come together to explain some behaviors in JavaScript that many find confusing so again I have a blank app.js file and we’re going to try some things and I encourage you to try these things yourself in your app.js file or in the counil in the dev tools of your browser mess around as we discuss you want to be able to understand and be familiar with some of the quirks that we’re going to see all right so for example I’m going to console.log a statement that should look pretty obvious 1 is less than 2 is less than three so as a human what would you expect the result to be again these are less than operator so it’s going to return a Boolean either this is true or false if I just read this 1 is less than 2 is less than three I would expect that to be true because it is true one is less than two and two is less than three so if I run this it appears that the browser agrees that JavaScript the JavaScript engine inside the browser ran that statement and agrees with that because it said true all right let’s change this to three is less than two is less than one well that should be false right three is not less than two two is not less than one I run that that’s also true so why is this returning true and for that matter why did one is less than two as less than three return true well we can start to answer this by using the knowledge we’ve gained about operator precedence and associativity these are two less than operators so they have the same precedence so what determines which one gets run first well associativity and if I scroll down and find the less than operator I see that it’s left to right associativity see that that means the one furthest to the left will get run first so what does three less than two return well we know that if I clear this and go three less than two it returns false so that means what’s really happening is that this is being run the second operator function when it’s invoked is getting past the parameters one and false and what does an operator in JavaScript try to do when I give it a value that’s a type it doesn’t expect this wants two numbers and I’m giving it a number and a Boolean well it’s going to try to coers or convert this Boolean to a number well what does false become when I try to convert it to a number we can actually see this if I open up the console I’ll clear this again I can use a built-in function I recommend that you don’t use this but it’s very useful to see what things will coers to uh however we’ll talk about this later in the course about using these and not using these built-in functions but just to show what something coers is to I’m going to use the number function where I can give it a value any value and it will show me what this will coers to because it will try to convert it to a number so if I for example try to coers the string three I get a three back as we’ve talked about all right so I’m going to try to coers a Boolean false to a number what does it become a zero well that’s interesting actually true and false both can coers false becomes a zero and true becomes a one so what does that mean it’s happening well over here when this less than operator is invoked and it coer is false it’s actually running this statement is 0 less than one because it converted the Boolean to a different type to a number and that became a zero so is 0 less than one yes so this becomes true so if I look at the order again three is less than two is false left to right associativity that was called first false is less than one false becomes coerced or converted to zero 0 is less than one that’s true so this sequence of function calls 3 is less than 2 is less than one although it looks from a human perspective like it should obviously be false from the JavaScript engines perspective which parses and executes this code it makes perfect sense that this result would be true because of the order of execution of these function operators and the coersion of the resulting values but we can see how not understanding these things could lead one to feel that JavaScript is behaving in a weird or strange manner let’s go back to 1 is less than two is less than three now that we have a grasp of what’s really happening we can see that even though this is returning true it’s not because it’s doing what we’re doing as humans looking at that and saying yes obviously that’s true what’s actually happening is it’s running this function first because of left associativity of the less than operator one is less than two is true true less than three this function operator is invoked true is coerced remember what that was true becomes a one and one is less than three is true and so we get true so we see that coercion can cause some from a human perspective surprising results but from the computer’s perspective from the JavaScript engine this makes total sense now that is to say that not every case is going to coers in a way that is expected for example I can coers false or true to a number I can coers a string to a number if that string looks like a number but if I try to coers for example undefined I get this special thing n an which literally means not a number this isn’t exactly A Primitive type but you can basically treat it as such not a number means I have this thing that I tried to convert to a number and it just isn’t a number there’s no way to convert it to a number so undefined couldn’t convert to a number or null oh well wait a minute null JavaScript decides is a zero so you see what’s happening it isn’t always obvious what a particular type is going to coers to the JavaScript engine decides this can cause a lot of strange bugs and odd problems if you don’t understand again what’s going on you can believe that undefined and all are going to behave the same way but they won’t so while coercion is very powerful it can also be dangerous so wouldn’t it be nice if we had a way to not coer under a certain very common circumstance that is checking if two things are equal well we do let’s pull up our JavaScript operator precedence table again all right I’m going to scroll down to find something very common in programming languages equality it’s a double equals meaning are two things equal we often put this in if statements if something equals something else so if I open up my browser and clear this it might be something like 3 = 3 this is an operator and it returns true or false true if I pass it the string three and three very much like those other operators that we’ve seen the double equals operator will coers the types it expects two of the same type and if they’re not it will make a choice true it coerced one type and then checked equality but again we saw that this can be a little strange this can cause some strange side effects for example if I clear this we know that false when converted to a number when coerced becomes a zero so that means false double equals 0 Z is true strange right that means VAR a equals false I have a variable that’s a Boolean and if I check if a is zero it says yes a is zero because of coercion this can cause those kind of strange problems that are hard to debug or I already said false equals z that’s true how about null equals z remember null also corses to zero as a number oh but that’s false so there are special cases like undefined and null that don’t do what you would expect false equals z yes but null although it Coes to zero under other circumstances like null is less than one it doesn’t coers to zero for comparison this causes all sorts of confusion and problems and is actually considered a negative part of the language in that comparison operators especially double equals causes strange errors because of unexpected ways in which it behaves I’ll show you another one double equals using an empty string and zero that’s true so if I have empty string and false that’s also true you see the problem it makes some sense because it’s attempting to convert these values to the same type but it can make your code very difficult to anticipate as far as what’s going to happen so how do we solve this well we’ll go back to to our operator precedence table and we saw the double equals which is equality but there’s also a triple equals which is called strict equality and the same there’s regular inequality not equal using the exclamation mark and there’s strict inequality not equal using an exclamation mark and a double equals so when people see these triple equals for the first time especially if coming from another programming language the first response is what in the world is that that is going to save your life strict inequality the triple equals Compares two things it’s a standard operator but doesn’t try to coers the values if the two values are not the same type it just says no they’re not equal and returns false so if I clear this 3 triple equal 3 is true because those are both numeric 3 triple equals 3 the strings also true because they’re the same value and they’re both strings but three the string triple equals 3 the number is false the triple equals builtin operator function says those two things are a different type so they’re not equal so using the triple equals will prevent us from having some odd potential errors in our code when comparing values so if I go back to my code I’m going to shrink down the font size just a bit and and let’s say I had a variable a which is a zero a number variable B which is false Boolean two primitive types and I say if double equals right here if a double equals B I’ll do an else and then I’ll say console.log they are equal and then I might say console.log nope not equal if I use the double equals these two values will be converted or coerced to the same value and I get they are equal if I use the triple equals because they’re different types I get nope not equal so what’s the lesson first of all in general try to do comparison against things in your code that you know will be the same type and in general I would say 99% of the time use triple equals when making equality comparisons don’t use double equals unless you explicitly unless you consciously want to coers the two values you should start right now if you haven’t already start using triple equals in your code by default that’s your initial go-to equality comparer and use double equals only if you are aware of the implications and that’s what you want to have happen and of course you can also use the strict inequality which is not then the double equals so regular inequality not equal if I put a is not equal to B and I said they are not equal if that happens otherwise I’d say equal then because this coerces the two values same thing that gets equal this was false this are they not equal was false but the double the strict inequality does what I would expect they are not equal so when you see these values don’t get overly confused or concerned because we’ve learned what operators are they’re just functions this would be as if I had a function double equals which took a couple of parameters and this one coerced and I had a function triple equals and it took two parameters and this one didn’t they’re just two different functions that behave differently and as it turns out in production code in the real world it’s generally better to use this one that said it would be nice to at least have a reference for what’s going to happen in these cases there’s a really nice link again over on the Mozilla developer Network developer. mozilla.org called the quality comparisons and sameness and it talks all about this and it has at the bottom a really nice sameness comparison table showing what happens when you compare two different types of values using the double equals the triple equals and something new that’s coming in the next version of JavaScript called object.is which is even a bit better I’ve taken the liberty of converting this to a PDF document for you and it’s attached to this lecture but you can just go to the website if you like and look up this equality comparison and samess table and you can see for example that zero and false are when compared with double equals that’s true that they’re considered the same thing but with triple equals that’s false with object that is that’s false and you can see that there are cases where it’s true across the board as it’s supposed to be the object. is and the way you use that is you pass the two values to the is function object. is so it isn’t treated exactly like an operator a positive Z and a negative Z although they would appear to be the same thing are treated differently so you can look at this table and get some idea of what the expected results would be depending on the values that you’re dealing with but that doesn’t change the fact that for right now especially triple equals is your best option all right so we’ve talked about operators and precedents and associativity comparison and coercion and we’ve seen how coercion can be bad but let’s talk about a case which is used in many popular JavaScript Frameworks and libraries where coercion actually is helpful how could all this Dynamic typing and coercion be useful well let’s talk about existence and booleans I have my Dev tools open and much like I use the number built-in function there’s a Boolean built-in function to try to convert again I don’t recommend that you use these however they’re useful for demonstration purposes so if I’m converting to a Boolean true or false some different values let’s see what happens when I try to convert undefined to a Boolean undefined becomes false when it’s converted in the JavaScript engine how about null null is false how about empty string empty string is also false so all of these things that imply the lack of existence they convert to false can we use that to our advantage yes let’s go back to our code and in this lecture and many of the ones Beyond you’ll get this code downloadable the previous lectures were just simple examples so I encourage you to try them yourselves but here we go I’m going to set VAR a and I’m not going to set it equal to any value let’s suppose I have some code that I won’t write that goes out to the internet and looks for a value and if it finds it then it sets a equal to that value I can then say an if statement whatever I put inside the parentheses of an if statement it will attempt to convert or coers to a Boolean true or false so it doesn’t really matter what a is if I put it inside the if as the statement as the thing I’m checking it will attempt to convert it to a Boolean so I can go console.log something is there if a see that a will be converted to a Boolean so if I go back if a is any of these three things then this if statement will fail because a is nothing because remember the creation phase of the execution context is going to set up the memory space for this variable and then what is it going to do it’s going to set it to what value initially that’s right undefined and what does undefined convert to false so we can use this coersion to check if a is nothing if a came back and ended up being undefine because it was never set or a was null when I was doing whatever logic I was doing I’ll still get nothing if a was an empty string this will still convert to false so nothing will happen but as soon as I have something like in string that’s not empty then that runs see how that works we can use coercion to our own advantage and check to see if a variable has a value something other than undefined null or empty string now there is one caveat if I clear this Boolean Z is also false so if there’s any chance that this variable can end up being a zero that’s a problem because zero is not necessarily lack of existence maybe that’s a valid value but a is going to be coerced when it’s just like this just by itself to a Boolean and so if I refresh this I don’t get a console.log because this is false zero became false so I could do something like this if I ever thought that was possible I could do or a triple equals 0 so what’s going to happen here well if I check my operator precedence and associativity table I have when I scroll down the or logical or and that has a lower precedence than strict equality so this strict equality function will be run before this function the or so first the it will run this triple equals function a is zero it’s not going to coers so if it really truly is zero it will say this is true and then this will run the a will be coerced and since it’s a zero it will be coers to false since or wants Boolean values and it will say if false or true and or when I say false or true returns true if either one is true or both are true this function returns true so then this becomes simply true and I should see something is there so if I back this out this phrase these two functions run in order should then result in something is there being outputed to the counil and it does so all I’m doing here is saying if a is something not undef find not null not empty string and you may never need to do this because if there’s no real chance that this is going to be a zero it may be perfectly fine to Simply leave it as if this exists if this even exists at all if anything was placed into memory other than undefined or null or empty string so that can be very useful and this pattern of coercion of using coercion in this case to check for existence is used in a lot of really great Frameworks and libraries a lot of really strong JavaScript code that’s out there it’s very useful and you can use it of course if you’re helping someone to debug their code that has seen this and is trying to use it without fully understanding it and the if statement seems to be returning false when they’re confused that there is a value in there you could help them maybe that value is zero and you could explain to them zero converts to false so that’s why it’s acting as if nothing is there when you’re using it inside an if statement this way so again understanding what’s happening under the hood and how all this is working will make you a better JavaScript programmer you’ll be able to debug problems better and also use advanced concepts like this in a clean clear and correct way let’s bring together some of what we learned about operators with coersion and look at another way that these Concepts can be used to our advantage in a pattern that’s commonly used again in many libraries Frameworks and other good JavaScript code I again have a blank app.js file and I’m going to create a new simple function called greet and it’s going to take a name as a parameter and what it’s going to do is simply say console.log hello then name and then I’m going to call greet and I’ll pass my name Tony all right let’s run this and it says hello Tony pretty simple but what if I called greet without a parameter unlike many programming languages JavaScript doesn’t care this won’t throw an error it will simply pass nothing to name so if I console.log name and then this let’s see what happens look kind of as we expected right undefined because what happens when the function is invoked a new execution context is created and this variable which is essentially created inside the function though the value is passed during its invocation is initially set when the memory space is set up to undefined so JavaScript simply ignores the fact that I called the function without the expected parameters and simply says that’s okay it’s undefined it’s already in memory it has a value and you simply didn’t give me a new one and then that hello well look what happened there that’s a problem you see the plus operator when it saw a string and undefined that’s the value in name it coerced name the undefined primitive type to a string and so it literally coerced it to the string undefined and then put them together concatenated them that is not ideal Behavior but it isn’t totally unexpected Behavior in that we Now understand how operators and coercion works but what should we do what if I want a default value for this parameter well the next version of JavaScript es6 is actually going to introduce syntax to set the default value but if you look at current JavaScript code and a lot of Legacy code inside a lot of software you’ll see a neat trick for setting a default value so I can say that name equals name or and then I’ll put let’s say your name here let’s say that’s my default value so what’s going to happen if nothing if undefined ends up being the value of name when the function is called well remember that operators are just functions that return values so what does the or operator in JavaScript return when you pass different parameters to it it actually does something kind of neat it doesn’t just return true or false let’s take a look if I clear this what if I tried true or false well it returns true that makes sense if I return undefined or hello it doesn’t return true or false it returns hello it returns in this case the value that can be coerced to true because if I coers hello a non-empty string it’s true so that’s what the or method returns if I put hi and hello it gives me high because it will just return the first one that coerced to true so the or operator special behavior in that if you pass to it two values that can be coerced to true and false it will return the first one that Coes to True one can be converted to true zero converts to false when converting to Boolean so I can use the or to say if something does not exist or is an empty string or a null give me this back instead null or hello empty string or hello see how that works operators are functions that return values that’s why I can use this line of code and say well name is equal to name the value that I currently have or some default value and what will happen if name is undefined or empty string or null then this or function this operator Returns the default value to this equals operator so what will happen is or will be run before equals because if I look at my precedence the assignment operator equals has a lower precedence than or so or is run first so or is run if this is undefined I’m going to end up returning this value and then the equals is run so let me call greet twice greet Tony and then greet no parameter when Tony is passed this will be true because it’s not an empty string or undefined so the string Tony will coers to true and that’s what will be returned from this or so name will still be set equal to Tony just set equal to Tony again and the second time this is undefined so the or operator will return this value which will be set equal to name so what would I expect to see hello Tony and then what in the second call let’s look that’s right hello Tony and then hello the default value your name here so I use this one line or expression to set a default value now I could have done this with an if statement but that’s a lot more typing this is a pretty neat and clear trick that makes your code very readable when you understand it now you still have to be careful with zero if I was to call greet and pass the number zero that converts to false also so I get the default value again so you do have to be careful about zero again but nonetheless that’s a side case in most cases this is just fine to do and is really a neat thing that you can do in JavaScript it’s time for our first framework assign I really like these the idea here is that we’re going to talk for a moment moment and we’ll do this throughout the course about how what we’ve been discussing is used inside popular and famous Frameworks and libraries that are used on millions of sites around the internet and in many web applications for our purposes although framework and Library can really mean two different things we’re going to essentially talk about them as if they were the same thing for our purposes a framework and the library are the same thing a grouping of JavaScript code that performs a task and is intended to be reusable but we’re going to dive deep into how libraries like jQuery or Frameworks like angularjs use some of the concepts we’re discussing in their code so let’s talk for a moment about default values we can combin some of what we’ve learned about default values and also about execution context in the global environment to understand some lines of code that appear quite often in popular Frameworks and libraries if you look under the hood and look at their source code so for example I have this index.html file that’s just referencing app.js I’m going to pretend that I have a couple of libraries or Frameworks that I’m including in my project so let’s say Li one and lib 2 are two libraries that I have now I’m going to go ahead and create those live one lib 2 and in library 1 just for an example I’m going to go ahead and set a variable let’s say I want the name of the library so the library name this is lib one and this suppose is written by one person and lib 2 is written by someone else entirely but they also create the library name lib 2 the same variable so what’s going to happen well when you look at the app.js file and I console.log Library name we need to understand what’s happening when these three JavaScript files are run these three script tags are not creating new execution context they’re not separating the code in any way quite literally they’re just stacking the code on top of each other and then running all of this JavaScript as if it was inside a single file and often when in production JavaScript environments you actually combine and Minify your JavaScript code into one file anyway so it’s important that these files not collide with one another let’s run this code for a second and let’s see what we get I’m going to go ahead and open my console window and look lib 2 so what happened well what happened was that when looking at how the JavaScript source files were loaded Library 1 or lib one was loaded as line one lib 2 was loaded so that’s line two of the code that was run and then console.log this was all then treated as Global variables sitting inside the global execution context and thus attached to the window object in the case of the browser so I declared VAR Library name and that was attached to the window object and the second VAR just replaced it R right over this first Library name so this can be a bit unusual when dealing with Frameworks or libraries maybe we’ve accidentally collided with another Library or maybe another library is there to replace us so we want to be nice about this what can we do well let’s go to lib 2 and we can check and see if Library name is already in the global execution Global variable so I could say window. library name equals and then I’ll say window. library name or lib 2 so what am I doing I’m checking to see if there’s already a library name in the global execution context sitting on the global variable which is window if it is then I’m just not going to do anything and if not using the or operator to set my default value because if this wasn’t set by anyone it’ll be undefined then I’ll set it to the value that I want so if I run this code it’s lib one see that because this first Javascript file that’s the line that was run this is put onto the window object and then in my second Library file I just made sure that I wasn’t colliding with it by checking to see if something was already there of that name so in the case of a lot of Frameworks and libraries you’ll see a line of code that looks something like this where it’s actually setting the object or the set of functions that Define the library or the framework and not bothering to do anything at all if something is already there of that name now of course this could in itself cause some errors but that’s likely the developer’s fault for perhaps colliding with the name that’s already in the library he or she is using and it makes it easier to debug and understand what’s going on because the entire Library just won’t be there because it will say oh you’ve already used that name so I’m going to exclude myself from doing anything at all so when you look inside the source code and you see something that looks kind of like this understand that it’s checking the global name space so the global object to see if something of that name is there so that it doesn’t Collide or overwrite it it’s time for a new section of this course called objects and functions in a lot of JavaScript courses they treat these two concepts as two different subjects to teach I think that’s a big mistake because while in other programming languages objects and functions are two distinct things to talk about in JavaScript they’re very very much related they’re really in many ways the same subject so let’s talk about objects and functions the first subject or the first topic we’ll discuss is objects and the dot remember we’ve already said that objects are collections of name value Pairs and those values can then be other collections of name value pairs but for the our purpos is now let’s look at objects from a little bit of a different perspective let’s think about how an object lives or resides in your computer’s memory an object like we said is a collection of values that are given names but what values are we talking about well an object can have properties and methods so an object can have a primitive sitting off of it and that would be called a property remember those primitive types that we talked about so any one of those like a Boolean or a number or a string an object could have another object connected to it as a child so to speak and this is also considered a property remember we said the value could be another name value pair collection or that is another object an object can also contain function funs and in those cases the function is called a method when it’s sitting on the object so it’s still a function but it’s connected to an object and so it’s called a method so objects have properties and methods and these sit in memory so the kind of core object will have some sort of address in your computer’s memory and and it will have references to these different properties and methods which are also sitting in your computer’s memory now they may be related to the address of that base object concept or they may not but either way the object has references to the addresses or the space or the spots where these different properties and methods live and those addresses might look something like that so this may seem a bit obscure but it’s important for things that we’re going to talk about later that you think about an object as sitting in memory and then having references to other things sitting in memory that are connected to it so it knows where its different properties and methods are that is Primitives objects and functions that make it up all right so let’s look at in JavaScript how we access those slots in memory those properties and functions of an object all right so I have an empty app.js file and I’m going to create our first object VAR person and I’m going to use the syntax equals and instead of a primitive like a string or a number I’m going to say new object now let me be clear there are better ways to do this and we’ll cover them shortly but just for this moment I’m going to use the new object syntax to create a new object because it’s very obvious what’s going on so I’m creating a new object and this is going to sit in memory now I’m going to add properties and methods so for example I can say person and then I’m going to use What’s called the computed member access operator let’s write an operator the operator is this brackets and inside those brackets I put the name of the value that I’m trying to locate in memory so let’s say first name it doesn’t exist yet so when I use the equals Tony it’s going to create that spot in memory and give it that name name and this object will get a reference to the address of that location in memory so it will know where first name is in memory and that’s going to be a primitive a string so it’s called a property the first name property so this is one way to set and access properties if I go back to my PDF of JavaScript operator precedence you’ll see that we have computed number Access it’s very near the top and it’s left to right associativity and it’s brackets there so this is an operator what the operator does is it takes this object and this property or method name and it looks for this on this object it actually can do quite a bit more than that but we’ll see that much later in the course but for starters this is one way using a string to access this so let me set a last name now the neat thing about this operator is that I could set a string let’s say first name and I can then use that string to access that property using that bracket notation or that that operator so let me first of all just log the person itself so you can see it and then I’ll log person I’ll use this bracket operator and I’ll pass this string this variable that contains this string and remember this operator will take this object and look for a property with this name so this name is first name so it should find it and what should it output Tony so let’s go ahead and run this in the browser and then I’ll open my console and there I see Tony so the computed member access operator those brackets worked they looked at the object as one parameter and that string is the other parameter and went out and found that property on that object and gave me the value notice I also just outputed the object itself and I can see those two properties first name and last name there’s another property this underscore uncore Proto uncore uncore don’t worry about that right now but we are going to get into that later in the course for now we’ll just focus on these that I’ve made first name and last name and I’ve outputed the first name using that special operator with the brackets so let’s go back to our code and let’s talk about another operator the more common operator and clearer and easier to type operator for accessing properties and methods now this approach here that we just talked about you will see sometimes in Frameworks and libraries because you can dynamically decide what property you’re trying to get you can base it off a string but it’s much clearer and easier to type the next one all right I’m going to console.log the first name again but I’m going to use a different operator the dot operator and it is just what it sounds like dot then I can say first name the dot is an operator it’s a function and when used after an object like that well if I go back to my JavaScript operator precedence PDF you’ll see it’s just second from the top right after uh the parentheses for grouping it’s left to right and it’s just a DOT and it takes two parameters the object that you’re looking at and the name of the property notice I don’t have to put this in quotes or something although that’s essentially what it’s doing it’s taking the object and passing the string that represents the name of the value that you’re looking for but I don’t have to do that that’s not really accurate you can’t do that it will simply the syntax parser will understand that after you put the dot what you’ve actually typed will be the string that’s given to the dot so that’s just a lot faster to type person. first name and if I run this since I’m already outputting the person and first name again I’ll just get the first name again so I refresh and there it is see that so the dot operator acted exactly the same as the brackets operator here this is computed member access and this is just called member access the member access operator members being members of the object right your fingers and your toes are members of your body so these are looking for members of the object the the pieces the methods and the properties so this went out and found this property because it’s just a string it’s not called a method it’s called a property okay so I could console.log person. last name very readable very easy to type and that’s what’s really happening it went out and found that memory location that reference by name that’s connected to that object and I could have set this value as well the same way in fact remember that the other type of property you can have as opposed to a primitive is also another object so I can attach another set of names and values let’s say that person. address I’m going to make that instead of a string or a number or a booing I’ll just make it another new object so it’s an object sitting inside an object and then I can use the dot operator for example and add properties to my subobject my child object inside of here now remember these are operators so how do we know which one gets run first well we go back and we see that the associativity of the member access operator is left to right it has left associativity meaning that the leftmost dot will get run first get called first because they’re functions and then moving on to the right so this one between person and address gets called first so it says okay I’ll look at the person object and look for a property or a method that has that name and then it finds that in memory and then this second do operator is called and it says okay on that thing on that object that I just found in memory I’ll look for a property or a method on that called street now in this case it won’t find it but I’m setting a value so it will create it and give it that initial value and I could just keep doing this so I might have address. City let’s say New York and State let’s say New York and you can see I could make this other subobjects and subobjects and subobjects and I could just keep going because it’s a left to right do operator left associative and the objects can keep containing other objects which can contain other objects which can contain other objects so this is very powerful and realize that the objects themselves and their properties and their methods are all just sitting in memory these dots and these brackets passing strings to them they’re just functions they’re just operators a way to access that information so now I have this object sitting in memory I could do a person. address. street and output that and it’ll go find it in memory running those two different operators I could go person. address. City and it will find that and I could on the same object just use a different operator so I could go address using the computed this is also left to right if I look it’s left to right so I can also then just do another one let’s say State this is essentially doing the same thing it looks at the object finds a property or method called that runs this operator first then the second operator it’ll look for a state property on that and the dot is doing the same thing and they’re both simply accessing the same memory locations bya the same names so they’re just two different functions that are essentially doing the same thing and I refresh and there I’m outputting my values that are sitting in memory using both operators so again objects are name value pairs sitting in memory they can contain other name value pairs that is other objects they can contain other properties strings booleans they can contain numbers they can also contain fun functions which are called Methods but we’re not going to quite get there yet because there’s a couple other things we need to understand but good enough for here remember that this is not the preferred way to create a new object we’ll get to that in just a second and also remember that although we can use the dot or we can use the computed the the bracket notation here for finding properties and methods the preferred approach is just using the dot operator it’s very clean it’s very clear and it’s also easier to debug and find problems so I always recommend that you use the dot operator unless you really need to access a property or properties using some kind of dynamic string some kind of string that can be changed uh that you can look at programmatically but to start with always use the dot operator that’s objects in the dot remember how we said when we typed new object that that wasn’t the best way to create a new object let’s talk about objects and what’s called object literals so we’re back to my blank app.js file and we’re going to talk about object literals in JavaScript there are often more than one way to do something so we already saw that I could create a new object by going new object like that and we’ll talk a bit more about this later in the course as far as what it really means but there’s a shorthand for this called an object literal and it’s just curly braces like that that’s the same as new object so if I console.log person and I’ll just run this go to the console you’ll see that it’s an empty object just like when I said new object so this is shorthand notice this is not an operator what’s happening is that the JavaScript engine when it’s parsing the syntax and it comes across this curly brace and it’s not part of something like an if statement or a for Loop or something like that it assumes that you’re creating an object and so I open and close this brace and now I have a new object but I can do a lot more than that I can initialize the object I can set up properties and methods all Within These curly braces on what is essentially treated as one line of code so for example can put the name of the property or method then a colon and then the value so a name value pair I can separate those with commas and put another name and value pair so now I have two properties on my object if I console. log this and refresh there I have my object with its two properties this is essentially the same as saying person equals new object and then manually setting one at a time these individual properties notice I can use double quotes or single quotes for strings in JavaScript these two things this and this are the same but this is much faster much quicker to write so I can actually then create that object that I initially created in our last lecture and it’s often good to use whitespace JavaScript is very liberal about letting you use whitespace that is spaces and tabs and carriage returns and this is still treated as one line of code but it just makes it more readable for me as a human so I can add another comma so we separate each name value pair with a comma when using object literal syntax and I could give it that address but this is another object so I just make another object with curly braces using the object literal syntax and then I can do exactly what I did last time separating with commas giving the name and the values so what’s happening is the syntax parser and then the JavaScript engine the rest of that process when executing this code when it hits this line of code and again this is treated as one line of code then it sees the curly brace it says Ah you must be creating an object and it looks for these name and value pairs separated by a colon and if it sees another set or even within another set etc etc of curly braces that’s just means another object so I can drop an object in whever I want and Define its properties and methods on the Fly using the syntax and so if I output this to the counil you can see that I have my first name my last name and an address property that’s an object itself with city state and Street a lot faster than defining all of these one at a time on separate lines of code so this is a wonderful way and the preferred way to quickly create an object it gets even more powerful though when we look at how the engine treats this shorthand I can create an object anywhere that I can create any other variable on the Fly just like I could pass a number to a function or string and create it on the Fly we can create an object on the fly when passing to a function for example let’s let’s Show an example let’s say I have a greet function that accepts some person object and this person is going to be Tony right here and let’s say the Greet says console.log High plus person. first name so I have a function that expects an object that has a first name property so I could call greet and pass Tony and I should see hi Tony and I do so this object that was created and sitting in memory is passed to the function and it’s able to be used but I could call the Greet function and create an object on the fly so maybe I wanted to say first name Mary last name doe notice I separated the name value pairs with a comma and the name and value is separated with a colon and the whole thing wrapped inside curly braces I’ll zoom in a bit on the code just a bit just so you can see this better see that and I could even use then some white space just to make my life a little bit easier when reading this so that looks a little strange doesn’t it looks a little weird if you’ve never seen something like this before in other programming languages but in JavaScript I can use use object literal syntax and what’s happening is the JavaScript engine sees that oh you’re calling a function and oh what are you going to pass to it well I just saw curly brace so I know you’re creating an object right here at this moment of execution and passing it it’d be no different than passing anything else like a number or a string you’re creating that string on the fly when the function is called and in this case I’m creating the object on the Fly wherever I want I can create an object as I go and I can use this object wherever I’d use any variable so in this case I should see what well I’m greeting and I’m passing this Tony variable which contains first name and then I’m calling greet again with a different object this one created on the Fly using object literal syntax and the first name is Mary so what should I see in the counil two greetings right hi Tony hi Mary see how that worked and notice that I can mix and match this syntax I could take this variable Tony and add a new property using the dot operator instead of an object literal and then use an object literal to define it as some sort of object so I’m mixing and matching my methodologies so why does this work well because remember what we said the code that you write the physical code you’re writing isn’t what’s really happening under the hood it’s being translated by the JavaScript engine into something the computer can understand so this syntax whether it’s object liter or you’re using the dot operator or you’re saying new object whatever is going on it’s all doing the exact same thing under the hood of the JavaScript engine it’s creating this object in memory and its properties and methods in memory and that’s it so the syntax that I use doesn’t matter because in the end I’m actually creating the same thing the JavaScript engine behaves the same way in both cases so it’s just a matter of what syntax would you like to use and as it turns out object literal syntax turns out to be really powerful it can make some for some very clean looking and easy to write code so this is the object literal syntax using these curly braces to Define name and value pairs separated by colons all right let’s move on hi I’m Tony Alisa if you’re not interested in the rest of this 12-hour Advanced JavaScript course I completely understand I hope you found the first 3 and 1 half hours useful and I wish you the best in your programming efforts if you are interested check out the links below for coupons or head to learn webdev domnet in the rest of this course we’ll build on the knowledge that we’ve already gained to have a clear understanding of first class functions callbacks closures immediately invoked function Expressions call apply bind we’ll dive into prototypal inheritance function Constructors object.create and the new es6 classes and we’ll cover all of this by understanding how it’s working under the hood of JavaScript engines we’ll also dive into the jQuery source code to see how we can get an open-source education by taking our JavaScript knowledge and using it to read the source code of famous Frameworks and libraries to see what we can learn we’ll take all this knowledge and build our own mini framework or library at the end of the course and along the way and in bonus lectures we’ll look at the new things that are coming to the next version of JavaScript so I hope you appreciate as I do that it’s better not to just imitate other people’s code but to understand how things are working under the hood to make you a better developer so again visit learn webdev .n net and happy coding
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Is this course still relevant in 2024 since this is before ES6?
Thank you very much for this awesome video
this video changed my life like 6 years ago.
Hello sir I just want to say if you can make new javascript understanding the weird part course on udemy in 2024 because this ( var ) it's causing a lot of problems in the execution contest and scope area we need a new course using the word ( let ) and ( const )
Thank you sir for everything
I really appreciate your video. Thank you for putting the time into these lectures. I am extremely curious and I always question the How and why things work. Thanks again for your insight.
Oh gosh…@3:13:29 you’re telling me that “firstname” is no longer a primitive string, but a reference pointer to the primitive string “Tony”? That’s wild. I could’ve understood line 6 if it were, var firstNameProperty = person[“firstname”]; but not just a straight prim string. Ugh…I come from the C and Java world so I’m trying to break mental connections trying to learn JavaScript and it’s kinda fun and no fun all at the same time. Wtf.
Hi! Digging the video. Is it still viable in 2024?
Hi Tony, I have a question about the part Asynchronous callbacks @ 1:37:35: I ran the code you wrote but I noticed a different behavior:
When I click on the document, the click event is not caught by the browser while the waitThreeSeconds() function runs. Only after the function finishes running, when I click again anywhere on the document, the browser catches the click and then runs console.log('click event!').
Are there any changes from the time you recorded the video about this behavior??
This is the single most important Javascript video if you truly want to deeply understand how Javascript works in both node and browser environments.
Hands down one of the best javascript course i have come across. Really makes it interesting and explains why the Javascript the way it is
It seems like I'm the only one in 2023 😅
Thanks for the nice web hosting knowledge! Ive tested DreamHost and HostGator, however Cloudways with TST20 coupon is the budget-friendly choice.
Thanks for the nice web hosting knowledge! Ive tested DreamHost and HostGator, however Cloudways with TST20 coupon is the budget-friendly choice.
Даже присваивание в той же строчке не осилили поднять. Хойстинг, блин. )) Разумеется в других языках такого нет ))
3:20:43
is this tutorial still relevant in 2023 ,- thank u.
What great content !- I wished I had known about it years before. I would have saved tens of hours watching tutorials. Thank you so much.
The subtitles would be very helpful please!🙏
Thank you!
Hi tony I enrolled on UDEMY to take the course but I CAN NOT download it any idea what is going on, and I couldn't get in touch with them thanks i am using this video to have a head start
Good course. I particularly enjoyed the instructions on how to download Google Chrome.
Love your course so much! Thank you!
A good refresher after +10 years. 😅
Its good video but not better than Namaste javascript series by akshay saini .
Do you have any latest course as well that does cover ES6 concepts ?
Two things are very important you did not explain. Frist: when talking about scope chain: sometimes we call a variable inside the function before its declaration therefore we get undefined value although we think it will go out for outer environment to get that variable when it is called before its declaration. Second: About event queue and asynchronous execution, your code will work differently if you place it at the end of body tag and I don't know why!
Hi! Beginner here. I am copying everyone of your steps on brackets and I am recieving many errors. I know we are probably using different versions, and if that is the issue how can I learn for version 6?
7 years ago?! I wish I would have found this sooner.