 let's continue in this eighth part of JavaScript. Now we go into things that are the source of many errors in JavaScript. So it's really important to understand them. And part of that is really why JavaScript has such a bad reputation because it does have the reputation that it does things that are not intuitive, not logical. But it helps to simply try to understand the concepts that I'll discuss. And that way you understand a bit more what JavaScript actually does in the background. And mainly these relate to type conversion, so conversion between variable types, comparators, so how to compare one value to another. The scope within JavaScript that is a bit different from many programming languages. And a concept that is called hoisting in JavaScript. And we'll go through them on the next six slides. So JavaScript, as I've discussed, has four different primitive types and two complex types. And it changes them. So as you see in this example, we have set test is of type string. And on the next line, we assign two numbers to it, x plus y. So the result is 11. And the type changes. So it changes from string to number. This is also something I've already demonstrated in the previous recording. But it does something else. And that's figuring out how the conversion works. Because if we take the example x plus y, those are two numbers. What happens if we add a string to that? So one thing I've discussed types are dynamic, they can change. But what I'm now discussing is how to convert those things. And well, type of m, the resulting thing here is string. And this is I take a number, add a number, add a string, the result is string. And the way JavaScript does this is it goes from the left to the right. So it starts by saying x plus y, it's two numbers. So it does a regular mathematical addition, which means five plus six is 11. The resulting type of 11 is number. So that's exactly what I had up here. Set would be 11 of type number. But now I have 11 plus some text, a string. And what JavaScript does then is that it actually converts my number, my 11 to a string. And it adds the five. And a plus for string is concatenation. So it adds the string to the end of the other string, meaning the result is 115. And this is highly unintuitive, I would say, because five plus six is still a mathematical addition. But then 11 plus five becomes a string concatenation. So 11 has a five added to the end of it. So I use two different kinds of additions in a way, two different kinds of operators, but I do not get an error here. And the other thing is, of course, if this would be mathematical, you could turn the operands around. So text plus x plus y should be the same result. And this is of course not the case in JavaScript. So if I would turn this around, if I would move text to the beginning, I would have a string plus a number. So it would do the same thing it did before. It would convert my number to a string, and it would do five and add five to the end of it. So text plus x would be 55 as a string. And then I would get 55 plus six. Again, it would convert my six to a string and add it to the back. So the result, if I moved the text to the front would actually be 556 as a string. Let's show this to show you that I'm not lying. We use the same variables and the same values so that you don't get too confused. So I have a variable x, a variable y, and I have a variable text, which has a string. And if I now say m is x plus y plus text, and I log this, then you will see that m is 115 and of type string. And if we do the same the other way around, so if I, as I said earlier, if I say text plus x plus y, you get a different result for the value not for the string. So 115 of type string or 556 of type string. The only change is that I moved the text to the front of the addition. So here the mathematical rules do not count. I cannot just switch the operands around but JavaScript does different things. And that has to do with this conversion from left to right that I actually start here and so on. Now comparison is similarly interesting. What happens if I have two variables that have that seem to be similar? I have a five as a number and I have a five as a string. What happens if I compare them? So you use the double equals as another programming languages. Would the result be true or false? And by intuition you would probably say this should be false because they are after all different. What actually happens is that this is true because similar to the addition before JavaScript looks at the two operands and realizes they are of different type. So the first thing it does is it converts the type and it does it in the same way as before. It takes the number converts it to a string meaning suddenly X has string five and Y has also string five and the result is of course that they are equal. So the equals only compares the value and it performs a type conversion before. And this is again something that most people would not expect. As in other languages you have the inequality operator as well. The exclamation mark equals and it does the same thing. It would first convert the type then compare the value. If you want to compare both you would use the triple equals that exists in JavaScript and this then does the type comparison as well. So here what happens is that first JavaScript looks at are they the same type? If they are not then it's automatically false. If they are of the same type then it compares the value. So in a way this is similar to writing to comparing two variables and their type. So you could you can imagine that triple equals is more or less the same as saying if type of X equals type of Y and X equals Y. So this is more or less the same as the triple equals. It compares both types then it does a value comparison. This is important to note and a typical recommendation in this context is use the triple equals. Because as I said this can be a source of error that you are not aware of this problem and you simply compare things the way that you don't want to compare. So use the triple equals unless you really absolutely need the double equals. And typically you do not because you can also do the type conversion yourself if you do not want to compare the type. But this way if someone reads your code and sees the triple equals he or she knows that there won't be any misunderstandings with type and value comparison. So it's good to do that. Another source of errors or misunderstandings in JavaScript is the scope. A lot of other programming languages have the block scope. So basically if I have something in an if statement it means that the variable is only valid within here it's local. In JavaScript this does not work quite the same way. JavaScript only knows global and local scope nothing else. From ES6 this is different we'll get there in a second. But if we look at the following here here we define a variable just in our script and this means this variable is global. I have access to that variable everywhere. I can access it here. I can access it in the function I can access it in my if and so on. Here I have a function and if I define something in my function it's local to the function that's the local or function scope. So license plate I cannot access outside of the function not down here or in the if. However as I said the regular block scope does not exist. So if I define var temp down here I can actually access it outside of the if. So it's accessible after I have declared it and actually also before and that's something we'll get to later. But this is not a local variable in my if statement which is in contrast to many other programming languages. So this is global scope. This is function scope only valid in the function. Here we have a global scope as well so the if block does not count and actually we have a fourth thing here which I'll come to later. This variable here also has a global scope and this is more a source of error than a misunderstanding but I'll discuss that a bit later. Let's have a look at this first. So if I define a global variable x my glob has a value five. You can see that I can log this in different areas. I can have within an if statement here I just write true so it gets executed in any case. You'll see that it works here and also if I have a function my func then also within there I can access this variable. This should not surprise you because this is the same. It works everywhere. Now it only gets printed twice because I never execute my function so let's change that and now we have three outputs. So these are global variables similar to other programming languages. If I move my variable into the if statement you will see that of course it's accessible in the if statement but it's also accessible outside of the if statement and it's also accessible in my function. So again I should get three fives same here so it's basically not becoming local just by these things. However if I move this to my function and I try to log it outside then this will not work. This output will still work because it's of course within the function but here I don't have access to the variable that's in my function scope. So you see five that's the output from my function but then it reference errors it tells me my glob is not defined. So this variable has local function scope. Now one thing I mentioned was this little problem here I write x equals six and note that I don't have the var statement here I just do x is six and now I try to access this. I can of course log it here and I can also log it afterwards and we'll see what happens. And now you see that I have two outputs I have this output but I also have this output and remember before when I tried to print my glob it said reference error here it does not say that. Just to show you if I add var then suddenly I get my error again and this is called an implicit global which is a bit dangerous it's again a source of error. The reason is I've forgotten my var statement and what JavaScript does it adds it implicitly and it doesn't add it here but it implicitly adds it as a global variable so it's similar to writing var x and then accessing it in the function. So this is something JavaScript does by default and this of course can lead to errors again because suddenly I have a variable that is accessible outside my function even though I did not want that. There are several tools that check for this that this does not happen one thing is the strict mode which we'll get to later but note that typically these implicit global variables are not intended so you should not do this on purpose. Now I mentioned that ES6 has block scope and a block generally in JavaScript is everything that has curly braces around so a function is a block and if statement is a block loop is a block and so on and ES6 introduced two keywords that allow you to declare variables that have only block scope so remember the var if I do this then I can access my variable temp outside of the if but I can also use a let or const and then suddenly I cannot access them so suddenly they are local within my if. So if you look if I log these three variables the first one will work without problem because this one is a global variable but the other two are having block scope so this will log undefined and the difference between let and const is simply that let is similar to var it defines a variable versus const defines a variable that you cannot redefine reassign so it's it's in a way like a constant let's show this again I'll just copy this code and of course this should maybe be true so it's executed in this context so I have my three variables and then I log them and you'll see that it logs 42 that's the variable of this but let's change the values that you actually see which one comes out and I'm sorry but of course it does not log undefined for temp2 but it actually reference errors because it doesn't have a reference to it so that's a mistake in the slides it does not have access to it it does not know what temp2 is so it gives you a reference error if I remove this output it will reference error here instead so now we get temp3 is not defined and to show you what const does if I try to change this it should also not allow this or it should not work rather JavaScript allows most things so you see it's not an error but it will tell me type error I cannot assign something to a const so this is what those new two keywords mean so they they're quite good you can avoid a lot of the problems with global variables there are different styles of doing that but if you use lat and const you don't have to think so much about it so you automatically know okay it's only valid within here so it's it's a good new addition in the year six and the final concept I'll discuss that is a source of errors is hoisting and consider the following output here I start by logging x and now I have not anywhere defined x yet right you see down here is my definition var x if I would skip this statement then you still have the x is five and as I've just shown you this would make a global variable but anyway at this point in time there is no definition of x so this again should give me reference error because x does not exist now as you've seen if I do x equals five this will work and it will create a new global variable so the second log statement should give me five now the question is what happens here because I've already implicitly created x here what if I create it again and then the rest should probably work so in any case the variable exists at this point I can assign seven to it I can log it let's try this and you already of course here in the slides see what will come now the interesting thing is it works I don't get any error and it logs maybe not completely intuitive but at least understandable the first log gives me undefined so it does not give me a reference error it just tells me well x has not yet been defined but it knows what x is now the second one logs five I've assigned five it logs five it does not complain about my var x here and it doesn't matter that there is any statement around it I can remove it it will do the same so it does not complain about this statement it adds seven to it it logs seven so undefined five seven instead of reference error and then maybe some other behavior so this is what the output is and the reason is hoisting so hoisting means that javascript takes variable declarations so whenever I say var x and it moves them to the top of the scope in this case we're in the global scope so it moves it all the way up so if we look at this this is my code and what hoisting does let's add my if statement just to have it the same as on the slides what hoisting does it it takes the declarations var x and moves them to the top so this is what hoisting does and now it doesn't look so bad right the if statement doesn't do anything okay but I have my declaration I can of course print this it I haven't assigned any value so it's undefined then I assign five I print five I assign seven I print seven so this explains the behavior and this is what hoisting is it takes declarations and moves them to the top if I have an assignment a direct declaration with assignments so if I do seven here it does not take the entire thing and move it up there it only takes the declaration so again we can print this and the result is still undefined five seven so what what it does it takes only the declaration hoists it and here it changes it to x equals to seven so this is the meaning of it this is called hoisting very confusing to a lot of people and especially if you combine this with with the lack of block scope so you see here my variable is within the block still this is a global declaration so it's moved to the very top if I have the same in a function so let's say I have I have some code here it doesn't matter lots of JavaScript at some point I have a function test and now I have all of this code in here hoisting moves it to the top of the scope in this case we're in the function so we have function scope so var x is not moved up here but it's moved to the top of the function so this is the result of hoisting and this happens at runtime so you don't see it but be sure that it happens and you have seen the output so it somehow indicates that this is exactly what happens so this is hoisting important to know now one last thing that I would mention here is the strict mode the strict mode is something that was introduced in es5 that forces a number of things it basically causes the browser to give you errors in case you do certain things and that's mainly meant to avoid errors of course and one two of the things we have not used here so for example deleting variables is not allowed which otherwise is you can otherwise use keywords as variable names which is strange but one thing we've seen are the implicit global variables if you use the strict mode this will give you an error so if we do as we did before I have a function test in there I want to have a variable but I forget my five and you remember I can do console log x and this will work without problems this is how it was before five I can print my variable x even though I'm not in the function and as I said this is an error usually now if I use the strict mode I just add a string at the very top saying use strict and now what happens is the browser complains so the browser now says I'm trying to assign a value to x but you have not declared x so this is an error so the strict mode can help with realizing that you have these mistakes one important thing is that hoisting still works so this is not a problem if I say x is five and then only declare x afterwards remember that javascript moves x to the top and this is still fine in strict mode so hoisting still works this does not give me any problems even though the declaration is after the assignment okay and this concludes the bit more advanced concepts now the next thing I'll look into is colbex