Become A Web Developer - Part 11: Advanced Javascript | Andrei Neagoie | Skillshare

Become A Web Developer - Part 11: Advanced Javascript

Andrei Neagoie, Senior Software Developer + Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (2h 49m)
    • 1. Scope

      10:25
    • 2. Advanced Control Flow

      11:41
    • 3. ES5 +ES6

      26:42
    • 4. Advanced Functions

      20:05
    • 5. Advanced Arrays

      16:40
    • 6. Advanced Objects

      24:51
    • 7. ES7

      3:06
    • 8. ES8

      9:19
    • 9. Debugging

      8:23
    • 10. How Does Javascript Work

      24:12
    • 11. Modules

      13:19

About This Class

Advanced Javascript

This is the tutorial you've been looking for to become a web developer in 2018. It doesn’t just cover a small portion of the industry. In this multipart video series we will covers everything you need to know to get hired: from absolute zero knowledge to being able to put things on your resume that will allow you to live the life you want. 

Sounds too good to be true? Give me 5 minutes of your time to explain to you why I built this course and what is different here than thousands of other courses all over the internet.

  1. There is no wasted time here. We won’t be using outdated technologies like PHP, Wordpress and JQuery. Although still useful, outdated technologies like the above are low paying and demands for them are decreasing. In this course, you will learn the specific technologies that are the most in demand in the industry right now. These include tools and technologies used by the biggest tech companies like Google, Facebook, Instagram, etc… It’s geared specifically for people that want to learn employable skills in 2018.

  2. After finishing this course, you will be able to apply for developer roles, or upgrade your job title as a developer and earn a higher salary. We won't be taking any shortcuts in this course. I am going to take your from absolute zero, where I teach you how the internet works, to mastery, where I show you how to build an image recognition app using a Machine Learning API (a subset of Artificial Intelligence).

  3. This course is taught by an instructor who has worked in silicon valley, and one of the top tech companies in Toronto. I have built large scale applications, and have managed a team of developers. I have worked directly with these technologies. I am not an online marketer or a salesman. I am a senior software developer who loves programming and believes that there needs to be a course out there that actually teaches valuable skills.

  4. I know your time is valuable. You want a course that outlines the best way to learn the topic in simple, well explained methods so that you fully understand topics instead of watching somebody on your screen and having no clue what is going on. I have created this course after consuming hundreds of books, tutorials, and online courses while I was learning. I have taken the best pieces, the best methods, that I have found, and condensed everything so that you can learn in the most efficient way possible. 50 hours of videos doesn't mean much if the instructor isn't engaging or focuses on outdated topics. 

  5. We have a thriving online chat community so you really feel like you are part of a classroom and not just watching videos by yourself. You will have a chance to communicate with fellow students, work on group projects together, and contribute to open source. Anytime you have a question you can ask in the chat and someone will surely be able to help you right away. 
  6. The course is designed to give you employable skills so you can get a job. Here is what one student recently wrote after taking the course and being hired right away: 
    "I’m a self taught dev, who has been out of work for ~6 months. I had some family things that came up that prevented me from seeking permanent employment, so for awhile I was Postmates/Uber delivery driver.
    After taking this course, I immediately got catapulted back to where I was before, but better equipped and with the knowledge to take on the next job. I had just finished the React section when I went to a recent interview, and it really helped me excel. As of today, I am officially re-employed back in the field, and it is all thanks to this course. I had a blast creating the final project, and FINALLY got around to learning SQL statements, and getting to use them in a project. I’m really ecstatic that Andrei went with teaching relational databases over something like MongoDB, which can also be fun, but is less practical for use on the job. So thanks Andrei , I really enjoyed the course and will be making sure to share it with others who find it helpful. I’m also looking forward to the new ES7/8 content that was recently added, and going through the DB stuff again when I go to build a personal project."

In this course, you will be taken through online videos and exercises where you will be able to do the following things by the end:

  • Build real complex applications and websites
  • Build an image recognition app together at the end of the course so you can add it to your portfolio
  • Go into a job interview confident that you understand the fundamental building blocks of web development and the developer space in 2018
  • Be able to go off on your own and grow your skills as a developer having built a solid foundation
  • Learn how front-end, servers, and databases communicate and how they all fit together in the eco system
  • Build your own startup landing page. 
  • Go off and remotely work by being a freelance developer and bid on projects.
  • Know EXACLTY what a day in the life of a developer is like and what the day to day technologies and tools will be that you are using. 

By the end of this course you will be comfortable using the below skills and you will be able to put them on your resume:

  • HTML5
  • CSS
  • Bootstrap 4
  • Javascript (ES6/ES7/ES8)
  • React + Redux
  • Git + Github
  • Node.js
  • Express.js
  • NPM
  • PostgresSQL
  • SQL

This course is the accumulation of all of my years working, learning, and teaching coding and all of the frustrations and incomplete information I have encountered along the way. There is so much information out there, so many opinions, and so many ways of doing things, that unless you have spent the last years working with these technologies in a company, you will never fully understand. So this course is the answer to that exact problem. I have gone through thousands of coding books and online tutorials and bootcamps. I have worked with these tools on real applications. Throughout the years I have taken notes on what has worked, and what hasn't and I've created this course to narrow down the best way to learn and the most relevant information. 

I will succeed if you succeed in this course. Therefore, I will be there every step of the way helping you understand concepts and answer any questions you have.

I am 100% confident that you won't find a course like this out there that is as well organized, and as useful, to build a strong foundation for you to start a new career. We're not going to be building simple todo applications and cat image sliders. We are going to learn actual practical skills that will put you into the workforce. Some unique sections that you won't find anywhere else are:

  • React.js + Redux: you will learn the library that companies like Netflix, Facebook and Instagram use to build fast, scalable applications. This is one of the highest in-demand skill in the industry.
  • A day in the life of a developer: What will your day to day look like and what tools will you use? I will take you through a sample day at a tech company.
  • How does the internet actually work. What is the history of these technologies: I will actually have you understand the underlying concepts of the internet, and how the technologies we have now, have come to be where they are.
  • How do you actually deploy a real life app so that it is secure, and won't get hacked: How does a real life app get out to the public?
  • What is Machine learning and how you can harness it's power: Whether you have heard about it or not, this is something that you will hear more and more in the coming years. Those who understand the high level concepts and can harness it will have an advantage. 
  • What is your developer environment on your computer look like: We will be setting up our computers with all the tools necessary of a developer so you can use the same setup when you go into the workforce.

Why do we teach the above? Because in this day and age, just knowing HTML CSS and Javascript is not good enough and you won't be able to grow in your role and command a higher salary. I am teaching you these things because these are the things you should know in 2018 so that you are miles ahead of the rest. 

Make this the year that you took a risk, you learned highly in demand skills, you had new experiences, and you received new opportunities. I hope you join me in this journey. 

This is the proudest work I have ever done in my life and I am confident that you won't find a course better than this. 

See you inside!

Taught by: 

Andrei is the instructor of the highest rated Web Development course on many platforms. His graduates have moved on to work for some of the biggest tech companies around the world like Apple. He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.  Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.  

See you inside the course! 

Transcripts

