 We'll probably just quickly get started. So the first thing I want to show you guys is a little console that I kind of use for these sessions. So, you know, we'll be pretty much working through a bunch of the excitement. I am on the line here so that we won't be getting that soon. So, you know, this is basically just a sample place where you can just put some little JavaScript snippets and you can run it and see what happens. So, you know, I can type pieces of script here. I hope it's a small enough room. I hope it's visible. You know, you can say alert of two or whatever. Like, you can write little pieces of script there and, you know, hit control enter and it will run it. Alerts, typically annoying. So you can, you know, say print. So these are just like, you know, building a pretty function that you can use to try out stuff. So when you say print, it comes on the right-hand side over there. That means zoom it a little bit. Yeah. So, you know, if you have like invalid code and whatnot, it shows up in the bottom right-hand corner as an error. That's all right. So that's what this console does. What about DOM? Yeah, I mean, so this, you can access the browser DOM. So if you want to, you know, print, let's say alert document.body.html, how that works. That's interesting, isn't it? So that's basically the base editor. So this editor that you're seeing, maybe I don't know how much you can see the color and stuff. So this does indenting, syntax highlighting, you know, all that nice things. So this is basically an editor that the Mozilla team has put. There's a Mozilla Ace project where they use this editor for, you know, basically you can create an item. So have you heard of Cloud9 IDE? How many of you have heard of Cloud9? So that's basically an IDE on the web, right? And it's very popular for building node apps and stuff. So, you know, the editor is basically, again, it's obviously a text file, the task, everything like that. So this is basically a Mozilla project. So I've integrated that here. So that little snippet, I don't know what that is, but it works and we're going to worry about it. All right, so that's the console, right? All right, so what can we talk about? So before I go to the, you know, before I talk about functions, so is there anything that you guys want to talk about? Is there, you know, some burning issue that you run into, you know, that you think? If anybody has any questions, please raise your hand and I'll pass on the mic. Yeah, so that way, you know, this is getting recorded. It's supposed to be a discussion. So on the video, you know, you can hear the questions. So yeah, so if you have questions, if you have questions now asked, you know, you can talk about it. Or as we go along, maybe you'll have questions. First, can we just stick your mic? Is it on? Is the light on? All right, so functions, right? Maybe we can talk a little bit about functions. So it turns out that in JavaScript, functions are a first-class citizen in the language, right? You can use functions pretty much anywhere you can use, I don't know, variables, right? So what can you typically do with variables? So you can declare them, you can assign values to them, you can take variables and pass them to functions, you can return variables from functions, right? So a bunch of things that you can do with any kind of variable. You say var, oops, you say var a. And then you make it, there's a bunch of stuff that you can do. Turns out functions in JavaScript are exactly the same. Most, I mean, pretty much, right? Pretty much exactly the same as a variable. Pretty much wherever you can use a variable, you can use a function. So what can you do with functions? Obviously, you can declare functions. So you can say function who, you know, you can, all right. So you can say a friend who, right? So that's a function declaration. And you can obviously call them, right? It turns out you can assign functions to variables. So for example, I can say var f equals 2. And now it turns out f becomes an alias for this function, right? Another reference for that exact same function. So I can, I can do that, and that works as well, right? Well, where is it hitting twice? I keep hitting control and the control and the control. If you, so for example, I'll just put a clear here. So, you know, just to bring your attention that there's printing. So you can, you know, create alias for a function, call it through that, through that alias. What else can I do? So you can create a function like that, right? And you can pass a function as an argument to another function. So I can, I can say, for example, I can say who or, right? Or probably let me say function print who, right? And then here I can say, now I can say who or print who, right? So in the, maybe I'll print too many foos and put who. Okay, so, you know, there's no different from the earlier case where we just assigned a function to another variable, right? Sorry? Zoom mode? It's not visible in the back. Huh? A little more. So if I go any more, I think this thing will go away. Okay, that's it. There's more seats in the front. Folks want to, you know, sit here. If there's another seat here, I can sit there. All right. So, yeah, so you can pass functions to, you know, as parameters to other functions, right? What else can you do with that? Can you return functions from functions? What do you think? Close. All right. So let's do that. So, I go here, I get rid of all this. So I'll say I know how to make a function or something, right? So here I'll say return function and I'll say return inner function and that's it, right? So now I can say what f equals make func and I can call it. So you can see that it prints. Now this opens up some interesting use cases, right? Now, let's say I pass a variable here, right? And I say equals 10 and return a. No, wait. We will say print a, right? A equals a and that's it. This doesn't matter. So maybe here I'll say print of 10. Now what will this, so when I call f here, what will it do? That should be pretty obvious, right? It will print a x 10. Let's do something else. What happens if I say what b equals 1 and I say b plus plus b, right? This doesn't matter now. I'm not using it. So what's it going to print? Can I call f now? Sorry? Sorry? It will print 2. Any other answers? 1, 2, undefined maybe? So we have all possible answers now. So let's find out. So it does print 2, right? What will happen if I call it a few times? Will it print 2, 2, 2 or keep increasing? All right. So yes, it does indeed keep increasing, right? Now how many of you think this is weird? Why is it weird? Okay, fair enough. So b was not defined inside this function. b was defined in the containing function. I mean, what's really, I mean, even that, maybe I can, you know, I mean, it's still visible in the scope of that function and I'll define whatever. b is instantiated inside the function. It is defined inside or inside makefunk? It is initialized into one. So it is initialized inside makefunk to one? Actually, it is increment. Correct. But every time the inner function is called, it's not the auto function. Exactly. Please use the mic. Yes. We can introduce it in a function reference when it comes to the closure. So the reference to the variable is maintained as long as the reference to the function is maintained. Exactly. I mean, that's the correct, that's the explanation for why we see what is happening here, right? So it's a closure. Now, what do we mean by that? So here, I mean, when I was trying to figure this out, the weirdest thing for me was, so in JavaScript, the construct that defines scope of variables is a function, right? Or any symbol is a function. So when you define something inside a function, when that function is called and it returns, that variable is gone, right? That defines the lifetime of that particular variable. I mean, it's a reference countable system and all that still applies. But in this particular case, when makefunk is returning, I mean, once makefunk is over, right? In line 11, b is gone, right? And when I call f here, I'm still accessing b, right? Now, how would we... So if this was, I don't know, c++, you know, undefined behavior, right? Probably it will just crash or probably it will work, which is even worse. So here, so as that gentleman said, this, basically how this is working is through something called as a closure, right? So basically, when you define a function, whatever symbol, whatever variables, you know, parameters to that function, whatever is visible in scope at that particular time becomes part of what is known as the closure for that particular function. So you can imagine a closure as being like a hidden member for that particular function in question, right? So, I mean, how many of you here are only... I mean, how many of you have done c++, c++, cshab, java, right? So that's good because there are many aspects of JavaScript which look like, you know, they work the same way in static type languages like cshab, javascript and c++, they don't, right? So some gotchas. So probably, you know, we'll see how many we are able to talk about. That's kind of ominous, right? How many can we talk about in one hour? So how many do you have, right? In fact, you know, if you want to know what is the definitive book to learn JavaScript, there's a book called the definitive JavaScript book and that's about that pick. It's a really, really thick book. And then there is this gentleman named Douglas Rockford. He works for Yahoo. He's on the ECMAScript standard committee and whatnot. He's written a book called JavaScript, The Good Parts. That's about that pick, right? So we have the definitive JavaScript and good parts. So what about the rest of JavaScript, right? So, yeah, so JavaScript happens, I mean, the rest of JavaScript is probably part of the reason why a lot of people passionately hate JavaScript. But I think that I put things over JavaScript to fall in love with it. So, you know, my last strike of what I was talking about. So we're talking about closures, right? So that's what's happening here. So when you call function like this, it becomes part of the closure of that particular function. Now, from a C++ or a Java or a C sharp background, right? You write classes, right? You write classes and you have classes which are member fields, members, methods and whatnot. So you can do the same thing here, right? So for example, I can... You've probably written code like this, right? So you say, I don't know, maybe person, name, comma, age. I'll say this dot name is N, this dot age is A. And then you write code like this, right? What, B equals new person of 2 and 10, right? Now you're able to say P dot name. And you're able to say print... P dot age would be a semi-quadron. 0, 0, 0, 0. All right. So it prints a 2 and 10 over here, right? So this is something that we're used to. And this is something that we do in other languages, right? You define a class, class has member fields. Probably it depends on the member methods. And then you instantiate that object. Now, the funny thing is, this syntax that you're seeing here, this is not JavaScript. I mean, obviously this is JavaScript. I've written JavaScript, but... You know, when JavaScript as a language was, you know, was being defined and implemented and whatnot, a long time back in Netscape, you know what language at that point in time was? It was Java, right? That's funny because, you know, it's defined with JavaScript, but it has nothing to do with Java. It is probably in the same syntactic linear JSC and C++, you know, you have curly places and all that. But this has nothing to do with Java, right? In fact, I remember, like, there was this conference, you know, sometime back in U.S. It's called Mix from Microsoft. So Douglas Crawford and a few other folks were there, and there was this panel, this JavaScript panel, which we'll just discuss in digging out about JavaScript. So somebody said, you know, that JavaScript, people say that it's a scripting language, right? And when you say it's a scripting language, it seems to mean that, you know, it's somehow limited in scope or functionality. You know, probably it's a special purpose language that can be used only in certain scenarios. You know, there is this connotation or this, you know, we think about scripting languages in those terms. And the point was that JavaScript is not. You know, it's a pure incomplete language, a general purpose language. You're finding that it's actually being used for things that it was never planned or intended to be used in, right? Using it for server-side. So Douglas Crawford said, you know, so we all know that it's not Java, and you're saying it's not a scripting language, then the language is named completely wrong, right? We call it JavaScript. It's not Java, it's not scripting. So which is actually correct, right? In fact, the standard name for the language, anybody know what's the standard name for the language? ECMA script, right? Which I think is a very ugly name. I prefer JavaScript to ECMA script. So, again, got distracted. Yeah, so this syntax here, I spoke about Java now because this syntax here was incorporated into the language to appeal to Java folks. So Java people see this line here, what equals new person, and they feel very happy. This looks like Java, except for the bar, which is kind of a worry, but you know what, I can live with that. The rest of it looks like Java. Turns out that this has nothing to do with JavaScript. This is basically something that was incorporated in the language for these people to be happy. So JavaScript is a language that is known as a prototype-based language. Why do we say that? This particular quote, if I was writing it the way JavaScript is meant to be used, I'd probably write it something like this. I'd say var, I don't know, person-proto, right? And I'd say name is, I don't know, it doesn't matter what the initial value is. So let's say I do that, and then if I want to instantiate a new person, I'll do something like this. I'd say object.create of, I'll just get rid of all this stuff in the top. So you say object.create of person-proto, right? And now of course you can do the same thing that you did before. So I'll just copy that, paste that, maybe I'll just call this P2, right? And if it runs none and 10. So what is the difference between these two, you know, these two kinds of syntax that you're seeing over here and over here? Technically there's no difference, okay? The key thing is, in this particular case, we are explicitly stating that P2 here is an object whose product, which is basically a, you know, how many of you here know the design pattern prototype? All right, so do you want to give it a shot? What is the prototype pattern? Wait for the mic. In product-based programming, there is nothing called class, so everything is not there. So typically objects we instantiate from class. So here other objects will be instantiated from other objects. Exactly. So prototype is a creation and design pattern which is basically, you know, a way of implementing software systems where you want to solve the problem of creating objects in a particular way. And the prototype design pattern prescribes that you create objects by cloning other objects which are prototype instances. So you set up one object, which is an object that, you know, you want all instances of that particular, you can't say type because you don't have a type. As you said, you have object. So you set up one ideal prototype instance and then whenever you need a new object, you clone that. Right? So this pattern is called as a prototype-creational pattern. I'll add something to that. So every object has something called a prototype change. It's kind of like how you, if you're programming in Java, C++ is a base class and that base class might have another base class. It's kind of similar to that, but you don't have to instantiate stuff here. That's a really difference. So I'll be a little, little like a devil's advocate here and put to a question. The first syntax looks like I'm coming from, imagine I'm coming from Java. It's so familiar. Why should I even think of object that create and creating a prototype object? I mean, it's so alien to me. The primary reason is this particular syntax here is misleading. It seems to indicate to the developer or whoever is looking at the code that, I mean, this looks like there's a type called person and looks like I'm instantiating an object of that particular type. As in, we are trying to, I mean, the code looks like we're doing something which it's not. Right? It's basically lipstick on pig. Right? So we're trying to make the language look like something that's not. Right? So, I mean, you would be forgiven for thinking that we are creating an instance of a type here. Right? So, what is JavaScript? So, languages can be classified as strongly typed or not. Right? So, what is JavaScript? It's definitely not strongly typed. Somebody said weakly typed. So, it is a weakly typed language. Right? So, how many types? I mean, you can probably compare the number of types in JavaScript. Right? Probably, let's just call it out. What are the types in JavaScript? Integer. Integer. Numbers. Number. Number, Boolean, object. Let's not talk about object. But yeah, that's a type. Undefined. What? I mean, what is the syntax? Right? How do you declare variables? I mean, number, string, date, functions, objects and so on. Right? Null. Is null a type? I have no idea. It's a single term. Sorry? It's a single term. It's a type with only one instance. Null is an object. Null is an object. Yes. In fact, if you type out, you get an object. So, and the most ubiquitous type in JavaScript is probably object. Right? Doesn't that make this still a static type language? I'm sorry. It's still a strong type, but it's a dynamic language. Yeah. No. It's not definitely a strong type. So, for example, there is no... It's not untyped. It's weakly typed and it's... It's dynamic language. And the objects change their nature depending on how you want to use them. Exactly. They do. There's an object coercion. If you do one plus in codes two, it will try to convert the codes two to number two and you'll get three. Or the other way around. I don't know what will happen. Yeah. It depends on the order you put. Yeah. That's what happens. I don't know. I don't know. You know what? I don't even know. I don't remember all that. We should. Yeah. So, it's called a weakly typed language So, there are these types and nothing else. You can't create your own types and, you know, objects can dynamically change types. In fact, this is probably going a little too deep. When you're talking about implementing the JavaScript language itself in JavaScript run times, how do they implement types inside? So, when you do this, when you say O equals that, I'm just creating an empty object here. And then I say O dot M1 is 10. And then I say O dot M2 equals 20. So, actually what is happening here is, internally, right, the JavaScript runtime actually creates type. It depends on implementation. Probably I can speak to IE's implementation, Chakra. So, internally, it does create a type. As users of the language, they don't need to know about it at all. But as an optimization, right, the JavaScript runtime would go ahead and this would probably be the empty object. As soon as you create a member called M1, it would create a type called, let's say, T1 with one member called M1, right. And then when I say O dot M2, then it would actually create type T2 which inherits from T1 and has an extra member called M2, right. So, basically, this is basically an optimization technique. So, the idea here is to, you know, when you say O dot some member, right, how do you resolve access to that member? Like I was talking about a prototype chain, right. So, here, for example, I'm saying P2 equals object dot create a person proto and I'm saying P2 dot name and P2 dot age. Now, the question to ask is, where are these members, right. So, when you say P2 dot name, where is name defined? That member name, where is it defined? It's defined in the prototype, right. So, let's say I go and say P2 dot gender equals M, right. Now, where is gender defined? On P2, right. Now, let's say I go and create P3 equals object dot create of P2, right. So, what is exactly happening here? So, JavaScript is a product language. Now, what we mean by that is any given object in JavaScript has a prototype associated with that object, right. So, in case of P2, the prototype associated with P2 is person proto. In case of P3, the prototype associated with P3 is P2, right. And when you say P2 dot, let's say print P2 dot, sorry, P3 dot name, right. What exactly does the runtime do? So, in this case, what JavaScript time of 2 is, you go and see if there is a property called name on P3, right, on the object P3 directly. Has it been created on P3? In this case, the answer would have to be no, right. So, then the runtime would look at P3's prototype. What is P3's prototype? P2. Does P2 have a name? No, it does not have a name. So, what is P2's prototype? P2's prototype is person proto. Person proto does not have a name? Yes. Now, let's say I say P3 dot bar, right. In this case, what would happen? It would again walk the chain, it would go all the way up to person proto. If you check whether that has a bar, no, it does not have a bar. Then you'll see person proto's prototype. What do you think is person proto's prototype? Object. Right, object prototype. In fact, we can prove that. So, in ECMAScript 5, which is the latest production version of standard JavaScript, I can do something like this. So, I can say person object dot get proto type of, and I can say person proto. So, object dot get proto type of is a function to which if you pass an object, it will return the prototype of that particular object. So, I can say get pro type of person proto, and I'll check, and I'll check if that is equal to object dot proto type, syntax error, 4 dot memo. Alright, man, I have too much stuff here. What does 3 equals do? Sorry? What does 3 equals? Yes, good question. Very observant. Let me get rid of all these other friends. Alright, so it turns true, right? And let me zoom back in. So, you know, person, so if you can object by default, you don't explicitly associate a prototype. The prototype of an object is object's prototype. And what is object's prototype? Prototype. Object. As in, what if I put this here? Look. Yeah. It didn't print anything. Is undefined, maybe? No, it's not undefined. It's not undefined. So it's not, right? So that's where the box stops, right? It stops with object dot proto type. Now, if you don't have a question, you know, again, if you're from a C++ and other languages, that looks weird, right? That looks like it's in text error. 1, 2, many equals. Anybody know what that is? Stretch comparison, right? So as, you know, I'll give you an example earlier, right? So he said, let's see, if I say print, 1 equals 1. What do you think it will print? How many of you say it will print true? How many say it will print false? I'm not sure. So, let's see. Take a look at that. See now, so it prints true, right? How many of you think this is correct? A couple of you think it's correct? Oh, weakly it is correct. Sorry? Oh, weakly that language is correct. Oh, weakly that language is correct. I think it's wrong. In my opinion, it's a personal opinion. I couldn't do this. The thing here is... It wasn't right or wrong, it's confusing. It's confusing. That's the biggest confusion. See, there is this principle of... It applies to everything in software. You know, you're designing software, designing your... The principle of least surprise. So don't do anything that will surprise people. Look, what just happened, right? Don't do that. Make it so that things that look like what they'll do, actually do what they look like they'll do, right? So that's the good way of designing software, right? You know, somebody will have a funny way of naming APIs. In fact, Microsoft is going to be doing this a lot of time. You know, APIs will say, you know, create, purchase order, and they'll do something else, right? So that's the problem here. So it looks like this shouldn't work, but it actually ends up working. So if you want strict comparison, where it doesn't do this implicit type conversion, that's what is happening here. I don't know which is happening. Maybe one is becoming a string, or the string is becoming a number. But in either case, the type conversion, implicit type conversion is happening, and it's doing a comparison, and it's resolving to true. If you say, you know, triple equals, then... So as a best practice, just use triple equals. You know, don't even try using double equals. So there's another word in JavaScript. What is? Yeah. So that's the project changing we're talking about, right? So objects, they... So, you know, they have these prototype change. Now the only thing that's slightly different from the design pattern that I was telling you about earlier is that the... When you talk about prototypes, it doesn't really actually clone in JavaScript. Right? It's actually... Every object has a reference to the prototype object. Right? It's not actually creating a completely new object, copying all the members, and now you have a completely new object which is disconnected from the other object. That's not the case. What actually happens is there is this hidden member, which is the prototype of that particular object. In this case, for example, P2 has a hidden member, which is the prototype, and that is basically person underscore proto. It's a reference. Now, you might wonder, you know, that opens up some interesting questions, doesn't it? What happens if I say P2 dot name equals bar, right? And then I say print person underscore proto dot name. So in this particular line, when I was talking about name resolution rules, what the JavaScript runtime would do is it would go and see if P2 has a property called name. No, it has not. Then you'll go see P2's prototype has a property called name, that it does, and then that's what you're accessing. Right? So in this case, what do you think is going to happen? Print. So I have assigned a value to P2 dot name, and then I'm doing this. None. None. None. None? None. Oh, yeah. So none is your name. Sorry. Some of you said bar, right? So let's see what it does. It prints none. What do you think happened just now? It created a new member called name. Correct. So when you said P2 dot name, it created a new member called name. Right? Now let's do... So that's good. That's good news. If this had become Baha, it would have been really sharp. Right? That's what would be a surprise. So this is good. Now let's say I go and do something like this. Address. Street is street 1. City is... Right? So I have a member, which is actually another object. Inside person dot logo. Right? Now I go and say print P2 dot address dot street. So that works perfectly fine, as we expected to. Then I say P2 dot address dot street equals Mumbai something. Right? And I print. It prints Mumbai. That's great. Now let's say person dot proto dot address dot street. Okay. Now what do you guys think? Like the fact that I'm asking the question should mean that it's probably not going to do what you did earlier. Actually, you can see that. Friends, Mumbai. So another word. Right? So this is again part of the reason why people hate JavaScript. So what happened here? So when you said P2 dot address dot street, in any other language, I mean this is, you know, you're completely okay with this because you are actually assigning it on the new instance. But here if you look at the, you know, if you remember the JavaScript name resolution rules, it'll actually make sense because when you say P2 dot address here, what are we doing? We are accessing the value or we are writing to it? We're accessing the value. So does P2 have address? It does not. So which address does it give? The prototype's address. Right? And then we are assigning to that. So now in fact, at that point we're assigning to the prototype. Right? It's a problem. Right? So if you're using object dot create, you have to remember this. Right? If you have nested objects inside the prototype object, you need to remember to clone it. So in fact, in many, many frameworks, you know, they create a, you know, a clone method. This is not part of the standard. So people go ahead and create it themselves. They basically walk the object graph. Right? You can just say clone or something. And what they do is, they just walk, you know, walk the object graph and see if there are nested objects and then they basically create a copy of that object, in turn. What did you have as a whole property method? Did you get checked out? Yes, there is. Can we just check that if we can, like, Yes. Yes. Yes. Go. I was just asking about the has-own property of this object. Correct. So, yeah. So, just as we saw object dot get prototype of, there is another method called as object dot has-own property. Right? So this is just a way of, you know, reflecting on objects. For example, here I can say print object dot has-own property of p2, address. Right? And what do you think it's going to print? It prints false. And which is absolutely correct. Because p2 does not have an own property called address on, on that particular object. So, if I say gender, it also says false. Where does it say false? I have no idea why. I was expecting it to say true because gender is a property on p2. Right? It is an own property on p2. Let's see. See, there you go. It does give gender. So there is another, another method called, called keys on the object-object. So you can say object dot keys and pass a parameter and it will give you what are the members on that. That is, own members on that object. So for example, let me get rid of this in here. It's confusing the output. So there you can see that it prints gender. Right? You can only remember in p2 you can still access name and age, but object dot keys returns only own properties. Or maybe I did a typo. Let's try this again. Own property, p2, gender? Yes, I property. You can read it or has own property. The old way. The old classical way is p2 dot has own property. It's an object or has own property. Yes, it's true. The speed? Yes. You move this first time. Really? At least surprise me that was the case. Can we try a question? You mentioned the object, the clone method. Yeah. Let's say the proto object she has has a couple of functions. How does the clone go out there? So functions are all by reference. So, oh, you're saying how can we clone if it's a function? Unfortunately, you wouldn't want to clone, right? That would just be by reference. That's what would happen. The clone would contain the function. Only the data. It's only the data. So, yeah, let's try and see what this is IE 10 platform 3 view 4. So, expect bugs. So, that's it, right? That's it. So, I have to say, okay, this will definitely say true. And then, come on. Chatting up. Okay, let's try five blocks. Yeah. So, here we have object. Yeah, it's true. So, now I say object.hasownproperty p2 it says pause. So, that's that. What else? So, yeah, so, you know, if you have nested objects, and if you're using prototype creation, remember to clone it. So, those are some of the things that I want to talk about about functions and kind of, you know, didn't really kind of stick to that. We already talked about closures. Another thing that I kind of wanted to talk about is variable hoisting. It's an idea called variable hoisting, which is, again, something that I'll just get rid of all this stuff here. So, let's try some code. So, I say function true here. I say if one equals one. It's a completely useless statement. Here, I'll say var a equals 10. And here, I say print a. So, again, it's offered a vote. It's also much of it, you know, and if I put it to vote, I'll get all possible answers. So, everyone says 10. Undefined. Good. So, you're getting the idea. It could print undefined, right? No, that's, I think, that's just a best practice morning. So, you know, this is the Mozilla editor thing. In Firefox, other features are making up. So, in fact, that's good. We should pay attention to that. That's exactly what I'm getting at. Anyway, so, undefined and 10. Those are the options. It's just working. Good. I was checking if you guys are paying attention. So, it prints 10. I don't know what to tell you. Jaskar seems broken, right? I mean, I'm declared this inside this if, but I'm still able to access it outside the if. Right? In pretty much any other language, what defines, so basically, it boils down to this, what defines, you know, scope, scoping for variables, curly braces, right? In C, java, when you define a curly brace, whatever you declare inside of that, is not outside of the curly brace. Not so jaskar. Jaskar is different. So, here, how does this work? So, this concept is called as variable boiting. In fact, this is a feature in the language, right? See, if I can, so, I'm declaring, I mean, I'm calling foo here, right? Can I call foo here? Yes or no? Yes. No. Actually, the answer is yes. Right? I can call it. I can call foo here and then define it later. Right? This is the feature. Right? So, jaskar allows you to do stuff like this, where you don't have to declare something before you use it, as long as you have declared it somewhere. It's not as loose as that, there are some rules around it. But, you know, this is a feature that is designed, this whole thing that we're talking about, you know, it was created for that, but it has these other interesting side effects, which are, again, surprising. It turns out that in JavaScript, the only construct, the language construct, that defines scope for a variable is a function, right? And no other control block will introduce, with, thus, introduce scoping, but don't use with. If you don't know what with, don't try to learn about it. It's one of the bad things in JavaScript, like eval. Eval is even, don't use eval. In fact, this console uses eval. And whatever I type and I get control, enter it's eval. With, also. With. It might be when you're using it. No, I didn't use with. I didn't use with. Okay. I just take the text from the text box and it will add it. That's it. But, actually, you're right, I could probably use with. So, That's a good question, right? Yeah. If you change that function to var4 equal to function, it becomes slightly different. It doesn't come to you. What will be the way you're now? Right. And probably ask the audience what you're going to answer. All right. So, I say var4 equals function block, right? Why are there so many explanations? It doesn't tell me what it is. Right. So, var4 equals function and some code, right? And I'm calling it. So, what do you think is going to happen here? Sorry? Anonymous function. Error, you mean? You get an error. It's not an error. Let's just run it. Because who is the answer? Who is not a function? There's a difference between function declaration and function expression. It's not a function itself, it's not assigned to it until you reach that. Let me change this slightly. So, I just say var, right? What do you think will come now? And this, I don't think I'll get different answers. var is undefined. Yeah, I would say var is undefined. Let's just run this and see what error we get. It says var is not defined. You will know that for who, we'd not get that error. For who, what we get is who is not a function? So, who is something else? Right? In case of var, it says it's not defined. I mean, I don't even know what you're talking about. Go declare it first. That's what it's telling us. Whereas with who, it's saying hold on a second, who is not a function. Don't try to call it like a function. Which implicitly means that it's something else. Right? So, what I'm getting at is that there is this concept called as variable hosting in JavaScript. Which basically enables this functionality where you can declare something later on and then you can use it before it actually... I mean, the runtime basically parses your code and defines all your declarations and then it runs your code. Right? So, what is happening here is, in fact, to demonstrate this I'd probably go back to my older example. It would be slightly clearer in that. So, I'll say who here. So, this prints 10, I thought. Okay. I'll call it. So, this prints 10. And let me slightly change this. I mean, going back to that same example. Let me slightly change this and do something like this. I say print of A here. What do you think it will print now? It says 10. Undefined. That's not definitive. It's highly evaluated. Correct. That's the correct answer. Right? In fact, the same thing that we did earlier. I did var, who equals function and then called it before. Right? It's the exact same scenario here. Maybe I'll just say type of A. So, it says it's undefined. What do you think it will happen if I say type of B? That's not undefined. In fact, that's an error. Okay? This is the same scenario. Right? B does not even exist. It's not been defined yet. Therefore, you can't use it. Whereas with A, it doesn't say that. It says it's undefined. So, this code that you're seeing here, the runtime will go ahead and sneakily change it to something like this. So, that's what is actually happening. Right? You declare the variable in your source code inside your if and initialize it to a certain value. Now JavaScript runtime will go take all your declarations from that entire scope, put it all to the top, declare it there and you'll notice that it's only the declarations. The initialization still happens where you declare it. Right? Inside the, I mean A becomes 10 only inside this. Here it's just declared. That's why here you're seeing. I mean this code you can reason about. Right? Now you know why it says undefined. I've just declared the variable. I've not initialized it. Therefore, it's undefined. Whereas, and also you can now say, you know why this happens. Why does it say 10 there? Right? Obviously, it will say 10 because it declared there inside the if. I initialized it to 10. Now it couldn't stand. So, this is what is actually happening under the ground. So, this is under the cover. So, this is called as variable hosting. So, anything that you declare. So, what is the best practice around this? Right? Anybody want to take a guess what the best practice is around this? Just declare the variable. Just declare the variable. So, the best practice is not to do it. Right? Don't declare anything anywhere at the top of the function. Right? So, that's another word if you want to think about it. It's a feature that has become a word. All right. So, in fact, there is another thing that you could do. I have a good point there. Like, if you want to run a piece of code. Right? This typically you do in your web applications. Right? Typically you want to run some piece of code as the page loads. As soon as the page loads, you want some script to run. Right? And typically you want to declare variables. Right? So, how do you do that? So, you know, a lot of times we do something like this. Right? So, we say, so, we'll say, you know, HTML and we'll say script. And then here you go and, you know, write your code, you know, your document. You won't write that there. Right? Maybe you will go and say var a and do something with a. Right? So, this obviously is not good because as soon as you say var a, first of all, this becomes a global. Right? The a becomes available throughout your web application. And that's definitely not good. And secondly, you have these all hoisting issues. So, the better way to do this is to use something called as an immediately invoked function expression. So, do something like this. So, function. Right? Define a function and call it. Now, here you do whatever you have to do. Document. Right? So, what is this, what is the syntax? What will it be? What is the syntax here? So, basically, this piece should be pretty self-evident. Right? I've just defined an anonymous function. Right? And I've encapsulated inside a couple of, you know, brackets. So, that basically the entire expression evaluates to a function. Right? An anonymous function. And then I'm instantly, immediately invoking it. You know, many times in, you know, when you're reading a word in blocks and stuff, people call this as a self-executing function. Right? And that's technically wrong. This is not a self-executing function. As in the function, doesn't it execute itself? Right? This is the function which is defined as invoked immediately. Right? We are defining it here and calling it here. It would be self-executing if I did something like, I don't know, arguments.colly.coller. Right? So, if I did that, basically if I recursively call that function, then it's self-executing. It's not self-executing. It's just immediately invoked just a little technicality. So, you know, this basically makes sure that these things don't get leaked into global scope. What do I declare there? And then, of course, for the hoisting issue, declare everything at the top of the mountain. In fact, in ES 6, the next revision of the language, they are trying to, you know, basically, they want to basically do what everybody does. Curly braces being introduced, scoping, available. So, right? That's bad. That's bad? You prefer this? No, no, no. So, there's another keyword being introduced for that. You won't be using value. You'll be using lit for that. Yes. So, it depends. It's quite explicit when you use those words. Yes. So, the good question, again, let's say if I took your last example and moved food to one script block, and have declaration in a script block after that, will the hoisting work across script tags or will it be inside one script tag? Good question. I don't know. I don't know. These things people should know. I know the obvious answer by this thing. What is the answer? I don't know. It doesn't go on the page. So, each script tag into its own script. Yeah. Did everybody get that? All right. So, that's a little that's practically immediately involved. In fact, in many of the libraries, jquery and what not, yeah, you'll find that this kind of code is used a lot. All right. So, I mean, I have a bunch of other talking points. Is there anything else you want to talk about? We have like another five minutes to go. Any questions? I don't think I don't think I don't think I don't think I don't think I don't think I don't think I don't think I don't think it's executed initially and then he gets executed with the ECEONE it's not that some analysis is causing a mistake. So I think that's the reason why even in So when you say it's immediate function, then basically it's just a different terminology, just to distinguish between these two cases. So you're saying the people look different from the question? Exactly. Questions? What are the cases where we would need a global variable if you want somebody able to be having a global scope? What are the cases which were demanded to use global variables? Can you give some examples? Very few people. If you go out of this session believing that never is a global variable, you wouldn't be wrong. But I mean, so JavaScript does not have the concept of modules, right? So you cannot, like for example, Java has packages, C-sharp has namespaces, C++ has namespaces. JavaScript does not have anything of that. So typically you will find that all different frameworks will scope all of the symbols that they introduce into your execution environment inside of global, right? So they'll call it, for example, I'm going to use yahooui library, right? So you'll say yui. I mean, it's a little too obvious, but you'll say yui. That's yui2, yui3 is just y. Correct. So, you know, for example, this is a global. So y here is a global. We include the yahooui library. The entire library is basically, you know, branched off this single global variable. This could be one use case among the very few use cases that global make sense. In fact, there's another what in JavaScript. So if you have some function like this, right? Boo equals 10, I say. Or let's use some variables that I haven't used before. I might have used Boo. Zoo equals one, right? So I call this function here. So zoo, I mean, whatever, the function got called zoo at initialize. Now, what do you think is going to happen if I print zoo here? Anything undefined? See, it says one, right? So what is actually happening here? It's declared into the current scope. We haven't talked about the scope. If we talk about the scope, then we'll know where exactly the variables are. Correct. So here, when I just said zoo equals one, JavaScript doesn't complain. It goes and creates a variable called zoo. And where does it create in the context for this particular function? We haven't talked about context. What if I put this dot zoo equal to one? What if I do this dot zoo equal to one? Well, let's say let's make it 10. I have to distinguish from the folder, for example. So what do you think we'll print here? Yeah, it's exactly the same. It runs 10. Next of that function, when you execute zoo, right? That's going to be the window object. Yes. So the variable hoisting or variable regulation will go on to the current object. So when you call zoo like this, what is this inside zoo? That's a global object. Unless it's ES5. In ES5, it won't be, but otherwise it will be. Or you can explicitly associate a context like that, in which case this will be that object. Anyway, so that's another thing. So you know what? The tricky thing here is this. Let's say you declare zoo, okay, and did this. You see the difference there? In the declaration, the z is capital. When I use it, I use smaller case. No error. Right? So this is the painful part. I guess folks are streaming into the next session. One last question. Can you give us some use case for call and apply? Oh, you want, sorry? Call and apply. Call and apply method. You want to know the difference? No, I just want to know in what case we are, at least in the main user. Okay, so typically if you have a function where you want to explicitly specify the context in which that particular function is going to be called, you will use call, right? And this is the first parameter of the context. Second parameter is the function. When you say apply, it's exactly the same thing. First parameter is the context. And second parameter is basically the adding. I mean, basically the idea is if you have some function which you want to invoke, where the parameters that you want to pass to that function is dynamically constructed. Maybe you're making an Ajax code, you're getting the data back, and now you want to pass this function, and these functions have to be passed as parameters. There's no way you can do that unless you use eval, where you dynamically construct your script and call that function, which is, as you know, even. So what is the correct way to do it? You basically populate an array with all the parameters called apply, and basically the runtime will take care of unpacking this array and calling the function passing the parameter. So another use case would be applying array prototype methods on array-like objects like nodalists and all. So there are array-like object-like argument nodalists which don't have all the array methods like sort and filter and all. You can say array.wordtype.filter and you can get the object itself which is like an array, and it will apply that method. Taking this to you. Okay, thank you. Very good.