 So for those of you who do not know me, do not know me, a lot of fresh new faces. My name is An. I used to be a developer here as well. And now I'm working at a high frequency trade. So there a lot of my work requires me to work with JavaScript. So we need a lot of Angular to build into faces for trades. So, right now, I'll just repeat and let you guys know what I'm going to talk about. It's more about trying to understand some of the pitfalls that JavaScript might put you through if you do not understand the language in depth. And then it will most likely help you in writing code better when you're working with JavaScript. So let's go to the first part. Functions and scope. I'm sure most of the developers, all developers will understand what is function and what is scope, right? Function is a method that you would invoke. And scope is the environment where this code is being run and what are the variables and what is to speak. In Ruby, you have lock scoping. So within the two brackets, anything within that would be scope. JavaScript is functionally scope. I'll show you right now. Let's go and see how it looks like. So, when we talk about scoping, what you can see is that here I have a code that most likely will resemble something that you guys would do. Let's say I have an F bar and its initial color is blue. And I want to change the color to whatever color when I update it, to green or whatever. So I create a function. As you can see there. Okay, sure, sure. You see? Okay, so you have an F bar. Wait, let me just minimise this so that we can even see the console. Ah, okay. So we have an F bar, initial color, we set it to blue, right? And we have functions. So when I say it's functionally scope, right? Within this function, everything has its own scope. Okay? So, now I set the color as pink. Yeah? And then I will log it and I'll say tell me what the color is. Next, I have a function in here. Within that function. So that's interesting because functions are first class objects in JavaScript. So you can create function in functions. And then I will call the function to change my net bar color to green. Okay? And then I will ask it to log it out. But then I will step out on a function and then I will say I will call this function, this whole thing. I'll step out and then I'll say tell me what the net bar color is. Okay? So let's see what it gives you and then we can try to understand what's happening here. So first, when this happened, I said the color is pink. Okay? And then I ran update and I asked for the color again and they told me the color is green. But when I step out of the function and I asked it once its color it will tell me it's blue. So as you can see it's functionally scope. Yeah? So that's one. JavaScript objects are functionally scope. They are not block scope like we used to. That would be your biggest big fall. You will realize it when you try and write code. Okay? But the thing is right the scope only goes downwards. It does not go upwards. Meaning if I am the parent function I tell the child I declare an object. I say net bar. Right? My children can see but my parents will not be able to see. So for example now the child is saying oh, net bar color is pink. And then I come outside of the function and I say hey what's the color? Right? What's going to happen? It's going to tell me an error and say I cannot find it. So the parents will not know. Right? Only the child will know. But then there's this other very interesting twist to JavaScript and that is most likely the being of a lot of people. The... Just give me a second. Ya, okay. Global objects. What happens, right? Is that see how I didn't put var net bar color? I just did this. The moment I declare a variable like this, right? It becomes a global. Meaning if I were to clear this and then I would just step outside the function and ask what's the color? It will tell me it's pink. Right? This is one thing you don't want to do. Never do this because the moment you do this or anybody else who writes a library, right? They accidentally do something like this. They are modifying your state. And then you'll be like, eh, what's happening? Why is it wrong? It's very hard to find out what's happening. Ya? So that's why coming back to the slides you need to understand that JavaScript is very functionally scope. Whenever you want to write a variable try and put it in a function and leave it in there. Don't let it bleed out here and there. Okay? So the next one was declaring variables without a var will create globals. Globals are a bad thing. Period. Anywhere. Ya? Okay. Now next here's one interesting fact and then we'll move to the next slide. What if I were to say give me the color now? What do you think will happen? Okay, you can see what's happening, right? It's throwing you an undefined. Ya? Now. Let's try. Let's run again. Okay, ya. It's throwing you an undefined. Yes? But earlier on when I talked about outward scoping, right? You saw that it threw you an error. It said that never color is not defined. This is a completely different error. Right? It's not gonna... It... Basically what's happening here, right? Is that in JavaScript there's this concept of hoisting. How many of you know what hoisting is? Okay. In hoisting, right? It means basically let me show you what it looks like. Let's do this. Let's say you were to do this in Rails, right? You think the function who would be able to run would be able to find it? If I run it first and then I declare it it happens, right? What happens in JavaScript is the same thing. You can always call the function first and then declare it later. What JavaScript does if you're to go to online websites, right? Some sites will tell you that they bring that function up to the top, the declaration to the top. That's not the case. The code stays where it is. It's just that the compiler will allocate memory for that function and say, okay, this function I give you some memory. So when you call it, right? Like upstairs here it's able to find it and then execute whatever the code is, okay? So that's what hoisting is. So it's the same thing for variables, right? If let's say I have this variable here I have my var. I'm initialising it. I'm not declared. And I'm asking it to console log my var and then I will declare. But it's still able to find it. Why? Because of hoisting. But here is the trip wire. Okay? When you declare JavaScript compiler will hoist it for you. But when you initialise it up it won't hoist it for you. Let me show you what the difference is between declaration and initialisation. Okay? What you see here this is an initialisation. I'm saying this object has this state. So I'm initialising. Okay? This is a declaration. I'm saying this object exists. The moment I put them together, right? And I say create an object and give it this state. JavaScript won't be able to hoist it for you. And then he will throw you an error. To cover up all of this because it's... So you can't you can't find it for you. Right? As compared to the earlier one the value. So the issue here right is that if you do something like this then you won't you won't be able to hoist it and then you will have this errors. You'll be like eh I declare it but it's not being found. Why is this so? And then you look up and you're like I did the same thing you know I'm declaring but then there's this distinction that you might not be aware of. Right? What a declaration is and what an initialisation is. So you need to be very careful around things like this. Okay? And it's the same thing for functions. Right? I did the same thing and I called the function first and then I initialised it and declared it at the same time it will throw me an error and say hey I cannot find it. Why? It just cannot hoist it. So that is the other pitfall. These are some of the things that I faced initially right? Now I'll get errors like this and I'll be like what's happening? Why can't I get it to work? Where in the other case it almost looks similar but there are small nuances here and there that you might not be aware of. This is one of them. Ya? Next. So we talked about hoisting. We talked about functional scoping. The next one that I want to talk about is passing a variable. This is another trip wider that we will face quite regularly. When someone asks you in JavaScript is it passed by value? Y'all know what passed by value is right? Yes, anybody knows what it means and doesn't know what it means? It's okay to say you don't. Okay. So when you talk about passing or variables in any sort of computing in any sort of code you will tell hey, take this object and then do this and then put in a function and you do this. So you're passing the variables the value. There are two ways to do it. One is you just pass the whole thing and you say here is that thing I give it to you and then you modify it how you want. At the end of the day you will modify that value but the other way is to say like in computing you will have pointers and you will say here is the reference to that object you go and modify it. Okay. One is a copy one is the exact object I'm just telling you hey, you have access to it. Okay. So in JavaScript everything is passed by value. Some people might come and tell you no, objects are passed by reference but values are passed by value. Right. That's not the case. Everything is passed by value. It's just that in JavaScript you have a concept of passed by a reference value. So what I'm saying is this let's say I have two boxes and I put things in there if that thing it's a primitive your strings your integers or your numbers in this case then what's going to happen is when I pass it I will say here is the whole box I'll give you the whole box you can change it I'll give you a copy of that box like me so I'll say okay what's in this box okay, let me create one and I pass it to you and you change In the other way for objects I would say that is where the box is but if you change it if you overwrite it you won't change what's inside you will change the reference that I told you how to get to that box Am I clear? or is it a bit confusing? I can retry it again. So passed by value is saying for example I can show you now it's easier to see when you see the code for example passing okay here we go same an actual example I have a function that changes a job of a person I pass it to the person and I say you change the person's job to the person right then I create my object and I say sunny current job is a clown and then I run the function first I will log I will say what is my current job then again I will change my job and I will log what is my new job okay so let's try and run you can see I changed the object that I am I've changed my properties right now you would seem as if what you would see as is oh I have this object and then I pass it to this function and this function of modify the original object that is correct but I am not actually passing you the object I am telling you that this is the address of the object you can go to the address and you can modify it I am only passing you the address okay which means if I want to go and do this right you can see I am still the same I have not been modified why because I changed what the value of the address was not the actual object do you see anybody don't see see this for some people for me initially I knew that it would seem as if I am changing the object but why is it not going to full right why is it not behaving that way because I didn't understand this concept right I am only changing the address not changing the object okay so let's do that let's pass by value reference then there is this one where it's pass by value now pass by value is very easy to understand I pass you something you just change what it is for example now I have changed job too but then I am a bit more smarter about things I say why do I want even pass the whole person or object I just pass the job and I change the job right then that's where you might trick because I have job here I am changing job to cowboy I create the object can I give him a property called job right I get his current job so let's clear this up and then that's right I get his current job right I change this job but then when I come when I come back and I try to log in I still see the same thing then you are like if but I changed it and that's where it's a little different in the sense that it's passed by value I am just changing what he is looking at that's all okay so do you do you see the nuances of this right it's very subtle in that sense right but when you play around with it you would get a better grasp of it when you pass objects you can modify but whatever the variable is that you pass if you change it then it just changes locally to that function because of that scope okay and it won't bleed out and modify the outside guy ya cool so that's the next one that usually causes people to check so when you face issues like this you want to see what are you passing are you passing the object are you modifying the property of the object or are you overwriting the object those are the questions that you need to ask yourself ah when you see issues like that ya then the next one this is the last one this is the easiest ah there are 3D values and 4D values okay everything is 3D except for this 5 now we can look at what it means right in code it's easier it's a bit messy but it gets the you don't need to look at this because this is more complex ah you just need to see this it's an English okay when I pass false it's coerced into false meaning this is a falsely value I can run boolean operators on it I can say if false then I can do whatever I need to is it loosely equal to false yes obviously it is false right so that's fine but the next few the ones that are a bit tricky things like zero it's coerced into false right is it loosely equal to false yes this is where in companies like us we have tripwires like this because zero can be a price if there is a price then I want to do something about it but here you would say there is no price because it's a falsely value so then these are small tripwires that you might not have seen so this is where you would see things like oh okay I need to make sure that I need to check whether it's zero or not ya the next one empty string empty string is also coerced into false right is it loosely equal to false yes so that means if you had an object and it changed you empty the object's name for example then you might have an issue with it because you would say oh I do not see a name right so you need to think about it in that manner you need to check what the actual value is and you need to understand what if it's a truly or a falsely value and things like undefined it's false is it loosely equal to false? no this is very interesting why? because undefined means it's not there but if I were to try and double equal it into a false for example here you would tell me no it's not so I have to be very wary of this right just because it's undefined doesn't mean it's not there okay so be careful about this the next one is also the same no it's coerce in the false is it loosely equal to false? no so ya it's very very odd in that sense so usually what you want to do things when you talk about coerce thing you are talking about is it a falsely value you can use that if you were to say things like false equal equals to now then no it will tell you no it's not because these are two different objects these are two different types all is a boolean now is a now object it's an object so it won't allow you to do this okay very interesting NAN you know what NAN is? not a number not a number so NAN is it coerce in the false? yes right is it loosely equal to false? no so these are some of the truthiness trip wires and it's only true like doing this a few times and tripping away a few times you will understand the nuances of it all and that's why I did this because to me is if you can get over this initial hump or not understanding why is it behaving so erotically ah then you will try and pick it up a lot more and you will want to work on it a lot more ya so ya so that's about it for me NAN ah if you have any questions you can let me know and then I can try and talk to you guys so you can understand me yes how about using the triple equal? if you use triple equal that's a strict equality check right it will still close right it will still be a false from what I understand yeah so what I was doing here I was doing a loose check right usually you will do things like this the triple is type ya it's type because it checks what type the type is yes double is not but the thing is that if you were if I were to expand this right and I would just look at any one if I were to run I would pass it into a boolean and then try to cast it right it would tell me it's not it's a false value so usually when you want to use things like this you would go and do stuff like example wanted to console a lot something let's try var equals to now so so usually initially I used to do this back then I was a bit dumb but we all learn and I'll be like why is it not running why is it not working I mean it's supposed to behave and show me something if it's not then it should throw me an error or something it's not so the easiest way for you to do right is to do this just to say let's see what's happening under console so now it behaves the way I want it to behave so for example console so yeah so initially this was the issue I didn't see so let's try I say that A is not equals to false I console a lot hello if it's now I will assume it to be false but then it does not behave the way I want it to be the other very different case scenario that you come across but they are along this lines where I assume it to be false but it's not right so what you need to do is to check for the object itself and then check the truthiness of it so when you do if things like this right you will try and cast it into a boolean like that okay so yeah that is all so I hope that answers your questions right in scenarios where in actual work you need to go and check for a value try and do this instead of checking it against a false or a truth yeah any other questions how it's been so you initialize maybe you use it and then you declare it right yes what if you don't declare it would it matter yeah so let's try let's see what happens because the thing is right it's only declaration that is faster so so you're saying that this is what I want to do right A equals to hello yes correct and then console log this is because it's global so it's accessible right so that's why it's working now if you put it in function pass A and then you tell it you see it would work but the thing is this is dangerous because it's a global you get me okay remember how I said that if you declare without the bar it turns this into a global oh so it's accessible outside the function yes right and that's why it's printing which means that so you can console that log A outside the function you can and it will print the hello this because of the fact so this are like you know it's a series of these things right that will make you trip and fall um throwing arrows okay let's try now let's see what it throws okay so first it shows you the console log A but if I remove this then I run it again like this like this A is not a fact so it's kind of hoisted outside the function no this won't hoisted outside the function when when you see you are declaring it inside right you are effectively creating a global object anywhere that for example let me show you in the global variables you see I did not so what this does is that it declares it as a global anybody can access it creates and then it declares it as a global object and then anybody can access so that's why you can still find that object but if let's say you were to say for example inside scoping right let's see ah papa is here I have to remove this then you would get undefined okay you were asking whether if I do not do this can it can it be console the world right if I do not do the yeah let's see ah let's try I didn't try that yet so so you run update you will still see largely because this is a global now right now if I move it out because it's a global you can still see right so the thing is that if you were to look at hoisting here and you want to ask ah let me just the difference is this okay where I do this you see now it throws you an error because I am calling for the function I have initialized that function but I have not declared it so the position is the one that so now I get it okay so the difference between this and the other one okay so this is what you see now ah I have full 3 I am calling for that I am asking you to lock that object and then I am initializing and in that case it does not throws me an error correct whereas in the other one I have already I already initialized it not declared yes I've already initialized it and I tried looking for it so you will be able to find as a global right so if I were to bring this up on top of this guy then you would get your your error yeah the last one so yeah so this are some of the that's why you would trip a lot on this but if you play around with it you will be able to figure out some of these things yeah any any more so if you initialize at the top you will not have any issue yeah that's usually recommended so for guys like us when we work right we would say initialize everything at the top because then I have a picture of the objects in this function and it's okay to initialize our function it is okay to initialize R of this function question is are you initializing up here in the global if it's here I would say no because now anybody because this this guy in the scope of the global right anybody can go and modify this value here but if you are to ask me in cases like this I have a parent and then I have a child function then it's okay to bring it to leave it outside first if you need it outside somewhere here outside of this child but if not bring it in there and then you declare it in there so that you it's a that's this principle basically you only expose things to guys who need to see right so if let's say never color only needed to be run in update then you will declare it in here you do not declare it outside yeah any question jero about hoisting and functional scoping and passing of variables and prudiness but at least the first part you were like yeah so this is how you do it yeah so these are some of the people hopefully it helps you guys let me know if you have been right and use copen copen is the easiest place to play with thanks