1. Scope: and welcome back in this video, we're gonna talk about an important concept in javascript called scope. Now, what is scope? Scope means variable access. What variables do I have access to when a code is running? So by default in javascript, you are in the root scope, which is the window object. Let me show you what I'm talking about. If in my console, I do something like function a a console log just and we close off that function well, now the function a is part of the window scope. If I go window here and open that window, you'll see that the A A function has been added to the window scope. So when you working in a browser, this is called the root scope. So the parent scope Now what if I do something like this? If I go function bebe and within this function will do variable a equals. Hello. Well, this function if I run this in the console if I now do console doll, log a will that work? No. Because a Onley lives within function BB, The scope is inside of the function. So the only way we can do Consul log a is within the function to add. Oops. Let's try it again within the function to add Consul log. Okay, so now if I run the function I have Hello. Now the interesting thing is that functions have access to any variable in the root scope. So, for example, if I do variable B equals can I access this well function? Bebe has access to this because, as you know, window dot BB exists and variable be lives on the window object. So they both have the same parent. Let me show you what I mean by copying this and putting it into the console now within function. BB, If we do console dialogue, be well, we have access this. Okay, What if I do something along the lines of variable be Can I access this? I do. B equals hello If I copy this and now I do console dot log be we'll have Can I access this Because I have a ran the function But if I run the function BB now if I do console log very well be I get hello because be is the same variable. Okay, let's do something a little bit more complex So knowing what we know, we know that this is the route scope in our case. Is the window within here we could declare a variable fun, we'll say equals five and we'll also declare a function will call it fun function. And within this function, as soon as we create these curly brackets, we've created a child scope in here. So within here, I'll say variable fun. He calls blue and will console log fun here, and we'll create another function. Except this one will call funner function and within this one will say bye and we'll consul log that. And then finally we will create 1/3 function and we'll call this the funnest function and within here will remove the variable and we'll say, Ah, and at the bottom will also do console log fun. All right, so let's go over this. We're declaring a variable fun equals five. We created three functions, and each of these functions create their own scope. And each of these functions console log fun. But what fun means in each one of them is different based on their scope. So the 1st 1 will title it one just so we know the second will say to third and then finally, here we can just say window. So let's run this function and see what happens. See if you can guess what's about to happen here. Okay, so we have Window five, which means this line over here, the fun variable is while five nothing has been run. We read through the script and we see that variable fine equals five. And then we see these functions, but none of them are run. And now, if I do fund function to actually run these and we'll do fun or function and finally, the funnest function. If I copy and paste this and we're on this we see we have Window five, Blind 24. That guy run, which is variable five now, within the first function, we have the variable fun equals two. Hello, because? Well, we've created and you scope and within dysfunction, Liz variable fun that has. Hello. So that gets overridden. And then we have the second function that has by again, same thing as above because we have in new scope a new variable fun equals by and then the 3rd 1 we see that we have fun equals R and again that gets changed and that equals to fund . Here's the fun part, though. If I now do console doll log fund, it's now equal to Ah, because in the third function we've modified fun, which is this variable to equal to up. One thing I want to show you is that in the 1st 2 functions, I won't be able to access the fun variable in the root scope because I've essentially overridden them. Within the fund function and funder function, fun equals something that is their own meaning. So within this function, fund equals hello within the funder function Fund equals by and no matter what, we won't have access to the roof scope. And this is called a naming conflict, where we name things the same way as something that lives, Let's say in the parents cope and we will lose access to it. So to finalize this point, let's just delete this and go over what's happening here. So let's delete this as well, and we'll say just the console log here. When somebody runs funnest function, we run this and JavaScript breeds console log fun. Okay, fun. Do we Do we know her and we look at the scope Here you look at this function. Hey, do you know what fun is? And the function says, Well, sorry, friend, I don't really know fun, but asked my parent. So now we go into outside of the function in this case, the route scope. Now we say, Hey, do you know fun? And they're like, Yeah, we have a variable fun. It equals five. So now Consul lock can log five. But if fun doesn't exist, we ask the parents and the parents says Sorry. I have no idea what fun is. Then we get well, we get in there. So the last check is always the route scope in our case, the window object. If we can't find it, we get this error in the console. We always see. Sorry your friend variable doesn't exist. I think you made her up. And that's it for scope. I have fun exercise for you right after this video. Give it a try and I'll see in the next one. But by 2. Advanced Control Flow: up to this point, we learned the if statement, the if else statement and the else if statement. And if you remember our section outline well, we have a mentioned these two for job script condition ALS, so we're going to tackle those today. As you can see, we have two more to get through. But don't be scared. These air not going to introduce anything new there, just different ways of doing control flow. But they won't do anything that a simple if else statement can't do. However, there are cases where it will be much easier to do these two than if we do something with the F else statement. So let's check them out. The 1st 1 we're going to talk about is Deter Neri operator. It looks something like this condition, question, mark, expression one or expression to and that is the sin ducks, it says. Is this true or false? If it's true, then provide this value. If it's false, provide this value. Let me show you an example of this. We'll have a function called is user valid that accepts a bullion and we'll just return the bullion value now with in here we can say variable answer equals is user valid and we'll just say, True for now. Question mark. So if that's true, I'll say you may enter. Otherwise I'll say Access denied. Let me make video this a little bit smaller so you can see so again. All we're saying is, if this is true, then do this expression. If this is false, do this expression. So let's just copy this into the console and see what happens if I Ron answer. Oops, I spelled there Wrong answer. I get you may enter because user is valid. This truth. Now, if I change this to say false well, in that case, I'll get access denied but still a little bit more of a complicated answer. We can say variable automated cancer and we can say, And I'll do this on a new line just so you can see your account number is is user valid and we'll just say something like falls for now. So because we have these brackets, we're gonna have an expression inside of here that we can evaluate so we can say is user valid. If the user is valid, will say 1234 If not, We'll say not available. If we copy and paste this here into our console and we can see it better, we see if user is fellas, we want to say 1234 if it's not then not available. So if I run this and now I look at automated answer, I get your account number is not available. Well, because is user Validus false? But if I do true well, in that case, your account number is 12 34 Now you might notice that this is actually not that different from If you did function condition was call condition and we'll say if is user valid return you may enter And you did else return access denied this function over here condition If I say variable answer to equals condition, let's see what happens a copy of east to run them. And now if I look at answer, I get you may enter If I got answer to I got you may enter now it's the exact same thing other than well, bit of misspelling on my part But you see that one way is a lot nicer. It's just nice simple. One line a turn every operator is really, really good for these. If elsewhere, there is a check for a condition and there's two possible expressions that come out of it. All right, let's learn the next one, which is the switch statement. There's the fun one. So a switch statement looks something like this, and we can build a simple game right now to demonstrate how it works. I can say function, move, command and we'll say it accepts parameter direction within dysfunction. I'll say variable, what happens? And we'll say, Switch notice that it's a keyword. So it's now highlight interim bread and I'll say direction. The Swiss statement is gonna accept direction. It's going to check direction, and within here we'll say case forward, which means check direction. If direction equals forward, then what happens equals two. You encounter a monster break. I'll explain why Break does right after I finish up the rest of the case statements. So case Tim inside, as you can see, a really good because I can just copy and paste. And now I can say for here, well, say back and if direction is back, will say you arrived home. If the direction is right. In that case, we'll say you found a river and if the direction is left, we'll say You run into a troll and then finally, we'll say Default. What happens equals two. Please enter a valid direction and we'll end it with a return. What happens? All right, That was a whole lot of code. Let's run this command first and then we'll explain exactly what is happening. Copy the code copy into the console, and now we have the move comment. And if you remember, the last video move, command now exists in the root scope, which is window so within. Here it. Let's just say forward now if I run this, I get you encountered a monster. If I go back, you arrived home. If I go right, you found a river. If I go left, you run into a bull. And if I write gibberish I get, please enter a valid direction. That's what switch statements air really good for when you have a lot of conditions instead of using and if else if else if else. If else. If else statement you can use a switch statement and you can see it's breeze nicely. Essentially what it's saying is create variable. What happens then switch. I want you to check whatever the condition is. Whatever the variable is in this case, it's the direction and in case the direction equals forward, do this in case direction is back. Do this. If it's right, do this. If it's left, do this. And it says default is if none of these conditions work. And to remember the program goes line by line, so checks forward. Then he checks back and it checks right and it checks left. And if nothing of those match, then it says you can just default to please enter a valid direction. And then we returned. What happened? So that also that the function returns something for us. And now finally, what is the break? Well, the brake simply says, If cases Ford, then the sign you encountered a monster to what happens variable and then break break is just saying break out of the Swiss statement. So instead of the program, then checking to see if cases back cases, right cases left or default. If we say break the program stops here and then goes straight out of the Swiss statement to return what happens? So if I actually do break before what happens? You encountered a monster and I copy this and let's rerun The function will say move, command IHS Forward notice what happens now? I get undefined because we broke the program Enter saying, Oh yeah, he typed in forward. But before we're able to assign something to the variable, I say break. I exit out of the Swiss statement and I return what happens which it's only been declared, but it's on a sign, so I just return. Undefined. All right, there you have it. Your to other condition. ALS, and you've covered all of them in JavaScript. Now each one is good for its own individual case, but they're all very useful. I'll see in the next one the way. 3. ES5 +ES6: if there's one thing we have learned this entire time in this course is that there is nothing static about being a Web developer. Improvements are constantly made all the time in HTML, CSS and JavaScript and even the browsers get constantly updated. Libraries are also constantly being created. If you remember, libraries are just pieces of code. They could be CSS. They could be HTML. They could be JavaScript pieces of code written by somebody else so that we can use it so we don't have to start from scratch. Now it's human nature to want to constantly improve, and in this video we're going to learn the new features that everybody will be using in 2018. But first, let's recap something from our previous videos. If you remember, JavaScript was created by the Netscape browser and everybody else. All the other browsers started using JavaScript. So Netscape submitted JavaScript to something called the Acma International so that javascript could be standardized and they could say, Hey, everybody use this version of JavaScript on all browsers. That's what Acma script his Acma script is. Well, it's JavaScript, but it's just the standard way of cooling it, so that when the browsers implement what JAVASCRIPT should do and how they re JavaScript. Well, everybody agrees on the standard. Now, every time you see something like this, like es six and you'll see that quite a lot. Yes. Six just stands for Acma script version six. So, yes, there was extra script version one all the way through six. And we're currently its version seven, but it's still new, so we're only learning version five and version six for now. But version five inversion six introduced some new features that are really, really powerful and make coding in JavaScript really, really nice. And most code bases that you'll see in 2018 will be using these features because the very, very exciting topic for me it's one of my favorite parts of JavaScript now. And I'm excited to show you some of these new features that will make your life a whole lot easier. Now. One thing you might be thinking, though, is Andre. I don't want to learn something. If browsers don't support them and I can actually use them. Ah, but don't worry, my friend. These are all features that are supported. You know why? Well, mainly because of something called Babel. You see, a few years ago, Programmer created Babel so that developers can start using new JavaScript features as they come. Remember Acma script releases versions all the time now without having to wait for browsers to implement these features, Babel allowed us to well, to use them right away. Now, how did they do that? Let's have a look. If I going to try it out here, you'll see that Babel shows me something I can write, and we'll learn this syntax soon enough. Don't worry, I can write something like this, which is the new way off writing JavaScript with Acma Script six. And it compiles into this. Now what does that mean? It means that it reads ah, file line by line and then changes it to a version of javascript that all browsers? No. And it works on all browsers when we actually deploy our application or website, which means putting it online. After we're done with it, we can use Babel to say, Hey, read our javascript file and transform it into this so it works on old browsers. So without even thinking about it, you can write all your code in the newest and best way of writing, and you can see how clean this is. And Babel will take care of changing everything for you. So that browser skin read it. Isn't that awesome enough that let's learn some use in taxes? And don't be afraid. Yes, five in years. Six. Made JavaScript a whole lot easier and more fun to write From Now on will be take what we learn in this video to write all our code because it's what the industry is using right now . And this is why you will get asked during interviews. So let's get started. The first feature I'm gonna show you is let and Constant. These are actually very, very simple. These are new ways of declaring variables. So if you see over here in our section outline, you see that JavaScript variables has now to new ways of declaring a variable and as a matter of fact variable that we've been using up to this point, we don't really need to use it ever again. We now have something called Let to show you how both of these work. Let's do a small example. I'm going to say CONST. Player and Constanze for Constant. I will say Bobby and we'll say, Let experience equals 200 will say Let wizard level he called to false. Now, if I do something like if experience is greater than 90 then equals did true. Okay, so these look like variables. Nothing's different. Let's run this through the console and see what happens. Okay, If I now check wizard level, I get fourth. That's that's strange, right? Because in the previous video, where we talked about scope for had wizard level has a variable. I would have got in true here. So if this was variable and this was variable wizard level instead of being false, will be true. No, that's confusing rate. That's because it's not inside of a function. This is a little bit tricky, but with variable, we Onley were able to create a scope inside of a function, but never if it had a curly brackets. But inside of if with let when I say let and let Well, now I've created a wizard level variable inside off. If so, the only way that I can access this is inside the If If I do console doll log wizard level here and console dialogue Wizard level outside. And then let's put inside and outside. If I copy this, peace it in inside I get true outside I get false because now, with let any time it's wrapped around a curly bracket Well, it creates a new scope versus with a variable. If I change this to a variable and I copy this again and refresh if I copy this, I get inside equals to true and outside equals two. True, because wizard level has already been changed. No new scope is created inside the curly brackets because this isn't a function. Now I know that's a really, really confusing, but the one big take away from this is just don't use variable anymore. Variable is actually quite confusing. Now think of let as the new variable. So from now on, we're gonna be using let for variables. But what is Const Well, Const is even cooler. What's this? If I want to change the experience level, I can say experience equals 80. And now if I look at experience, well, experience equals 80. But if I want to change the player, Bobby to a new name equals Sally, I get an air a Simon to Causton variable. What that means is a constant. You're not able to reassign to the variable, so it cannot be updated now. Why would that be useful? It's really, really useful because a lot of bugs happen when you're working in a team of people. If you have something like player and somebody changes the name of the player while you're working on a program and you still think it's Bobby and you keep getting errors because somebody else has touched it, well, that's That's a bit of an issue, isn't it? But using Constant, you make sure that this player variable will always have the same value. So this is actually very, very useful. And my recommendation is that if you have anything that isn't going to change, it should be a constant. So a function could be a constant because, well, if this function, or if the assignment of A is not going to change, then we feel a lot safer using Const. Then let's say let because we make sure that nobody assigns something else to a So the rule from now on is use Const. If you're using a variable that doesn't change. Most of the time you'll use this. And if you're using a variable die, you reassigned something to like wizard level where it changes from true to false, false to true. Well, then use. Let one thing with cost that you have to keep in mind is that if you do, a CONST object equals player. Bobby Experience 100 Wizard level two. False. Well, if I copy this object and try to reassign this object to the same number, I get an error because it's a constant. But if I try and change a property now, my wizard level is to true. So one thing with constant is you can change the properties off the objects. Still, you just can't reassign the variable right onto more fun things. Let's do de structuring and the sons and I'm gonna show you are gonna make your life a whole lot easier again. If we actually have are object here, let's say that we wanted to grab these objects so we'll have to do constant player equals object a player we'll do, CONST. Experience equals object dots experience and then let Wizard level equals object dot wizard level That was a whole lot of typing to access cease properties. Well, with the structuring, you can do this. You can say const player and experience from the object. So with this syntax, it does the exact same thing as the 1st 2 lines over here. You just select the properties you want from an object. And now you have constant player and experience available to you so you can use player anywhere you want in your co base and then for let we can do wizard level equals object much, much cleaner. You just have to get used to it. But it's a lot nicer toe. Look at right. Another thing. Cool thing you do with objects, CONST. Name equals Jon Snow. We can just start on. You object here and we can say now name is hello and we can do Ray Smith. Hi. Hi. All right. So this is a silly object, but I wanted to show you some new ways of declaring object properties. Now, in ES six, you can have instead of the old way of having just player or experience or wizard level. We can have something dynamic that we can assign. Like Jon snow or weaken Do Rae Plus Smith. Or we could do one plus two and have these dynamic property values. Let me show you how they work. If I access object now I have three equals Hi. Hi. And Jon Snow equals hello again. New ways of declared properties Very useful if you need to calculate something for the property value. But even Cooler is being able to do something like this. Imagine you had a constant A equals to Simon Crosby equals to true and Const see is an empty object. And if we wanted to add these to an object we would have had to do is a b is be and see it's C and sometimes you wanted the property to match the value again with the new JavaScript If property and value are the same. In that case, we can just say a B c so we can remove. We can remove the declaration that we have with property and value if they're the same and just keep it like this again. This is something that when we get to the react section, it's going to become very, very useful. All right, something even more fun and this time it's templates strengths, So template strengths. Now remember when we have to say greeting how knowing it was that we had to do Hello Name Plus, you seem to be doing plus grew heating And then let's say you had an exclamation mark and you also have to worry about backslash. If you had an apostrophe that was really tedious and annoying. Now you knew something really fun instead of doing it this way, you can have greeting fast equals something called templates shrinks and these air back ticks. So the back ticks that this is right above your tap key. If you're on a Mac instead of using double quotes or single quote, this means templates, strings. And now you can use double quotes or single quotes anywhere you want. And it will be a strength. But even cooler if you have a name equals Sally and age equals 34. Pat is horse. Now we can do Hello. Name? You seem to be notice the same tax and the coloring Age minus 10. What a lovely pet you have So notice what we did here. I'm going to copy this just so we have it I'm gonna comment this out. Now. If I look into the console, I'll refresh you see that now instead, off doing all that double quotes and plus and worrying about spacing within these back ticks, I can say a piece of string and then add dynamically by using the dollar stein than the curly brackets of value that we want weekend again do any sort of expression. So age minus 10. What a lovely pay you have. Let's see what happens if I do Greeting best. Look at that. Hello, Sally. He seemed to be 24. What a lovely horse you have. Very cool. So this is very, very useful. Will be definitely using this late on in the course. Another thing I want to show you is default arguments. I can do something like greet will say name equals empty string. Age equals 30 and we'll say Pat is cat. I was just copy what we had before with the greeting. I'm gonna comment this out and we'll return this so nothing's changed. We just have a function that returns a greeting. The only thing that's new is this. Let me show you what it does if I comment this out. I copy this. Put it into the console. And now I, Ron greet. Hello. You seem to be 20. What a lovely cat you have. Do you cash that? Even though our browser And let me just refresh. So you know for sure that our browser has no idea of what age or pet is. But if I run this function because of the way I made the parameters, I gave them default arguments which says, if I don't provide value for name, which I haven't I haven't given any arguments. Well, then make name empty strength. Make age 30 and make pet cat. If I do now greet John 50 and will do monkey Now I get Hello, John. You seem to be 40. What a lovely monkey you have. This gets ignored because I've passed it parameters. But otherwise I can pass a default parameters so that when somebody calls this function and they don't provide these arguments, my function won't fail because, well, I have default arguments, vehicle. All right, what else do we have? Let's refresh here. If you remember, we had one more type to do JavaScript types, and that is a symbol. It's actually not used very often, but I wanted to show you just because, well, it's a type of we want to complete the seven types of JavaScript and a symbol is special because for have symbol one, I create a symbol. By doing this index and I could have a second symbol that is symbol, and within here we can put anything we can put to. And variable symbol three equals symbol and will say food is, well, what's so unique about symbols. And we should be using polite here. If I copy this and I access someone, I get symbol access. Seem to I get Fu and Sim three. I get food, but the unique thing is that if I do, Sim two equals sim three. I get force even though well, they look like they're the exact same thing. And symbols are used because they create thes, completely unique type so that you can make sure there's never going to be any conflict. And the symbol value is used as an indented fire, mostly for object properties. It's pretty much the only purpose of that because sometimes you don't want object properties. If you have thousands of them to collide and be the same ones. Because then you'll get bucks. We won't see too much in the course. You won't see it out in the wild too much. But I wanted to show you it regardless because, well, we want to know all the javascript types. All right, One last one. I know we've covered a lot, but this is the best one, and that is arrow functions. Up to this point, if we wanted to do something like add, we had to do a B and returned a plus B, and you might have gotten sick and tired of constantly writing function over and over and over. Well, now you have our functions, So with an air function, you can dio look at that. So any time you see this syntax who had to pass a and B here as well, any time you see this in tax, it's the same thing a saying function. But now it was just the shorthand form so that you don't have to constantly right function . And the beauty of it is that you could have done return A and B and that completely work. So the only difference is that we have a function expression that accepts a parameter. And we have this fat Carol. But with an air function. If you have a single return, well, you can just put it on one line, and it assumes that you want to return this. If I save this and copy it in year, I don't need this syntax. Let's copy that one more time ad for and to. That's the first function. And then the new way with the arrow function. Add to for two again I get the same thing. It returns automatically because everything well, it's on one line. It looks very, very nice. A lot easier to write than the above. And there you have it. I know that was a lot of information. Make sure you do the exercises after this video. To get yourself familiar with the syntax is just new ways of doing things. These air gonna help you to write better, cleaner code And just to show you what we've covered, well, you've managed to finish everything in the section outline from variables to condition ALS to finally the air function. We've covered everything that we've wanted to for JavaScript and moving forward. We're gonna be using these. New syntax is too, right. Our coat. I hope you're excited as I am to start using these. I'll see in the next one the way. 4. Advanced Functions: Welcome back. Now why you'll learn in the next few videos is quite advanced. It does take some time to really grasp the concepts and understand them. And the best way to do that is to do these yourselves. So use thes videos as a reference to come back to you. When you have questions, I'm going to cover the main topics that you'll see out in the wild. You can come back and reference these videos whenever you have questions, and in this video we're going to tackle advanced functions. Now, I have a sample function for you here. But knowing what we learned about the new JavaScript syntax, we're gonna convert this first to how we should write JavaScript in 2018 function. Word is gone. Now we can just say CONST first equals herro function, and this era function has a greet which can be a constant and a function which again can be constant. Second and finally, this can be a constant as well. We also learned about scope. A new important property of function is that the variables created inside of them, including their parameters, our local to the function. So that means that every time we run the first function, this block of code gets executed and they greet. Variable gets created every time. Now, this is actually good for us because we make sure that if our program, every time we run first remembered to greet well, they'll have conflicts because it's a constant and we constantly reassigned the same thing to a variable that already exists. So this way, within a function, we make sure that every time we run it, it's a clean slate. You can name the variables, however you like, because there's nothing else that will collide with it. Like I said, this behavior helps prevent accidental interferences between functions. And as developers, we want to minimize the number of bugs or errors in our coat. If all variables were shared by the whole program, it take a lot of effort to make sure no name is ever used for two different purposes. Imagine if greet was in another function and we had no idea, and we can't use it well. Luckily, by having our own separate scope, were able to make sure that we can use greet without having to check the entire code base now by treating function local variables as existing alling. Within the function, the language makes it possible to read and understand functions as small universes where whatever happens in that universe Onley matters to itself. But I also wanted to demonstrate an interesting concept with JavaScript, and that is closures. You can think of it as this. Ah, function runs the function executed. Now it's never going to execute again. Kind of like the first function. We just executed it here and the result we put into new function. It's going to remember that there references to those variables alive in a memory. First, however, we see a problem here. You see that when we load up this program on our website, the JavaScript engine will see this. I'll say Okay, we have a variable first. That's a function great. And then in the next line, we see hope we want to assign variable new function and we want to get the result of first . So the program runs first sees that we want to create a constant greet high, and then we also see that we have another function called Second and were returning that function. But there's a problem here. Eight second needs to remember what greet is, although first runs and return second. So you can think of this as once we do this. We will only have the second function now, and I know this is This looks confusing, but just look at the highlighted here. That's what calling first meets. But you see over here that the Greek variable second doesn't well, it's not within the scope of second right. What closures does and this is a rule in JavaScript is that the child scope always has access to the parents scope, so it's almost as if it remembers. They always remember that there's a reference to those variables alive. So inside the Web browser, the Web browser says, Ah, this second function needs greed. So I'm gonna remember it. Let me demonstrate that for you. So if I do first here and I'm going to copy this into the console and now we have a new function. If I run new function, I get high. Even though first is never going to be a run again, the only thing that we have left is the second function. The Web browser remembers Crete again. This is ah confusing concept when you hear for the first time. But like I said, just remember, closures is just saying, Hey, function ran the function executed. It's never going to execute again. But it's going to remember that there are references to those variables, so the child scope always has access to the parents. Go now. You may be wondering if I did here. CONST. Name equals Bobby. Will the first function have access to Bobby? No, it wouldn't so think of it this way. Children always have access to their parents cope, but parents cope. They don't have access to their Children. All right, let's get into a few more things. Next we're going to talk about currying and occurring is the process of converting a function that takes multiple arguments into a function that takes them one at a time. Let's see what I mean. We have a function here, will call it, multiply and multiply except two parameters. And again, we're using our new functions. Index will say a multiplies be now currying means we're changing this function to Onley except one parameter at a time. So that means we do curried multiply equals Hey, be eight times be Whoa, what do we just do? And again, this looks very confusing. But think of these arrows as functions. So right now, if I do curried multiply and I'll just say three. But let's see this in action. What happens? I get a function that excess be multiply bay. So by running this is saying that a is three and now we'll know that when we multiply a street but because this has a function and another function so function inside of a function, this just returns this part. So returns a function, as you can see here. So now, in order to make this work, let me put this back in order to make it work, we have to say curried multiply. I will say three and then another Bracket four and I get 12th. If we look at this function compared to here, we see exactly what we did. We created a variable curried multiplier that except a parameter. So it's a function that except a In this case, it's three. And once you call that function, once you run it, it returns another function that except be and that function multiplies A and B. So what? I'm doing here is saying current multiplier a is three b is for and now most fly a time speak. And as you can see, as I said about currying, it's the process of converting a function that takes multiple arguments, like I said, into a function that takes them one at a time. Now, why do we even need to do this? Because now it's more extensible. I can do something like constant multiply by five equals, and now I have this. So any time I want to multiply by five, I could just say, Let me copy this now any time I want to move Playa number by five, five 10 And now I have this function that was created that always multiply things by five, which is very cool. All right, we're gonna get into one more thing, and then I promise I'll make your heads up. Hurting it's called Composed and compose is the act of putting two functions together to form 1/3 function, where the output of one function is the input of the other. Even me saying that I'm like, What did I just say? So let's write this down. A composed looks like this, let's say F and G parameters F N g return a function that takes parameter A that returns a function that has this holy moly. And if you look at this and you have no idea what's going on, this something that takes years for some to get it is really, really advanced off. But if you are able to understand the inner workings of this, you can pretty much do anything. Let's let's give it a go. What is happening here? Well, it looks like looking at F and G. It looks like F is a function, because while we have the brackets, it even highlights it. And blue for you and G is also a function. If I had a some function that that lets say, takes a number and just adds one, what we can do with composed is I can say compose again. We have the function year, some some, so both f n g are some. And now because it takes another bracket, I can say five. All right, so let's run this and then we can go step by step to show you what it does. I get seven. So why is that Well, let's take it one by one. If both f N g r Sum and A is five, we look at what the function returns. And because again we have two brackets were executing the first part of the function, which returns us another function, which is this, and within it we give the A five. So when this function runs it say's Hey, it's five. Okay, and then let's run the Inter Function G. In this case, it's some. So if you remember, some is just saying Give me five and then five plus one. So now this changes to six. And then finally the F function runs, which is again some. And this says some is giving me six. So six plus one is seven and this whole thing returns seven. All right, that was a whole ton off stuff. But I want you to remember these three key words, because when you get to advanced JavaScript functions are really, really important. You'll hear words like closures and currying and compose a lot, and you'll find tools and libraries that used these heavily. Now you don't need to know the definition of them. You just need to be able to read a piece of code and understand what's going on. And this is why I like showing you this. Although it's really advanced and very hard to to grasp by understanding the step by step process of how we function works. This is really useful because now when you encounter this in the wild, you'll understand how everything works. Now to finish off this function section, I want to tell you the most important thing that you can do as a Web developer when creating coat. And that is the idea of avoiding side effects and functional purity. What does that mean? Well, let's go back to my dad, Graham here. You might remember this from the first part where we said a input is what we give a function input of some sort. It could be an empty input, or it could have parameters like five attend a function does something that we define. It has its own scope. Remember, it's its own universe. It could have consul log, it could do a bunch of stuff, and then it asks, Am I returning anything you can? This should be undefined so you can return a value or if it doesn't return anything, it just does undefined. Now the two words that I just said side effects and functional purity, well, side effects are any of these things any off actions that happened inside of the function that we don't really know anything about. If it interacts or reads or writes to an external variable, for example, or console logs, well, that's a side effect. If we change here, a variable one equals one, and then I have a function that changes a well, that's a side effect. That's something that the functions doing to affect the outside world remember, we want to think of functions as its own universe, and if it starts affecting the outside world, I mean, it's not the end of the world we've done consul long before we've done. We've done this before, but it is good practice to avoid the side effects. And by avoiding these side effects, we have something called functional purity and functional purity is a concept where we say in order for us to write really, really good programs, we want to avoid side effects, and we always want her return so that this and this are gone and we always return something . And what's the power in this? By avoiding side effects and always returning, we create something that recall deterministic and deterministic is a word that you may have heard. It means that no matter what, if my inputs, let's say five and 10 go through this function, this little universe, the return value will be always the same. Let me say that again. The input. Whatever we put in the parameters, whether it's empty or it has certain parameters, it always returns. If we run this 1000 times, it always returns the same value. That's determinism. It's a very important constant, and that's a key principle in avoiding bugs. Because if this function always does the same thing, well, then you know exactly what it does and you won't have random errors popping out here and there. That's what I want to leave you with. Although this is not the law and you'll find code bases that will have a lot of side effects, there's gonna be a lot of things happening inside functions that maybe even affect variables that live outside of a function. It is a really, really good practice to be a top performing developer to have this in mind of creating functions that minimize side effects and have functional purity. What we call determinism, where anything you put into the function, it always returns the same thing. All right, that's it for now. Go try out some exercises. I'll see you in the next one, but why? 5. Advanced Arrays: and we're back to talk about a race again. In the first section, when we talked about a race, we said that they looked something like this square brackets and we can put whatever we want. We'll just put it in a few numbers here. So these are a raise. And we talked about the fact that we can do four loops with them. We can do for each with them, which was new in Atmos Script five. And today we're gonna learn a few more. But before we do that, let's remember how the for each works. Let's say we wanted to multiply every single number in the array. We can just dio const. Remember, Now we can just use our new ES six Index and we can say that new array equals array dot for each and it reads nicely right for each array. We are going to use a number, and we're gonna use air function again. No more function word. Everything looks nicer this way with the fat arrow and for each number in the array. Well, say number times to so multiply everything by two. Now let's see what that gives us console dialogue. You great undefined. Well, because that's not how for each works, right for each just says, I'm going to live over these elements and I'm going to multiply number by two. But we're not changing the array. If we look at the array right now, well, it's still the same thing. 1 to 10 16. We're just randomly multiplying the numbers by two, but we're not really storing in anywhere. If we want to do what we're doing, then we have to say, Const. Double and we'll say that double is an array and then double doc push. So we're pushing on to the array as we looked through it number times two. Now let's see what double gives us. I save, refresh. And look at that. I get to 4 2032 Okay, Now, the ones we're gonna talk about today is map, filter and reduce. I would say that these three are probably the most important methods that you use in your day today. JavaScript. They're super useful, so really start to become familiar with them. And any time you think of doing some sort of a loop, most likely you want to do one of these three Let's start off with map. The above way of doubling each thing in the year A and creating a new ray Well, with map, we can do cost map array, beret dot map number is number times two, and the way map works is that you always need to return something because what's different for map than it is for for each Well, for each just loops over something, and it just does whatever the function says versus with the array weaken. Do what we couldn't with for each, which is loop over each element each number and return a new array. Let me show you what I mean every time the array loops. So let's say over here the 1st 1 is number one. We return. Want times to that gets put into Map Array, which is now two. And then we go to the next number 22 attempts to now gets added to the array 10 times to gets added to the array and 16 dem Sue gets added to the array, so that's why we return it. And by doing this, if we console dog log Cabaret and let's refresh here who and I forgot a closing bracket here. Let's try that again. You see that map array? So the 1st 1 is double and the 2nd 1 is map array. Well, name these just so we know the difference. And let's just we do that all over again. But you're wondering why I am refreshing instead of just copy and basing it down here, Well, that's because because we're using Const. It's saying array has already been declared, so have to refresh. But there you go for each and map. Looking at these two, they seem to both be doing the same thing. But there's a critical difference between map and for each. And I'm here to tell you that whenever you want a loop, do a simple loop and take some action on something like an array you want to use map over for each with four each, the operation may do nothing. You can just leave this completely blank or do console log because all four each cares about is to iterated, which is going one by one to reiterate over a collection of elements like 1 to 10 and 16 and apply whatever operation we tell it. Teoh on each element now map, on the other hand, has a restriction on the operation. It expects the operation to return on element. So with map with for each, you can have multiple lines of code doing all these crazy things versus map with map, you always have a return element. The map it a rates again loops true over a collection of elements, applying the operation on each element and then finally storing the result off each invocation over the operation. That's this into another collection, which is map array. In other words, map transforms the array. It creates a new array, which is map array versus four each, which it just does a whole bunch of actions based on the array. And what those actions are arm really that limited. If we want to return a new array, we have to create our own array and then push. And you might notice here something that we spoke about in the last section when we talked about advanced functions, and that is the idea off side effects. If we go back with for each, you can do a whole bunch of side effects. Within the function you can console law, you can create a new ray. You can push to that array. You can return undefined. You saw that when we first did the four each or even now we're not really returning anything. So we're returning on defined versus with a map. All these side effects are theoretically gone. And because with a map we have to return. Let me just show you. If I don't return here, let's see what happens. I get map on to find undefined, undefined, undefined right away. We know that we're do something wrong, that we need to return. And as we mentioned in the previous section, we've now created a pure function where there's no question about whether we return or not . We have inputs, a function with no side effects that just simply returns a value again, a very important concept. We want to keep things acting in an expected way. We don't wanna have a piece of code that lives on a website, Let's say, for four years, and somebody comes along who doesn't know it intimately and all of a sudden have all these side effects happen that they don't know about again. We want to write pure, simple functions, and that is what map allows us to do. And the other important thing is that we're not changing the array. This array stays the exact same with Matt because we're always just making a new copy of the ray were never mutating the data. All right, so that was map. Let's bring back the return here and let's bring back the console. I want someone to show you that when you only have a single parameter with a narrow function, you can actually avoid the brackets. And again because we're returning and were just returning a single line here we can do shorthand, which is just this. How much cleaner does that look? Let's again test it out. There you go. Everything's looking nice. Look at that difference between the map and the forage. The next one I'm gonna show you is filter. Now, with filter, we can say filter array, and as the name suggests, we can filter our array with a condition. In our case, we can say, Let's return all the elements in the array that are above five so we can say number is greater than five. And as with map, this returns a new race so we have to return something because filter array is going to contain that information. So the way you read this is filter this array, which is up here as you're going one by one. So number will be 1st 1 return is one greater than five in this case is going to say that's false. So we're not going to add this into the filter Ray. Then it it A rates to to is to greater than five. Nope, that's false. So it's not going to go into the filter, right? Is 10 greater than five? Yes, it is good. 10 is going to go into the filter array and its 16 greater than five. Yep, Then 16 is going to go into the array and again because it's just a single line. We can do short form here and now. If we console dot log and we'll say filter, filter, array and refresh, we get the filter containing 10 and 16 if we do equals to five. Well, in that case, we get an empty array because nothing equals five, so you can put any condition you want in here. If you had string and you want to see if it contains the word Hello, Will, You can do that as well. All you have to do is return. True or false. If it returns false, it won't go into the array. It returns true. Well, it will go into the array. Very cool. Very useful. What else do we have? Well, the last one I want to show you is reduce. And this is really, really powerful. You can do a lot with reduce. You can actually do filtering and mapping with reduce. So it's a really, really powerful method. But I'm gonna show you one easy way to get you started. What we're gonna do is we're going to say constant reduce array equals and again this returns a new array we save, reduce and reduce. Takes something called an accumulator and the number Now obviously this can be any name. Sometimes you'll see a CC for accumulator. We'll just leave it like that for now. So you can see we know what number is. Number is 1 to 10 than 16. But what is accumulator? Well, accumulator is something where we can store the information that happens in the body of the function. Let me explain accumulator plus number and again because with reduced were returning an array, We have to return a value. And what we're saying here is that every time you it rates. So let's say the first go around. You have number one accumulator plus number one equals, Let's say, if the accumulator is euro, then illegal. One now zero plus one equals one. When to comes around, we do one plus two because the accumulator remembers what was there previously. And then 10 comes around and you go three plus 10. Now what is the accumulator? We haven't defined it anywhere in reduce after the function, you have a second parameter and here we can specify while you want or accumulator to start with the default value. In our case, let's say zero now If I do console dialogue, reduce can and do reduce array, let's see what happens. We yet reduce 29 because Temple 16 is 26 plus three is 29. If I change this to five and I copy and try this again, we get 34 because the starting number is now five. Very cool. So that's it. I want you to remember these three methods because you're gonna be using them a lot in your career there, very, very useful there pure, which means every time we do an operation, whatever inputs we get in, it always returns the value and there are no side effects. And as you can see, they're very easy and simple to read. So get used to them. And good luck with the exercises. After this video, I'll see in the next one, but by 6. Advanced Objects: Welcome back. We're gonna talk about some advanced objects concepts. Now, as they said, with both a raise and functions these air advanced concept, you're probably not gonna just get it 100% the first time around but used these videos as a reference to come back as you progress through your career. Now, in this video, I'm gonna talk about three things that are important with objects. We're gonna talk about reference type. We're gonna talk about context. And finally, we're gonna talk about in Stan Shih ation. So let's get started with the 1st 1 Referenced that. What? I mean, when I say a reference type, Well, I want you to see if you can guess what's gonna happen when I do. Array equals array. What do you think the answer is gonna be? Let's see. Interesting. Okay. What if I do? Array? One equals everyone. Interesting. Okay, One more question. What about something like this? Object. One equals value of 10 and we'll say object to equals object one. And we'll finally say variable object three equals value. 10. So, looking at these, and I'm actually gonna copy it on here so you can see it as well Looking at this, what happens if I do object? One equals object to what do you think will happen? True? Okay, that makes sense. I mean, object to his object one. But what if I do object? One. He cools. Object three. Here I get false. But why is that? We have value 10 value. 10. They're both the same thing, right? Let's check something else. What if I do object? One dot value equals 15. Okay. And now I do object two dot Valley equals 15. But if I do object $3 value, I get 10. Well, that was confusing, right? Let's look at what's actually going on. And this is the first topic we're talking about, which is reference type. Let's look at the diagram. Objects are what's called the reference types and JavaScript. Up until this point, all the other JavaScript types that we've learned, including numbers No, we have undefined bull Ian's strings, even symbols. They're all defined by the programming language. So javascript, the person who wrote JavaScript and Acma script the standard says these are primitive types . We tell you what they are now a reference type which is a non primitive type are not defined by the programming languages. What that means is that they're created by the programmer. So let's look over here as an example when I say variable number one equals one. JavaScript knows what one is. It's a number. It's a primitive type. It's always the same thing. It's immutable every time it uses the one. That's the same one that JavaScript knows about when I do. Variable number two. Yep, it's using the same number one that JavaScript knows about. However, when we created object, want equals value 10 and objects to equals object one an object. Three. You close the value. 10. Well, those were created by the programmer, their reference types. So what we said was, I want object one. Create a new object will say this box over here, this filing cabinet and in it put value 10 into this box. Object to says, I want you to just reference, and that's where the word comes from. Reference. Object one saying, Hey, I want whatever's inside this box when object three gets created. It's a new object because we have the new brackets and it's saying, put value 10 in this box Essentially, what we're doing is saying when we quit variable object one we're storing just a reference , an address to where we're storing the value 10 which is box one. So we're saying objects one. I'm just letting you know that this is the address off all the contents that you want and that's in Box. One object to is saying, I want whatever is an object one, and we look an object one an object one just has the information off box one. So it references that an object three creates a new object. So it's saying, I'm gonna put my contents in box three and I'm just gonna have the address of the box saying Box tree that's right over here. So, going back to our example, this makes sense. When we change. Object one value to 15. We change the content off box one. So when we do object to dog value, which is referencing the same boxes, object one that's 15. But object three. Dog value doesn't change because that's that's interested in a completely different box. It's Box three and going back to the first example. A race. Well, as I mentioned in previous videos a race are just objects at the end of the day. So when you create an array, it's the same thing. Creating a box, a data structure, and this is creating a second data structure. All right, so that is a reference type, a very important concept. But I think I think you get it right. Let's get to the next one. This gets a little trickier. This one's called context and context gets confused a lot with scope. If you remember, we said that scope is created when it sees curly brackets right. We said that if we create a function as soon as we create that function, there is a new scope that's created so we can have let a equals a and that lives within this universe. It doesn't know anything about the route scope, which is over here. So if I do console doll log a, well, it's not gonna work. Oh, and we need to actually assign something and we need to name it's a legislative be. So if I do this well console dialogue, they will just return reference there because it doesn't exist. So that's scope now. How is context? Different Context tells you where we are within the object. Let me explain. If we say console dialogue this well, you see, I get some highlighting and this is the first time we're seeing this. And it's a special word in javascript, probably the most confusing word that a lot of people have trouble and even people that have been in the industry for years still have a difficult time with this. But let's see what it is. This is, as you can see, the window object. So just the double check. If I do console dot log, this equals window. I get true and I can access this dot alert. Hello. So what this means is, what is the object environment that we're in right now? The best way to think about it is what is to the left off the dot. So right now I'm able to do alert because I'm inside the window object. So doing window or doing this is the same thing. Now, why is that important? Well, when we get to in Stan Shih ation, I'll show you why it is. But it's a very important concept that you'll see again and again. But remember this just refers to what object? It's inside off. Two more example To demonstrate this one is if I do function okay within function. A will say consul dot log this. So if I call a what do you think happens? Let's see still the window object. This still refers to the function, and if you remember, that's because I said it has to be what object were inside of right now. Technically, function a. I can go window dot hey and run the function so to the left of the dot Well, that's the window. In order to create a new value for this, you have to do something like this. Object a function? A. Now, if I do function, and within here I do console dialogue this well. In that case, if I copy this and run object four dot a well, now this is the object which is object for, So why is that important to us? Well, first of all, you'll see it and other co bases, so it's good to know, but it's really important when we do in stand she ation in Stan Shih ation is when you make a copy of an object and reused the code. Imagine you're building a big multiplayer game online, and this game's gonna have many, many players. You can have wizards. You can have trolls warlocks else. Now, if you had to create an object for every single player, that's a lot of repeated code. That's a lot of hassle, and that's a lot of your time. And it's not very efficient to solve that. You can do something. Calling Stan Shih ation You're making instances or multiple copies often object. So let me show you how we do in Stan Shih ation in JavaScript again, this is gonna look a little bit weird at first, just like Four Loops did just like functions did at the beginning. But it's just the syntax and you'll get used to it. So let's say we have a player class now. You see the new syntax already, and I capitalize a class. Now think of a class as something that I want to make a copy off. If I ever want to make a copy of an object, it's a good idea to do something like this so that well, you'll see how easy it is to copy this now. So we do class player. And within here I will say Constructor. And I know this looks weird, but again is just syntax. Let's give it this player can have a name and a type and within the constructor, this done name equals name and this stock type equals type. Oh, boy, was this happened here, constructor, When you create a class A player, Class says, every time I'm making a copy of a player, the first thing that gets run is the constructor function. And this constructor function is gonna create these properties on the player object, so name and a type. And now I can create anything that I want for the player. Let's say we want to create a method such as introduce that console dog logs with tactics. Hi, I am. And again we remember this. Sendak's templates strings this don name. I'm a this stock type. Awesome. So now I'm saying this player class, any player that I create will always be able to introduce himself, and they will also have this name and this start type. And the reason we use this year is that when we create a player, we can access the name in Thai property. I'll show you later on how that works, but this is just a syntax you're gonna get it used to. In order to access the player and make copies of it, you'll have to run a constructor, which is hold the properties and methods that you want the player to have. You can also create methods that players can have, and any time you want to access a property within, the constructor will use this Stott name for want to use introduce. I'll have to do this dot Introduce. Okay, so we have a player. But when we're building our multiplayer game, we want to now copy this, but add on to it. Let's say we have We want to create a wizard player, a player that's a wizard. In that case, we do class wizard again. Capital Letter extends and again is just the JavaScript key ward player. So what is this saying? I'm saying I want wizard to extend whatever player has. So I want to add on top of whatever player has again because it's a class will have to do a constructor, and this wizard is gonna accept name and type, and within here this is the tricky part. Any time we extend something, we need to also call the constructor function of the player. We have to do something called Super with the properties that we want to pass to the constructor in this case, name and type. I know this is confusing is just something you have to do whenever you extend a class you want to use super so that you essentially have access to these. Okay, so let's say that with the Wizard. We also want to have a play function, and the play function will just console dot log. We I'm a this type. And now that we have our wizard, what's the power? What's the reason that we just did this? Now we can do this instead of constantly creating players and then saying that they have their wizards and they can play. Now I can say Wizard one equals new wizard and we'll call the first wizard again. We get name and type so we'll say Shelly and she'll be a healer. And if I want to create a new wizard, I'll just say wizard too, equals new wizard Sean. And he is dark magic who that was a lot of new syntax, so let's go through it and make sure we understand everything. As we've learned. Let's use console log to really understand what we're doing. I'm gonna add a console log right of the top over here and we'll say this. What is this? I'm gonna save. And actually, I'm gonna copy this into the console. Let's copy it and see what the Consul Law gives us. We see that we get wizard. All right, let's go through everything here. I say we have a class player than a class wizard that extends player. And then we have to variables that we create Wizard one and wizard to now the program's going to see the new keyword. And any time it sees the new key Ward, it says, we're creating a new wizard and this wizard is going tohave two parameters, Shelly and healer. So it's going to go to the wizard class again because it has this new word. It goes to the wizard class and it says a wizard, I want you to extend player so it's gonna go to the constructor, and it's going to see this super and what this does is. It takes us up to the constructor of the player and it runs this. And now it attach. Is this as the Wizard? And then it introduces the new function and then adds the play function. Now, if I go to Wizards one and I say play, I get we I'm a healer because Shelly's a healer. But I also have access to wizard one dog introduce. Hi, I am Shelley. I'm a healer. And we also have access to Wizard too. Oh, I have to run this again. Let's run this again. And I don't think I copied the second wizard last time. So now have wizard to introduce. Hi, I'm Sean. Um I'm a dark magic. That sentence doesn't make sense, Sean, but that's OK for now. Let's just try something. If I do console log here and we'll just say wizard and here will say player, just so we can distinguish between them. And I'm only gonna copy the first wizard so that we don't get two of these running again because we're creating two wizards. We're gonna have this run twice, but just for our sanity will run, Shelly. So I'm gonna refresh and adhere Oh, I forgot to add a comma and let's refresh and I get on air reference there must cold, super constructor and derived class before accessing this. What that saying is that in order for me to access this and get this dot type, I have to call Super, which runs a construction function in player. So that's what super is doing. It sounds kind of weird, but it just something that you need. I'm just gonna put this at the bottom after we call super. And now it should work. Let's see again, the first player wizard. So we call super as soon as we say New wizard Shelley Healer. I go to the wizard extents player around the constructor function which says, Super hey, run the constructor function in the player and I run that. And that's why we lost Consul log player first. And then we go to console dialogue, wizard and then run the rest of the class. Very cool. Now, just to show you something, this is actually a new syntax that you'll see in react. And it was part of E s six. But back in the day, this is how we used to do it. The exact same code I have up there is right here. It's called Classical Inheritance, and it doesn't look too, too bad. But you see that there's prototype, which it's another thing that you'll see in JavaScript. And to be honest with you, you shouldn't really use it. It doesn't look very nice. And you see that we have to attach play to both Wizard one and with her to, and it just doesn't look as nice as this. And once you get used to everything, it's not too bad. All we're saying is a soon as we say class who say, Hey, we're probably gonna make a copy of this object So we want to make copies of player We want to make copies of Wizard and that's called in Stan Shih ation. When I do the new keyword, I say Make an instance of wizard and Wizard, uses some functionality from the player and adds its own little play function as well. Holy moly! That was ah, lot like I said. This is something that you'll have to come back to, and you won't get it right away. It's really, really hard to fully understand the topic without actually having to use it in real life. Just keep this in mind every time you hear somebody talk about reference type or contacts or even scope, or in Stan, she eating something. Well, these are the things that they're talking, but objects, they're really, really complicated. They're really hard, but with that, it gives us a lot of power. So with that, good luck with the exercises I'll see in the next one, but by 7. ES7: E s seven, which was introduced in 2016 is very, very easy to grasp. Why? Well, because unlike es six, which had a lot of changes Yes, seven on Lee has two additions to the language in this video. I'll go through both them. The 1st 1 we're gonna talk about is the includes method that was added on strings and a race. Let me show you I could do something like blue dot includes and I can say Oh, and if it includes oh, I'll get a true We can also use it on a RICS. So, for example, if I had an array, let's call it pets. And in the pets I have cat dog and a fat, you know, that's a weird pet, but sure, there's some bad that's out there, all right, And now in here, if I do pets includes dog. Well, if I run this in the consul, I get true. If I do Pat Stott includes Bird. I'll get force because it doesn't include Bert. Very simple. That's it. That's one of them. And then the 2nd 1 is the exponential operator. So if I wanted to have a function that lets sake squares something I can do Function X his ex star star, too. And that means X to the power of to. So again, if I run this and then I do square of to and I cannot spell, let's try that again. Square of two. I got four. I do square off. Five. I get 25. If I wanted to expand on this and do a Q while I can do Cube will have three x Mashal three . So again, if I clear this just to make a bit of space, and I do Q. Off three, I get 27. Cube of four is 64 and that's it. Isn't that nice? Atmos script is going to be releasing small, incremental changes every year, so it's easy to stay on top of language and a voice scenarios like es six, where all of these changes were made and people had a hard time learning all that. Now, with these simple two things in your tool belt, go and practise them and see you in the next video. But why 8. ES8: ES eight has a few more new features that were introduced in 2017 compared to SF In this video, we'll just go over the important ones, so the very 1st 1 is string padding. We have new functions that we can add two strains, which is passed, start and pad. And now to demonstrate this, let's go into the console and let's just do a turtle and we'll do a pad. Start off 10. If I do this, I get turtle with 10 spaces in front of it. If I do, pad and and get turtle with 10 spaces, half trait. And this is useful just for aligning characters of strings. If you want specific padding for them again. Very, very simple. Easy to pick up just another string method that we received. All right, let's go into the 2nd 1 The 2nd 1 that we got is something called trailing commas in functions parameter lists and calls. What does that mean? Well, now I can do something like const Fun A, B, C, D and Atacama at the yet, And if I do a function well, let's just say consul dot logs a just a silly, simple function I cannot run dysfunction like 123 for and then a comma at the end. And this is still valid JavaScript around this, You see that it works. Console log A, which is one gets liked. Now, why would this be useful at all? The main reason is when you start getting really, really big parameter list. You'll see a lot of people doing things similar to this just to make things a little bit cleaner. And when you start doing this every time you add a new parameter, it's a lot easier, but also in get hub. When you make changes, it actually makes the difference. The green and the red differences a lot cleaner. So it's just a syntactic and just make things look a little bit nicer again. You normally wouldn't want to do something like this. But maybe when you have long parameter this like that, the ending comma is now valid and it won't give out an air, right? Let's look at the next one. The next one is We have object dot values and object dot entries and these air very, very useful because before these, we had something called object dot keys and object duckies allowed us to do something similar to a raise, but on objects. So, for example, if we had an object that let's say we'll have an object and this object will have user name zero Santa, we have easier name one Rudolph, and we also have user name to Mr Grinch. Now, looking at this object because it's not an array. We can't do the map or filter or reduce, but this kind of an ugly object, and this illustrates a good point. Sometimes when you're working with servers, you'll get objects that you don't really like or you don't want to work with. But you still want toe it a rate over that. And before we could do something like this with object keys, they make a little bit more space over here so we can see I could do object dot keys and in here well, throw the object and now I can use it like an array. You'll go one by one like an array, so it's as if it's and a ray, but accepted has property and values. So let's say we wanted to do a for each loop and for each key that is for each key in the array. So for each user name, we also have the index. So that is 012 Let's wrap this in brackets and now within here we can say consul dot log Key and then object key. So now we're grabbing the object with the key user name. So if I counseled along this, let's copy and paste this. Clean us up a bit, and I see that I have user names. Santa used her name one Rodolphe user named to Mr Grinch. And that's one way for us to iterated or loop through objects. But with object dot entries, things become a little bit easier. For example, we can do object, must make more space. We could do object, our values and the object up values. If I do a four each year, I simply grab the value and from the value I can just console dialogue value, and now I get the value of each object that is. It loops through Santa Rudolph and Mr Grinch with the entries. If I do object dot entries, well, let's see what happens. It's clear this I get an array off user name Santa user Name one Rudolph and user named to Mr Grich. So this gives you a lot of control. You get both property and valley or key and value, and you can do whatever you want with it and use for each map. Reduce, filter all those airway functions. So let's use a real life scenario here. Let's say we wanted to. We just received this from the back and the back and just send us a bunch of users that they had in the database. And we want to generate user names for them because we don't like the user. Name. Zero User name, one user name to you. Want to display name that displays thesis Santa with the I. D number. That is zero for Rudolfo. Be one for Mr Grandchildren, too. How can we do that? Using our newfound powers? Well, I can just simply do something with object on entries and object that entries will have an object that I can map over. And this will give us a value again. Remember that this will return a raise. And here we just want to return us to a value off one because we want to grab Santa Rudolph and Mr Grinch. So that is the second item in the array. And then we want to add to that like a strength value zero, which is the first sight. And so user name zero user name, one user named, too. And here we want to replace. This is just a function that we can use on strings. We want to replace user name with on empty strength. So what we're doing here is we're creating a new string with Santa Zero because we don't need the user name in here. So now, even though we have an object to begin loop through it like an array and look at that, we have new user names. Santa zero, Rudolph one and Mr Grinch, too. How cool is that? So these air really, really useful additions to the language, especially object values and object on entries. You can do a lot with it, but there's one big he s eight feature that has arrived in. Everybody's excited about and they're called a sink. Await. Now it's brand new, and everybody in the community is really excited about. However, in order to fully grasp the benefit and understand it, we in an entire video on its own. So I'll see you on that one public 9. Debugging: Welcome back. I wanted to talk to you quickly about a very important topic for a developer, and that is debugging. Debugging is the act of looking over code, understanding what it's doing and figuring out why it's not acting as expected. Or maybe it's not even running. Maybe you're getting airs. Or maybe something that the user does on a website is triggering a weird behavior. That's what debugging is free nearing out why the program isn't acting the way it is and what do you work as a developer? A lot of your time is spent debugging, So it's a very important topic, and I want to talk about some of the strategies that we can use for debug. I have over here a pretty complex function. And frankly, unless you've had a lot of experience with JavaScript, this is a pretty hard function to understand. Let's say that you get in tow work and somebody says, Hey, I don't I don't know what's going on with this function. Can you look into it? And you have to figure out what it does and whether it's working fine or not. So I'm gonna take you through the steps that I would use to debug this code. Maybe it's working. Fine. Maybe it's not. But I want to understand what this piece of code does. So the first thing I would do is just read it. I say, Okay, we were assigning a variable, and it looks like we haven't array. It is a nested array. So there's an array inside of an array, and it looks like this code wants to do something called Flattened. Okay, we know that reduce from what we've learned before A is the accumulator. I can change the name so it makes more sense to me. Okay, Accumulator perfect. And B is well, what is be B? Is this right? Because we're iterating looping over the first array, which so it gives us three a race, so I can just say all right here. Okay, Now, I also see that within this reduce, I have the accumulator. I have the array and I want the accumulator to start off with an empty array that makes sense so far. So the accumulator is gonna be an empty array when we start off and what we're gonna do is we're gonna do mt ray dot com cat. And if you remember, can Cat attaches the contents of an array into whatever is being from cattle? One thing I can do is open up this function so that now, instead of just having one line, I can say console dot log array and we'll find out what array is. And we'll also say console dot log accumulator. We'll say accumulator. All right, so we have the consul opened, and we also want to make sure that we're returning this because we removed it from a single line which already implicitly means return to making it two lines. Okay, so let's just refresh and at this function and see if we can get some consul logs to figure out what it's doing. There's gonna be three loop ings that we see, and in the first looping, it looks like it says the array is 01 and the accumulator is Theo Empty array. Okay, that makes sense. And then we see the second loop around. The two and three array which is here gets looped around and the accumulator now has zero and one. So it looks like after the first loop through, I've added the zero on one off the array into the empty Array, which is the accumulator. Okay. And then the last pastor, which is four or five. I now attach the array of four or five into the accumulator, which has 0123 So it looks like what we're doing is where grabbing each array and we're adding it into the accumulator and because it looks something like this. So this is what it would look like in the first path through. We're just using the King cat function to join the race zero on one so that were flooding the race. So that means instead of having Honore inside of Honore, we can just completely flattened everything. That means that with Flint, if I look at it, what it does well, it just lines. You're a 012345 Awesome. There's one other trick I want to show you. And that is, instead of using Consul log, you can use something called T bugger and you notice that the color turned red, Which means Yep, it's a javascript keyword and what this allows you to do. Well, let's see what happens when I run this function. Gonna refresh here and I'm going to run it. Whoa! What just happened? When the JavaScript engine in the browser runs into the word D bugger, it stops. It's a It's a word that tells whatever is reading this file to Hey, stop whatever you're doing, just freeze and it opens up the window for us exactly where it stopped. So let me make this full screen and show you it stops in the middle of its execution. But we see that here accumulator is an empty array because what we started it and the array is zero and one. Now I have a couple options. I can hit play, which resumes the entire thing, or I can hit step over. Let's see what happens with step over. It goes to the next line, and if I click again, he goes to the next line. And now I see that the accumulator is is your own one, and the array is now two in three. So I know that in the next line the accumulator well, I change this to an array by mistake, but this will be the accumulator will be zero and one dot com cat two and three and I can keep stepping through this and see how the parameters change and literally go through the entire function. What's cool is that down? Flight, Bring this back to the way it was. Which is the accumulator. Make this full screen. All right, so array 01 accumulator is an empty ray. I'm gonna step through That changed accumulators now, 01 rate to three and I keep stepping through, and I noticed exactly what's happening in the code, and when it's done executing it returns. And look at that. We have our consul back. Isn't that cool? D bugger allows us to literally go into the function and see what happens Step by step. As I returned this to the way it waas, I want you to take this with you and understand that although when you first see something like this, it's overwhelming. With enough time and using console and d bugger, you were able to understand what a function does. And if it's doing something that you don't expect to do or is doing something wrong, you can use thes techniques to fix it. It's a very useful skill that you're gonna use a lot off, so good luck. Have fun out there, boy 10. How Does Javascript Work: How does job script actually work? Imagine getting this question during an injury. Or how about this? Explained the difference between asynchronous and synchronous and JavaScript. Or maybe they ask you to explain the statement. JavaScript is a single threaded language that could be non blocking. Oh, boy, in this video, we're going to help you answer those questions. This is a video you may need to visit a few times as you progress to really get it. So don't feel discouraged. If you don't feel 100% confident. Just keep watching it and you'll get it now. We don't need to know how JavaScript works internally to write a program, but it is important to learn. I see a lot of people who have been developers for years and not know this. It's like being a pilot and not knowing how to an airplane can fly. Okay, that's a little bit dramatic there, but you get my point. So let's start first. What is a program? Well, a program has to do some simple things. It has to allocate memory. Otherwise, we wouldn't be able tohave variables or even have a file on our computer. It also has to parse and execute scripts, which means read and run commands. Okay, now we also know that from our previous discussion there's the job script engine that each browser implements and chrome. It's the V eight and the V eight engine reads the javascript that we write and changes into machine excusable instructions for the browser. Now the engine consists of two parts. A memory heap and a coal stack. Now the memory heap. This is where the memory allocation happens. And don't worry, we're going to talk about this and then the call stack. This is where your code is red and executed. It tells you where you are in the program. So let's simplify this and show you what I mean. I have sublime text over here and for us to allocate memory and the memory heap. Well, it's a simple us doing const A equals to one. We've just allocated memory. Now, when we assign this, the JavaScript engine is going to remember that Oh, yeah, A has a value of one. We've just used up the memory heap and I can keep going on on and on like this, right? I can keep copying and pasting and changing these variable stupid B and C and I can change the Valley's 200. And maybe here will be tech cool. Now, what's an issue that we see with this? There's something called a memory leak that you're going to hear as you become a developer , and what we've done here is we've created all these variables the's global variables that are in the memory heap. But you see this box right, and with all memory, we have limited a month that we can actually have so by increasing the number of variables that we have, imagine if I had just this page full of variables and instead of just numbers, they're like very, very bigger race. Well, memory leaks happen when you have unused memory such as, let's say, we're not using the variable A, but it's still there. Well, by having unused memory just laying around, it fills up this memory heap, and that's why you might hear why global variables air bad, global variables air bad because we don't forget to clean up after ourselves. We fill up this memory heap, and eventually the browser will not be able to work. All right, so that's memory. Let's talk about the call stack. What is that? Well, again with a coal stack, we can have something like this. Console log will go one on. So log to now. Finally Console log three. If I run this code and my brother terminal well, I get 123 So the call stack, If you remember, that's what reads and executes our scripts. So what The call stack does It reads the first line consul dialogue. It gets put in this call stack. So the JavaScript engine says. Who? Consul dialogue has been at it. Let's pop it onto this call stack, and then it runs it and creates one. Then it says, Okay, I'm removing the first consul walkers. I just finished running it. I'm gonna place the second consul log into my call. Stack adds it on here and says, Yep, execute to. And then it removes that it pops it and then gets consul. Lock three and logs Consul locked three and then finally removes it. But let's have a bit more of a complex example here to demonstrate this point. Imagine I have something like this. I have a function Const. One And inside this function. We have another function cause too. And for now, it's not really gonna do much. Is gonna console doc log for and then in here we'll just say we run the to function. So if I copy and paste this and place it indoor console and I run one, I get four and ignore this area here. It just related to my app in the browser. But you see that we get four. So what happened here? According to the call stack? Well, if we have the call stack here we first ran the one function. So on top of the call stack, the one function gets run. And as we enter into this call stack, we see that we run another function too. So too goes on top off the call stack. And now we run the to function, which is console dialogue. So we have Consul Don log four. That's run inside of the to function. So now that we've read this, the call stack is going to say OK, there's nothing else inside of this I'm going to run Consul lock for So it's gonna print out number four here. It's going to remove that from the call stack and then remove the to and then remove the one because it's just been called and the call stack is now empty. Alright, awesome. Now let's revisit the statement from the beginning of the video. JavaScript is a single threaded language that could be non blocking single threat. It means that it has only one call stack and one called Stack only it can only do one thing at a time. And as you saw, Cole Stack is first in last out. So whatever is at the top of the call, stack gets run first, then below that below that below that delta call stack is empty now. Other languages can have multiple call steps and these air called multi threat. You can also see how that might be beneficial to have multiple coal stacks so that we don't keep waiting around for stuff. Why was JavaScript designed to be single threat? Well, running code on a single threat could be quite easy, since you don't have to deal with complicated scenarios that arise in multi threaded environment, you just have one thing to worry about, and when I say issues will with multi threaded environment can have such Zynga's deadlocks ? No. Guess what you just learned. What synchronous programming. Meat synchronous programming simply means line. One gets executed than lying to gets executed and then line three gets executed. The ladder can start before the first finishes. So this console lock to doesn't start until concert log finishes and Consul locked three doesn't start until these above to finish because, well, we've looked at the call stack because of the call stack. Now you may have heard off the site. Stack overflow. If you're a developer, you use it on a daily. And have you ever wondered what stack overflow means? We'll stack? Overflow? Is this when a stap is overflowing? Kind of like we talked about memory leaks and how the memory heap of a JavaScript engine can overflow well with stack overflow. This happens when the coal stacks just gets bigger and bigger and bigger until it just doesn't have enough space anymore. How can we do that? Can we recreate a stack? Overflow? Yeah, I can show you quickly that to create a stack overflow, all you have to do is function food like we have in here, and this function will just have food and we're just going to run our flu function, all right, that looks confusing. What is happening here? There's something called rickerson and Rikers A means a function that calls itself so. If you look at what dysfunction does, we run Fu and Fu gets executed. What food does is well, we run through again. So it just keeps looping over and over and over having a recursive. But there's no end in sight breaks. We keep adding food to the call stack. We keep adding it over and over and over and over and over and over and over and over, and we have a stack overflow. So if you wanna have fun going to your browser going to your console and runs something like this and see what happens, you're going to get a stack overflow. All right, so hopefully this now makes sense. The JavaScript engine, which is the V eight engine and chrome, has a memory heap and it call stack. No, JavaScript is single threat on Lee. One statement eggs executed at a time. But there is a problem now, isn't it? What if line to was a big, big task. We needed to do, maybe loop through an array that had millions of items. What would happen there? Well, we would have this console log execute than the second line. That is a massive, massive job will just work there. And Consul Lock three will take a really long time to get locked. And in our small example, that doesn't mean much. But if he had this on a website, well, the user wouldn't be able to do anything. The website would pretty much freeze until that task is done and the user just waits there . That's not very good, is it? Well, with synchronous task, if we have one function that takes up a lot of time, it's going to hold up the line. Imagine a buffet restaurant, right if all the people want to eat. But Bobby says, Hold on, guys have to keep eating and putting bacon on my plate. Well, everybody has to wait in line, so sounds like we need something non blocking. Remember our first statement that we made in this video? JavaScript is a single threaded language that can be non blocking. Ideally, we don't wait around for things that take time. So how do we do this? Pull a synchronous to the rescue. Think of a synchronous like a behavior synchronous. Execution is great because it's predictable. We know what happens first. Then what happens next? What happens? Third, but it can get slow. So when we have to do things like image processing or making requests over the network like a P I calls And don't worry, we're going to talk about this in future videos. We need something more than just synchronous tasks. All right, so you're thinking to yourself 100 How do we do asynchronous programming that well, let me remove some of this quarter. We can do a synchronous programming by doing something like this. Set time out, which we're going to talk about, is a function that comes within our browsers, and it allows us to create a time out, and we can just give it the first parameter is the function that we want to run. And then the second parameter is how many seconds we want to wait. So let's say I want to wait two seconds. So 202,000 milliseconds. If I do this now, let's run into the consul and see what happens. Well, what just happened? We have console log one, then Consul, lock three and then console Log to two seconds later. It looks like we just skipped this whole step and then put this at the very yet. Well, you've just witness asynchronous programming in order to understand this and what just happened. I need to take you to in the next part. And that is in order for JavaScript as we know it. To run for the JavaScript engine with memory heap and call stack to run, we need more than just the JavaScript engine. We need what we call a Java script, runtime environment and jobs. Curb runtime environment is again part of the browser. It's included in the browsers. They have extra things on top of the engine. They have something called Web AP Eyes call back you and an event, Luke. And as you can see here, set time out is part of the Web AP. It's not technically part of Java script, is it? It's what the browsers give us to use so we can do a synchronous program. Okay, so, looking at this diagram, let's see if we can figure out what our code was doing. We can create here our own call stack. We'll have Web E P I. And then we'll have a call back. You and Andi family, just like we have in our JavaScript runtime environment. So what's happening here? Well, first we have console log that goes into the call stack, and that gets run. So we log Consul, log to the browser. We then get set time out into our call stack because we finish this first house, we're going to the 2nd 1 And what set time up, What's gonna happen is, well, the call Stack is gonna say, K, I have said time out and because said Time out is not part of JavaScript but part of the Web. AP I in has the special characteristic. What's gonna happen is it triggers the web a p I and says, Hey, set time out has just been called. And because we notified away Bagby, I we can pop it out off the call stack. Now the Web ap, I starts a timer here, a timer off two seconds. It's going to know that in two seconds you have to do something. And because the call stack is empty. The JavaScript engine now goes to console Log three and executes this so that makes sense. Right now, we've done one and three, but we still have set time out two seconds in the Web. AP I Now, after two seconds when our time limit is up, the Web a p I is going to say Okay, said Time out. Should be run. Let's see what's inside of it. Well, we have Consul locked, too. So what's gonna happen is it's going to say, Hey said time out is done. We have a call back and this call back off, set time out. We added to the Colback que saying that hate, we have to run something. We're ready to run it now. The last part, the event, The event loop over here shacks and says, Hey, is the call stack empty and it keeps checking all the time. If this stack is empty and if the call stack is empty and there's nothing running right now in the JavaScript engine, it's going to say, Hey, do we have any callbacks? It's going to check the Colback you and say Who is anything in there? Because the call stack is empty. We can throw something in there and make it do some work. In our case, we say, Oh, yeah, I do. Let me put this into the coal sack. So now we move the coal back into the call stack and then the cold back. We run it and by running, and we see that we have console log to. So it's going to say Console, don't log to. It's going to run this function and once it's done, it's going to pop it out of the call stack and again, we're done with the cold back, so we remove it. And there you go. We're done. Everything is empty and we've just run this 13 It's gonna go through the entire web. AP. I called back, you event Luke, and then it's gonna run consulate log to who? That was a lot of information. So you might need to watch that a few times. But hopefully then makes sense to you of why we noticed this behavior. And I wanna Jones your understanding here, knowing what you know and what I just tell you. What happens if I change this to zero? That means zero seconds. I'm gonna give you a second to think about what will happen. And then we're gonna try, dissect. Gonna clear the consul copying basis and run it well, 13 and two. Did you guess right now think about why that happened. Even though this is zero seconds, it still went through the process. It still got entered into the web, AP eyes and then the cold back you and then they event loop. But the time that was happening, the call stack had already moved on to the consul, locked three and Onley after Consul Log three was done in the call stack was empty. The event loop said, Oh, yeah, we can call Consul log to Hopefully that makes sense for you. And if you're able to understand that, you'll actually have a lot of people that hire for JavaScript rolls ask questions like this on an interview, and you have to explain why that it's so. I hope that makes sense to you, and you can use that to your advantage of the next interview. So let's recap. If you wanted to load your latest tweets onto a Web page and you do this synchronously, then visitors to your site won't be able to do anything until those tweets are loaded. This could cause a long delay before they even get to see the content oversight. They may not be able to click anywhere, and the page will feel like it's frozen, not a very good user experiences. Another way to think about this is calling your teacher with a question synchronous way is you call the teacher. You wait on the phone until the teacher answers the phone and ask him the question and hopefully get an answer. So you let the phone ring until he picks up. But you're not doing anything else in the media. Asynchronous means you send a text to a teacher with a question, and then when the teacher he or she has the time will respond to you and call you with the answer so you can do other stuff in between. So JavaScript is a synchronous when you can leave it a message and a Colback tells you. Hey, Mister Teacher has a message for you when you're not too busy, and that's why we call it a callback function and a Colback cute. We're calling back to let them know that. Hey, there's some stuff waiting for you. Now we see over here that we have Dom Ajax and time out. There's a few other things, but you also see in the cold back you'd we have on Click on Load on Done. Do you remember the event listeners? Well, with an event listener, we had something like an element, and we added Event listener. And in this menace, Nerva could say, Listen for a click and it will have a function that perhaps just console dot log click well , similar to an asynchronous way of programming. We've created this click function, and now we're just listening to it. And every time a click happens on the Web page, so on the dom, well, we run the callback function. Which council logs click right, So to finish things up, when is a synchronous happening? It happens a lot when you try and talk between machines, like speaking to a database making network requests, image processing, reading files. And don't worry, we'll go through this in future videos. But to recap what we just learned, JavaScript is a single threaded language that could be non blocking. It has one call stack, and it does one thing at a time. In order, do not block the single thread. It can be a synchronous with Colback functions, and these cold malfunctions gets run in the background through the callback you and then the event to bring it back into the call stack. So next time you get asked, what is the difference between a synchronous or asynchronous program? Or how does job script work? You should have a little bit more confidence to answer that question, and I hope that this was helpful. I'll see in the next video, but by 11. Modules: when I first started learning JavaScript modules and that topic was the most confusing thing ever for me. I had a really tough time getting a grasp off the concept. It took me a year to actually get it. But I've created a mental image in my head to understand it better. And as we do in this course, we first start with the problem, then go to the solution that we have now to see where we were and where we are now. This is the mental model that I've created, and I call it climbing the mountain of Modules. Let me explain, when we first started writing JavaScript and creating websites with JavaScript, well, we had an HTML file and the very first time people were using JavaScript, you used a script tag, and what we called a Nen line script and in line script is exactly that. We just in line all of our JavaScript within the HTML file. Now there's problems that I see with this. Imagine this getting massive. A massive JavaScript file, hundreds and thousands of line of code. One is the lack of code reusability, and you'll hear this term a lot if we need to add another page, maybe in about donation up page. Well, we have to copy this code and put it into the other HTML file. And the second was the pollution of the global name space. And that is, once I use up a as a variable in this case in the window object. Well, I can never use a again and maybe hundreds of lines down by mistake. I assign a variable A and I erased my A function. Well, that's a huge problem, and that's a big problem in general. You want to make sure that you don't pollute the global name space that is the window object with all these names, because then you have collisions. You're have different team members working on different pieces of the code, and all of a sudden we both got with same name. It's a big problem. The next attempt was script eggs, and this is something we've been familiar with. Instead of having if in line we had Script X and we played around with Bootstrap and J. Query. This is what we did. We had our Jake weary file loaded first, then our JavaScript file load a second. And as you can see, we can have one script fall in the 2nd 1 and the 3rd 1 Then the 4th 1 This way you have everything outside of the issue. Male solves the problem, right? Well, the problem with script tags, as far as I can see, are three things. If we need to add another page like an about page, well, we still have to copy and paste this script acts. And again, we don't really want to do that. The 2nd 1 is the lack of dependency resolution, and that is you're responsible to make sure that the scripts are added in proper order. For example, if this script axis is a function from the number four dot Js file will, it's gonna fail because the number four Js file hasn't loaded yet. So that's lack of dependency resolution. And finally, 1/3. This doesn't really solve the global needs space problem, right? It's polluting the global name space. All the functions and variables that are declared in each of these files will be on the window object. Okay, so what about the third attempt? The I i f e. That stands for immediately invoked function execution. I know that's a mouthful, but it looks something like this. And if he is, it actually wraps a function in brackets so that JavaScript breeze this and says, Oh, I have to evaluate this and execute this. And then these brackets at the end says, Run the function. So after you evaluate this run this function. And it was a confusing way to make sure of one thing. And that is by using this method, you don't pollute the global nay space. Now, if in the first pile you have variable my app, they'll be on the window object. But everything else that's inside a function, as we know creates a new scope. So all the files, because there are wrapped in this if he had their own scope and if you wanted to add to my app, you just added everything as a property or method so awesome that reduced our global names base to just one. I mean, it's not zero, but the one that's that's a lot better, right? But there was still one issue with this. The order of the files air still important, and I've worked on APS before, where we're using so many scripts that this was close to 100 skip tax. And every time you need added a file, you have to make sure that you added in the right place because that file might be dependent on another file loading before it. So as we know, that's lack of dependency resolution. And frankly, this doesn't look very pretty. So then we had browse verify this nice looking logo. Now, what did browser, if I do it actually used something called common Js. So I'm gonna comment the if you out and show you what? Prosser, If I did use common gs which allowed us to use a certain syntax and it looks something like this if I wanted to have on my first javascript file a function ad, I can say module dot exports. And now in the second JavaScript file, I could require the add must fix the strings here and now I can add add function into my javascript too far now, Bross. Or if I use this common Js syntax But it's actually a module bundler. And what does that mean? Well, it runs before you put the website online. What that means is it re suit all the JavaScript files re through all the syntax and it bundles everything into a single file. Once you run all the files through browser if I and again is just a simple tool that allowed us to just dump all our script files, all of these, and to browse, verify. And as long as we use the common Js in tax like this, it will know what to do and automatically create one file. You shall be called something like Mandel dot Js. So all our scripts will just be on one massive file and yeah, that might be bad when were actually developing. But when it's out on the Internet in real world, we don't really care how it looks because we're just doing this to send it somewhere to a server so that the Web app can be viewed by users. That's not what it's actually going to look when developers are working on it. When developers are working on it, we just have our own separate files. We just run it through cross verify right before we deploy, that is, put it out to the public. All right, so that was pretty cool. And We're getting closer to the top of the mountain here now, All of these problems here it was all because javascript didn't have what we call a module system built into the language and think of modules as building blocks as different pieces of code. So instead of having one giant think you have modules, each piece is really, really good at doing one thing. And because javascript didn't have this module system, it's the reason we have so many different ways of importing and exporting modules. And there's actually quite a few more that I didn't show because Well, frankly, it will just be too much. But things have recently changed with the introduction of yes, six. We can now do something a lot nicer and it looks something like this with E s six. We have two new things export and import. For example, in javascript one file I can have a function and you can see them using air functions here , an ad function and I simply export it. Or I can even do export default in the second file. If I wanted to use the add function, all I say is import and then we see here the D structuring You might remember this from the ES five years, six video and we're simply just grabbing God. Or if the export was default, which means with this you can export multiple functions in the same file versus here. You can get on Lee export one thing. So the file on the exports one thing, while in that case we don't need the little brackets weaken. Just do ad from that file. Very cool. So that's nice. That reads pretty nicely. We just put the imports of the top. So each fall we know exactly what each file needs and everything is clean. Everything's works. And we don't have to worry about any of this stuff, right? Well, yeah, kind of, as you know by now, and I feel like a broken record, browsers aren't supporting everything yet because it's a new feature. Again, we're still waiting on browsers to implement them, but this is what this blue thing is for. It's called the *** and ***, just like brush. Verify is a module bundler, that is, it bundles modules, which is bundles, JavaScript files and just like breast, verify it. Traverse is the dependency tree, which is the's export and import tags into a single file or it can even have multiple files based on your needs. And with ***, we can actually use He s six in all browsers. Isn't that awesome? This is where we are now. We've climbed the mountain of modules and we have a really, really good system right now in javascript. It was really hard getting there, but we're in a good place right now, So this is what we're gonna be using. And this is what the industry is using. Get used to this syntax. I'll leave a link at the end of this video so you can check out more. But when we get to react, we're gonna be using this a lot. And it's gonna be a ton of fun. It's gonna make things really nice and clean for us. One thing I wanted to show you, you might think, Hey, this *** thing seems like it's kind of hard like, how does it do it? It's very simple. It just has a convict file just like this. As you can see, we just have an output that is bundle dot Js and we don't need to worry too much about it. Usually when somebody's starting a project, it's one person on the team that configures this fall and everything is done. The rest you just build on top off. It's very, very simple to get started. I don't think it's super important for us to tackle right now, but again a very, very useful tool. And it creates a nice bundle dot Js fall. So now all Rh emails look nice and simple, and you know what? That's it. We've covered some of the most important topics and JavaScript and some really, really hard topics. And I know your brain is hurting from all this information, but you've done it. We've finished this section in previous sections, and now we can actually build amazing apse with the tools that we have. Can't wait to show you how all these pieces come together to build something amazing. I'll see you in the next video, but by