JavaScript Crash Course: Full Beginner Tutorial

What is going on guys? Welcome back. Today we're going to do a full crash course on JavaScript which is the web scripting language. Everybody knows it. It's used in every front end. It's used even in some backends. And what I want to do today is specifically focus on the language. Not in the context of embedding it in HTML for animations, but on the language itself. So on the basic stuff like how to print stuff, how to use variables, what data types are there, what operators do we have, functions, loops, everything about the JavaScript language on a beginner level. And in the end, we're also going to take a look at how to embed it. But the focus should be on JavaScript as a programming language, not primarily as an animation language. Now, if you like this video, let me know by hitting a like button and subscribing. But now, let us get right into it. — All right. So, we're going to do a crash course on JavaScript today. I think JavaScript is probably the most important second language to learn. Whatever your first language is, be that Python, Rust, C, whatever you're using. JavaScript is probably the most important secondary language because it's used everywhere in the front end and also in a lot of backends scenarios in general. A lot of examples are usually in JavaScript, I would say that Python and JavaScript are usually the beginner level languages everybody knows. So not knowing JavaScript can really be a problem. So yeah, even if you're not a fan of front end and JavaScript, I think you should know it. And in this video today, I want to teach it as quickly as possible, as simply as possible. And we're going to focus, as I mentioned in the introduction, on the language itself, not on using it as an animation language in the browser, but we're going to run the scripts with note. So that brings me to the first point. You need to get Node. js onto your system. Whatever your system is on Windows, there's an installer. Probably on Arch Linux, you use the package called Node. js. Whatever you have to do to get Node onto your system, do that. Then we're going to open up a terminal and we're going to navigate to a directory. You also can use VS Code, whatever you want to use as an editor here. just create a workspace. In my case, that's going to be the tutorial directory. And in here, now we're going to just start writing JavaScript files and executing them. So, let me go into full screen. And the very first thing

that we want to do here, very, very simple, is a hello world. How do we do a hello world in JavaScript? Let's start a file called main. js. And in here, we're going to write console. log. hello world. And optionally, you can use a semicolon. It's not required. And then in order to run this, we just have to say note main. js. This is how you print stuff in JavaScript. The second thing

you usually learn when you learn a language is how to define variables, how to work with variables. For this, let's go back into main. js. Let's remove the console log. And let's say I want to define a variable A that is equal to 10, an integer, and a variable B that is equal to 20, another integer. Um in this case what I would do in JavaScript is I would say let this is the keyword that we use to define variables. Let A equal to 10. Let B equal to 20. And then we can just say console log. We can lock A and we can also lock B like this again. Go out note main JS. There you go. 10 20. Now we can also take a brief look at one of the operators that we're going to talk about next. But we have for example a plus b. That would be addition. So if I say 10 + 20 and of course I have to run this with note that is going to equal 30. So quite straightforward and simple. Now the thing is there's also another way to define variables and you need to know the difference. Another way to define a variable would be to say var or ver for variable. So var c would be equal to 30 for example. And I could also go and say console log c. So what's the difference between var and let? If I run this you will see that basically the effect is the same. I have a number defined. I can use it as a variable here. The difference is the scope. Now variable here or var is used on a global level. So it has global scope whereas let has the block scope. So the easiest way to see what happens here is to define let a equals 10 and then var bals 20. To do that inside of a scope using curly brackets. So to say this is defined in this block here. and to then try to print the variables or the values of the variables outside of this block. So if I say console lock A and then also console lock B, one of them will work, not work and probably in this case both will not work because I uh type the one that will not work first. So the other one doesn't even execute. But if I change the order, if I say lock B first and A second, you're going to see that I do get 20. So the variable the var actually works because it has global scope. let does not work because it doesn't know that a exists because a is only defined on the block level. Now another thing that's different is that with var we can use the value or the variable before actually initializing it or before assigning a value to it. So what I can do here is I can say that I have a variable var C. Let's say it's 30. And I can go up there before it's defined and I can say console lock C. This is possible and it's called hoisting and initializing. So if I run this uh we still get the error from the previous one but here you can see I get undefined because basically it knows that C exists but C doesn't have a value yet. So we don't have 30 as the value here but I can still work with it. Whereas if I say that this is let C and not vary C then this will give me immediately a reference error because it cannot access C before initialization. So what this means is that var also initializes the variable whereas let does not do that. And another effect that this has in the case of var is that I can define var c and I can set a value before that. So I can say c is equal to 100 for example. Then I can do console lock c down here and you will see it works because that is not a problem since we have hoisting and initialization. Um, and we can also try to put it here and you will see that this also works because it just reorders the statements. So that's fine. It does not work with let though. If I say let's see, this is not a possibility. Also, there's some interesting mechanics with let that can be confusing. JavaScript in general can be a very confusing language. So let's go in here again. Let's delete all of this. If I say that a has a value 10 and then I have a certain block. Let's say in this block what I do is I do a console lock. So console lock a that is possible. Now when I run this you will see I get 10. That is not a problem. But if I add now a let statement. So if I add let a above that. So if I say let a is 20 then what we're going to see is that the value is overridden. So now I have 20 not 10. This is expected. But what you will see is that if I define let after the console lock, you're going to see some odd behavior because now what happens is it overwrites the let a from outside of the block. So we do have hoisting. This is moved up uh above the console log but not initialized yet. So this is going to lead to a reference error even though it would work with a 10 but it doesn't work because now we're overwriting it but we're not initializing it. So if I run this you will see reference error. But yeah, so we're getting quite deep into JavaScript already. The only thing that you really need to know is that you can define variables like this. Let A equals something. This something cannot just be uh the integer. It can also be something else. So I can say that B is a string. Hello. We're going to talk about data types here in a second. You can do the same thing with var which is uh global. It has global scope. And this is the thing that you need to know as a beginner. If you want to understand hoisting and everything, you can look into this deeper. Just keep in mind that let and var behave in different ways. Now there's also a third keyword called const for constant. Basically making it immutable. So if I say a is equal to 10 and then I can uh console lock a. What I can not do then is say a is 20. I cannot change the value because it's a constant not a variable. So that is important. In this case it says assignment constant variable type error doesn't work. All

right. So next let us talk about data types. we can easily check what data type something has if we just use the type of off keyword. So in JavaScript as in Python, we don't have to really specify. I don't have to say something like let integer a or something. I can just say let a equal something and then this something has a data type. So it's dynamically typed. Um and we can see what data type that is by saying console log and then type of a or you can also use the value directly. So we can do that and I can say note main. js and you will see this is a number. We don't even have an integer. We just have a number. So let's try to do this directly with 10. This will also lead to number. So you see this works with a value and with a variable. And the interesting thing is that also the floatingoint number has the same data type. So if I say 10. 456 or something that is a float in most programming languages. Here it's just number as well. So that is important to know. However, there is also a different type of number. And you will see that this is the case if we let's say type a again. And now let's do 1 2 3 4 5 6 7 8 9 0 0. So a very long number. Um and let's also print that number. So if I just lock the value, not just type, I can say note main. js. And you will see that at a certain point, it's just going to lose the accuracy. However, if I go into the code and I add an n afterwards, making it a big integer, now you can see that we actually get the full value here and it's a different data type. This is a big int which is not the same as a number. It has more precision. Then of course we also have the string that we talked about. So if I go and say um that my a is hello world, that will be a string. There you go. String hello world. And we also have booleans like in most other programming languages. True false are the two values that you can assign to a boolean. And by the way, I'm keeping this of course on a beginner level, but also I'm kind of assuming that you know a little bit of programming. So this is maybe not the perfect JavaScript course for people that have never programmed before. So I'm not going to explain uh what a boolean is in a lot of detail. I'm just going to tell you it can be true or false and then take it from there. But uh to some degree I'm making this more for people that come from maybe a Python background wanting to go into JavaScript and wanting to learn JavaScript a little bit. But uh yeah, so this is what we also have the boolean data type which can be true or false used for comparisons and all that. And uh now we can also see a different type. If I go and say that uh a is a var. So var a then I just do it like this. Then you can also see that we have the data type defined and also undefined and um also the value undefined. Cool. And with

all these values now what we can do is we can do operations. We saw that already to some degree. If I say let a is equal to 10 then I can also say let b is equal to 20. And then I can do a bunch of stuff with these values. I can say console log so that we can see the output of the operation. I can say a + b. And of course I can do the exact same thing with subtraction, multiplication, division. So just minus um asterisk for multiplication and slash for division. I can also use the modulo operator to get the remainder of a division. In this case, maybe we should change the values or actually we don't have to change the values, but in this case like uh 10 divided by 20 would give us 10 as a remainder. So let's do that. Um you can just go and run this. then you get all the results. These are basic arithmetic operations. We can also do exponentiation by using two asterisks. So a to the power of b is written like this. And there you go. You have 10 to the^ of 20 which has a bunch of zeros. These are arithmetic operators. Very simple just doing calculations. Then of course we also have stuff like assignment operators. We saw one of them already here. A is equal to 10. This is an assignment operator assigning the right value to the variable on the left side or the constant on the left side. And like in most other languages, we can also combine them with the arithmetic operator. So I can take a plus equal uh to 10. This would take a and basically add 10 to it and store it. So if I say console lock a after this, we're going to see that a has 20 as a value, not 10 anymore because we added 10 and assigned it back to a. And this of course can be done with all these operators. And there's also a shorthand form for doing this with the number one. So if I take uh a for example, let's remove all of this here. Um or actually I want to keep a let a equals 10. I can print a ++. What this basically does is it prints a and then increases it by one. So it prints 10 and then a is 11. We can see that this is the case by printing a immediately afterwards. I can say note main. js JS and you can see 10 11 if I take the plus+ and put it beforehand it has the same effect. So this will still be 11 but it will also be 11 at this point. So it will first increment and then print. That is the difference between a pre-increment and a post uh increment. Same thing can be done with a decrement. So I can say minus or I can say um a or I can say a minus minus. Same idea. either you apply it first and then you print or you print and then applied. And then we have of course also the comparison operators which are going to be important for if statements. If I have let a equals 10 again and I have let b equals 20 then I can do comparisons. I can say okay what is the case? Is it the case that a equals b? So I can say a equals b and this will return a boolean. So this will either be true or false. By the way comments are written with two slashes. So if I want to just write some text here that doesn't have influence or doesn't influence at all the program and the functionality I can do that with two slashes. So this is true or false. Is a equal to b or not? In this case it will be false. I also have a is not equal to b. So exclamation mark equals this is also true or false. In this case that's going to be true. Uh then we have stuff like is a greater than b. Then we have is a less than b smaller than b. Uh I can also say greater than or equal to. I can say less And then we also have something that is uh unique to JavaScript uh which is three equal signs. And this basically means um equal value and equal type. This is a different thing. And of course you can also negate that here. So for example I could go with something like um C is equal to 10 and I can say 10 N. So in this case if I take that if I say A is equal to C and I also do that with two equal signs only we're going to get a different output. So if I run this note main. js you can see true it is the same value but not the same type. So that is false. You can play around with that and see if you understand how these work. And then the final operator um that I want to cover here are logical operators. These basically combine the statement. So for example, I could take something like a is less than b and here we use two amp%s. Um I can say a is less than b but a is also greater than five for example. And in this case the whole statement is true because a is less than b true and logical and a is greater than five also true. So the entire statement is true. Whereas if I say a is also less than five that would be false as a whole statement. And I can also do the same thing with or um one of them is true. So in this case that would also be true. So note main. js true false true. Now then before we move further into functional stuff, let us talk about special values. So we talked about data types, operators and everything, variables. There are some

special types in JavaScript. So let's talk about them. We already saw one of them undefined. So we can say a is equal to undefined. We can also just manually assign that to a value. This is a special value. You saw it happens when we use var and then we access something before it actually was um defined. So now it's undefined. There's also the value of infinity which um yeah basically represents infinity. There's the value of null and not a number a nan. If you know Python, if you work with numpy, you probably know what a nan is. But yeah, we can basically say console log and then type of off a. And we can then copy this and do the same thing for B, C, and D. And you will see when we run this that we get um undefined for undefined but we get number for infinity and also interestingly for not a number but we got object for null. So these are different types. They're not the same type as the value. Only undefined has But the interesting thing is how do we trigger that? How do we actually get these values? We know how to get undefined by just using var. But how do I get infinity for example? Well, one way to get infinity is to divide by zero because JavaScript actually lets you do that, but it gives you infinity. So, if I say 5 / 0, this is going to result in infinity. It's not going to give me a zero division error. It's not going to say crash the program, but it will tell me that this is now infinity. You have to work with it. And of course, you can also get negative infinity by, for example, 5 /0. That would give us negative infinity. Doesn't make a lot of sense maybe, but you can work with it. Now how do I get not a number? That would be something that I can do by taking the square root of -1. I can say math do. Square root and then negative -1. This would be a complex number. This would be i. And in this case this will return nan, not a number. And null is basically whatever you get when something is just missing. empty, you can set it to null or it is null when you read it from somewhere. Uh so these are some special values that you need to know in JavaScript. So now we're going

to move on to if else statements. Now if you know any programming language you know what if else is. If you don't know any programming language the idea is I can have a condition. I can say if that condition is true we want to do something. So the condition could be a is less than b some comparison. It could also be user input is not null or division is does not result in infinity. You can just specify some condition that will result in true or false. And if that is true or if that yeah if that condition is true basically then we're going to enter a block. And then we also have the else statement which is going to allow us to go into a different block if the condition is false. We're going to take a look at that. But before we talk about the if else statement I want to be able to work with user input so that we can interactively explore this. So for this we're going to learn something in addition to if else statements which is how to read user input. And we do that by requiring a package. So I'm going to say here const uh read line is equal to require and we're going to require the package read line and then I'm going to say const rl is equal to readline dotcreate interface we use parentheses and curly brackets and the input is going to be the process standard input std in and the output is going to be the process std out the standard output. which is basically a fancy way of saying that we input stuff in the terminal and we get stuff out into the terminal and now basically we can just go and say RL question then we can type some I don't know enter a number for example could be the prompt for the user and then as a result of this we're going to get an input so we use this uh equal sign and uh angle bracket closing angle bracket to say use this input in the following block so we can also use a semicolon here and then in this block this input will be defined So I can just go ahead and say console lock input to show you that this actually works. This is how we handle user input node main. js. I can say um 1 2 3 it will print 1 2 3. I can say hello. It will print hello because we don't force this to be a number. I can say um 1 2 3 whatever it just does that. By the way, one thing that we didn't cover this is also interesting. Maybe we should uh briefly um briefly discuss this. JavaScript can do a lot of uh very odd stuff. So you can just add anything. I can say console log and I can add ABC to 1 2 3 to true. And what this is going to do is it's going to type cast the way it thinks it should type cast this. So if I say um note main. js now like whatever I enter it doesn't really matter. This is going to just type cast everything into a string and it will work. it will never give you a type error telling you that you cannot use a boolean together with a um number and whatnot in an operation like this. But we actually wanted to take a look at the if else statements here. So let's go ahead and take the input. The first thing we're going to do is we're going to type cast it into a number. So we're going to convert it from the input type to the number type so we can do comparisons and we're not confused by comparing strings with numbers or something. So what I'm going to do is I'm going to use the constructor number which is with a capital N and we're going to feed input into that. And then of course this has to be assigned to something. So we're going to say constant number is equal to number of input. And now we can start a basic if statement. This basically says if this is the case, if the condition here in the parenthesis is met, then enter this block. And the block is uh written like this with curly brackets. And in here I can say for example if the number is not a number. So we talked about the nan special value nan. Now we can check if the number actually was type casted correctly because compared to Python here we don't raise an error if the type casting doesn't work. So if I feed something into this constructor that cannot be typcast into a number for example hello world. This is not going to raise an error. It's just going to give us not a number. So that's not going to break the program but it's going to lead to behavior that maybe you didn't consider. So what we're going to do is we're going to say if number again the same uh class here number with capital n is nan. If that is the case then we want to enter a certain block and of course we need to pass the number here as a parameter. But basically here we can say console log and then please enter a valid number. That would be one thing. Now what I can do is I can say else and else basically means if the condition is not met we're going to go into this block instead. So if this returns true we're going to execute this otherwise whatever we have here. And theoretically you could chain these. You could say if else and so on. You can do nested if statements or you can use something called else if. So if you want to check for multiple conditions you can say okay if the number is not a number then print this message. Otherwise next if statement and now we can say if the number is less than 10 then print this. So I can say here uh console log and then your input or your number is less than 10 and then we can keep going like this. So else if the number is not less than 10 but maybe it is um so if it's not less than 10 let's say it's 20 it could still be less than 30 for example. So number less than 30 then I can copy this here and just change 10 to 30 and same idea and of course I don't have to just do greater than or equal to. Uh I can do if the division by two so I can check if the number is odd by taking the modulo operation whatever and in the end what I want to do is I want to have an else branch which is basically going to be whatever happens if all of these return false. So if the number is actually a number, it's not less than 10, it's not less than 30, then we can say um I can copy the statement here again. Your number is greater than or equal to 30 for example. But the principle is quite simple. We have this um these brackets here, these parentheses and in here we have a condition. And this condition can also be combined again with the and operator with a logical and all that. But basically you have something that returns true or false. If it returns true you execute the block. Otherwise you go to the next one. You check again true false. And if all of them return false you go into else. And in the end what you want to do is you want to close the read line stream. So let's go ahead note main. js and let's input five. In this case it's going to say less than 10. Let's go with 15. Less than 30. Let's go with 30. Greater than or equal to 30. Let's go with 50. And if I type hello world, please enter a valid number. Now

there's also a related statement called the switch case statement. In the first moment, it can look kind of the same thing, but the difference is here we don't have conditions. We have mappings to specific values. So I could say here something like uh the user can answer some input but let's say the input or let's say enter a choice and then we can provide a choice one would be print hello world. So think of this to be a little bit like a menu. Two would be print pi and then three would be exit the script. So exit the script. I have these three choices. Then I can make a choice. I do the same type casting here with the number if I want to do that. And I can also work with the string directly if I want to. And then we use switch which basically all we do with switch is we give it the value. So number value. In this case we use curly brackets and then we define the cases. What can the number be in our switch statement? And one case is that the number is one. In this case now I use a colon here like Python with indentation. In the case one I want to do something. And what I want to do here is I want to do console log hello world. And then important to not jump into the next case. We want to do a break statement here. So this is the syntax we have switch which says this is the variable that we're looking at. And now this value can have or this variable can have specific values. One of them is the case one. In this case if that is the value of number print hello world. Second case would be case two. So console lock and we said we're going to print pi. Uh so just 314159. We're going to keep it at that. And then again a break. And then finally we can say case three. What we want to do in this case is just process. exit close the application. And even though it's probably not necessary, let's go with a break statement here as well. And then we also have a special keyword called default. And this is basically in all other cases you're going to do this. So console lock and we can say invalid choice. So you can see it's quite similar to the if else statement but here we don't actually work with conditions. We work with exact value mappings which also behind the scenes can be more efficient. But basically we just get a variable and we jump to the respective value of that variable. So if I run this now main. js JS I can say one print hello world two print pi three exit the script and if I type hello it will say invalid choice not just because of the type hinting also uh type casting also if I say four invalid choice. All right so next let us

move on to loops. Loops are basically things that run uh in repetition. So we do the same thing over and over again and we do that until a certain condition is met. We have different types of loops that work in different ways, but the most simple one probably is the while loop. While literally says there is a condition similar to the if statement and we have a block afterwards. So I say while something is the case do something. So here we have the code that is going to be executed and here's similar to an if statement we have some expression that returns a boolean true or false. So I could say while some value let's define a value here counter that is equal to zero. While this counter is less than 10, I can say while counter less than 10. What I'm going to do is I'm going to print the value of the counter. Console lock counter. And of course, if I just keep it like this, it's going to go on forever because nothing changes. Counter is always going to stay zero. So I'm going to get an endless stream of zeros. What I want to do is, of course, I want to increment. So I can do that either in its own separate line or we can use the increment operator that we talked about. And if you want to do a pre-increment, you would do 1 2 3 4 5. And with a post increment, you would do 0 1 2 3 and so on. Uh, but that's the basic loop. And what happens in this case now if I say node main. js, you can see 1 2 3 4 5 6 7 8 9 10 is printed into the command line. So that's the simplest loop. There's also a variation of that which is basically the dowhile loop. It's basically the same. The only difference is that you run it at least once. So even if the counter here is 20, so we start with 20 already. So the condition is not met at all. Uh in the classic while loop, you would just not get any output because the condition is not met. It would not even enter the block. However, if I take this condition and I use it afterwards. So I say do and then I say while and I enter the same condition. So counter less than 10. We now have a dowhile loop. So I can run this and I will get 21. So it is going to execute once. It's going to print the value and increment it or increment it and print it uh even though the condition is not met. But you're not going to notice a difference if I start at zero. It's going to be the same as the while loop because the only difference is that it's going to run one time uh guaranteed. Then we have the for loop. And the full loop can be used in different ways. We have the classic for loop that we also know from languages like C, C++, Java. Uh which maybe if you're a Python programmer, you don't even know because in Python loops work differently. But then we also have a Python similar loop where we say for something in something. So for X and Y, we could say and we also have a special type which is off. And we're going to talk about all three of those. But first of all, let's start with the simple one. The basic for loop that we know from languages like C. And this header of the for loop if you want to call it that basically has three parts. It has the initialization of a variable uh it has the condition and it has a step or an action that is always executed with each iteration. So I can say for let counter is equal to zero then I can use a semicolon that is now the definition the initialization here. The second part is the condition while the counter is less than 10. And the third part is what do we do? we increment the counter or I can in this case doesn't really matter. I can just say counter++ and then in this for loop we have uh the rest of the code. So what we have is we have a counter starting at zero going uh until it has a value of 10 and it always increments the counter and then I can also add some additional code like just print the counter. Same effect as the while loop. If I run this you will see zero up until 9 of course. Now because we um we do it this way, we can also say uh less than or equal to 10 or actually no actually we don't need to change that. We can just say counter plus one or something. Uh or you can start with counter equals to one and you can go up until 11 whatever. But basically the concept is the same as the while loop just that a lot of the stuff is done here in the header already. We define the control variable and we also change the control variable which by the way doesn't always have to be an increment. It can be a decrement. It can also be a division by two. For example, in a lot of search algorithms you will find that. But this is the structure of the classic for loop. Now for the other two for loops, we need to understand what arrays are. And we're going to talk about them in a second here. But for now, let's just accept that there's something like a collection of values. So I can say array is equal to and then square brackets. And let's just uh let's just throw in a couple of numbers 20 50 66 12 whatever just a bunch of values here and they belong now to an object called an array and as I said we're going to talk about this here more in a second but the idea is with a for loop now I can also iterate over this array which means I can go through the individual elements I don't need a counter I don't need to say a condition is uh as long as the counter is less than 10 do something the condition is basically as long as there is an element to look at next do that so if I say for element or actually I shouldn't call it element in this case if I say for index in array do something we can see what happens when I do console lock index and this is also going to show you the difference between in and off. So if I say note main. js JS you can see I get 0 1 2 3 4 and the reason I get this is because we have five elements and this is index 0 1 2 3 4 so the in keyword here always gives you the index if you want to actually iterate over the elements because in Python this is what would happen if you say in Python for something in something you're actually iterating over the elements themselves not over the index if you want to do that in JavaScript you use the off keyword so in this case it would be element of array print element and there you go. All right. And the

last thing I want to show you here when it comes to loops is loop control statements. We have certain things that we can do in loops in certain conditions. So let's go again with a basic for loop. I'm going to say let I equal to zero. I is going to be less than 10 and then I ++. Same as before. And we're going to do console lock i. Nothing fancy. But what we can do now is we can use a statement called continue. And continue basically tells you to skip this current iteration. So what I can do is I can say if I is equal to 5, what I want to do is I want to skip right here. I want to say continue. And what this is going to do is it's going to skip this iteration. It's not going to go to the console lock statement. It's still going to do the increment because that is happening in the header here. But it's going to skip this part because the moment it reaches continue, it's going to just go to the next iteration immediately. So if we run this, you can see 0 1 2 3 4 6 7 8 9. The five is missing. And another statement we have is also the break statement. We saw that already with the switch case, but here it has a different effect. With switch case, it was basically defining the end of a case. Here it breaks out of the loop. So if I say if I is equal to 7 and then I say break, what this is going to do is it's just going to break out of the loop completely. So we're going to the next statement here. If I have some console lock hello after the loop, we're going to go to that. We're not going to continue with the loop. So 0 1 2 3 4 6 hello. As you can see, now what's tricky is that sometimes you can have nested loops. So you can have a loop like this for i going up until 10 and then in that loop I can have for j also going up until 10. So we have two different loops. Maybe they have the same condition maybe not but essentially we have these two different loops and when I run continue or break which one am I talking about? Now in Python you're always talking about the innermost loop. So if you want to break out of the outer one you have to work with booleans and whatnot. In JavaScript you can do that in a very simple way. What you can do is you can define loop one colon and then you can say loop 2 colon and when you then run continue or break you can be very uh specific about this. So you can say console lock and we always want to lock i and j and for this we can learn how to do formatted strings. So I can use back ticks here and we can say dollar and curly brackets for i and then comma dollar curly brackets for J. So now you also know how to do string formatting in JavaScript. Basically this is always being printed. We can see what this looks like. If we just run it note main. js we get all these pairs here. And what I can do is that if I is equal to five for example and now we can use also parenthesis to combine these. So I can say if i is five and also j is 2. If both of these are the case I want to do something and what I can do is for example is I can break out of the loop but not the entire loop. I want to break out of loop two. So we say break loop 2. So what would happen is it would print everything the moment it reaches I5 and J2 we would skip the whole uh J iteration. So this is the last I equals 5 statement that we're going to see here. And actually maybe I should do it like this. Um that's the last statement we're going to see here and then we're going to move on with the next iteration. So if I run this you can see that I get all the values here but when we go to five we only get zero and one. Whereas if I say break out of loop one, it's going to break the entire thing. So it's going to stop with the entire loop execution and that is the last thing that we see from this loop. Now another

important concept is functions. Obviously functions are blocks of code that we reuse by not having to type them out all over again. We can also take parameters. Very simple example here would be I define a function print hello for example and all it does is a simple console log with hello. Of course this is not a very useful function call uh or function definition but the basic idea is you have a block of code you don't want to write it over and over again but you need it at many different points in your program. So you just define it once and then you call it. In this case now I can do print hello and I can copy that a couple of times. Paste it and when I run this hello world, hello world all the time. And the same thing can be done now with parameters. So we cannot just call a function and it always does the same thing. It can also react. For example, I can pass here a name and then I can say also here with string formatting, let me use back tick. We can say hello and then dollar. And then of course I can call this with different names. I can say Mike, I can say John, and I can say Bob. And when I run this, we get three different messages. And a function doesn't only have to do stuff. It can also return stuff. For example, let's redefine this to be an add function. I can have number one and number two here as parameters. And instead of printing the result, I can just return the result. I can say number one plus number two. In this case, I don't do any type casting. So I could pass strings and they're going to be concatenated. But for the sake of simplicity, I'm going to leave it at that. We're just going to see what happens. I can say let result is equal to add and then 10 20 two numbers here. And I can console log the result. The return value is what the function returns which means that this is the value that this expression produces in this case 30. That is going to be stored in result. And now when I run this you can see 30 is printed. There's also the possibility of default parameters. So if I say that number two by default is always 50 and I don't pass number two, I only pass 10, then what's going to happen is I'm going to get 60 because that is a default value. Interestingly, however, and this is oftentimes the case in JavaScript, stuff that usually breaks code in other languages just works in JavaScript and leads to very odd behavior. For example, in Python, if I start defining default keywords and then I do again positional arguments that are not default. So if I say number one, number two is 50, number three again without a default value. And then maybe I try to do uh number three, then it's just going to ignore the default value. So then if I do that, it will give me a nan. And even if I say 20 here, it's not going to consider that this is number one and number three. Only if I enter three values, it's going to consider this valid and it's going to give me 60. There's also the possibility to work with anonymous functions. So if I want to assign some variable here, let value equal and I want this value to be the result of a function expression, I can do that as an anonymous block. I don't need to define it. So I could just use parenthesis here and I can say function without a name just function like this curly brackets and then I could write some basic code. Let a equals 10 and then let b equal 20. And then I could just return a plus b. And of course this is not a very useful use case. But essentially this would also result now in a value and I can console lock this value. But of course if I want the actual value and not just a function I have to call it as well. So use two more parenthesis here and then I can just say note main. js and I get 30. In most languages, you can also define functions with a variable number of parameters. And every function has different syntax for that. In JavaScript, it's super simple. You just define a function and it just by default accepts whatever you want. This is typical JavaScript behavior. Just do something and it works and it probably going to do something that you don't expect. But with a function in JavaScript, if I say some function here, this already takes in as many parameters as you like. you just need to access them and you can iterate over the arguments um object to get the values. So I can say for argument in or off I should say in JavaScript for argument of arguments then I can just go and print or console lock the argument. And of course I cannot just print it. I can also do calculations with it do conditions whatever. But if I now call some function and I pass 1, two, and three as values, this is going to print 1, two, and three because it just accepts them because every function has a variable number of parameters. However, if you want to combine a specific number of parameters with optional parameters after that, you can do something like if this is my sum function, I can say I want a and b by default, but I then also want dot dot numbers. And what I can do is I can say um x is equal to I need to say let a + b and then I can say for number of numbers we can also add that to x. So I can say x plus equals number and in the end I can return the number. Only thing is I have to rename that as well to my sum. And I also need to do console log so we can actually see something. And also we should not forget the let keyword here. And of course you don't want to return the number but x. There you go. After a couple of errors here, we have the correct result which is six. And we can keep going. We can add new arguments here. I can say 1 2 3 4 5 6. And it's always going to continue adding them to the sum just because we have numbers. But we can also of course just add one and two. Then it will not go into the loop. It will just return three. Also as in most languages in JavaScript we can use lambda expressions. Lambda expressions are basically functions where you just have input and output mappings. You don't have a state. You don't have any function logic in between. You just get something in and you produce something as a definition or the output is defined in terms of the input. You don't have state. You don't have any actions. And the syntax for this is you can say const lambda expression is equal to and then in parenthesis you can provide the input let's say a b and c and then I can use this arrow here so equal sign and closing angle bracket and I can define the output for example the output can be a * b + c and that now would be a lambda expression this would be a function that I can call so I can do console log lambda expression 10 20 30. So that would be 10 * 20 200 + 30 230. Let's see if that's the case. There you go. And the last thing I want to show you in terms of functions here is how to work with functions or how to pass functions as a first order entity as callbacks so to say. Um and for this we can say I have a function my function and this also takes another function as parameter. So other function let's say and what we can do now is we can say console log running the past function and then we can just take this entity which is the function. So this is going to be of type function we're going to take this and execute it. So other function will be called then of course I need to also define a function that I can do this with. So, I can say function uh hello. We're not going to have any stuff in here. And I can just say console log hello. And now I can go and run my function and pass hello as an object here. So I don't call it, I pass it as an entity. And if I run this now, it will say running the past function. Hello. So next, let us also briefly talk

about arrays. We already saw what an array is when we talked about uh the for loop. But basically an array is just a list of values, a collection of values. It can be 10. It can be the string hello. It can be a boolean like true. floatingoint number which in JavaScript is a number anyways. It can also be a big int by adding n. It can just be a collection of values. And every value has of course the value itself and also the index in the array. So I can say console lock the entire array if I want to. But I can also lock individual positions. So I can say array index zero will give me the first element. We start counting at zero. Array index 2 will give me the third element. So that would be 0 1 2. That would be the true here. So we can go and run this and then you can see we get these two values or the entire array. Now the same notation also works in order to assign values. So I can go and say array index 2 shall now be something else. let's say a string something else and then I can print the entire array again and you will see that this particular value now changed. You can see true became something else. Now I don't want to go too deep into all the array specifics to keep it simple and concise here. But we saw that we can iterate over arrays with full loops. This is how you access individual fields and also manipulate individual fields. I want to move on to the next data structure which is the map. And for those of you who come from a Python background, a map is basically a dictionary. We have key value pairs. One thing pointing to another thing. So an identifier pointing to a value basically. And we can say my map is equal to a map. But since map is a class, we need to also use a keyword called new. So we initialize a new map here. And this will contain the key value pairs. But instead of using curly brackets like for dictionaries in Python like in JSON objects, we just pass a list and or we use square brackets and in the square brackets we pass other square brackets. And each of these square brackets here would be a key value pair. So I could say, for example, name points to Mike. H points to 30. But of course, the key doesn't have to be a string. It can also be a number. So the number 50 could be pointing to some value, which is a string. And then what I can do again is I can lock the entire map to see what's in it. Or I can get individual key value pairs or individual values based on the key. So I can say my map. get and I'm interested in getting the name. And I can of course do the same thing also with the value 50 which is going to give me the string. There you go. If we now want to add a key value pair, we can use the set function. So I can go and say my map set and I could do something like set the job to programmer for example. And this would now be part of the dictionary as well. So I can take the entire dictionary, print it again, and we're going to see that this is now added here as well. Job programmer. And then the last data structure I want to show you here is the set. The set is very simple. Same as the Python set. The principle is that we don't care about where a value is. how often it occurs. It's either in the set or it's not in the set. So we don't care about duplicates here. If I say let my set equal a new set, then I pass some values 1 2 3 4 5 and then 1 two again, it's only going to contain 1 2 3 4 5. And if we lock this, we're going to see that console lock my set. Run this. And you can see we only have 1 2 3 4 5. Next up

I want to talk about objects in JavaScript. There's two ways, or actually three ways, but I'm not going to talk about the third one because it's legacy and outdated. There's two basic ways to define objects. One is to just use the curly bracket notation directly. The other one is to work with classes. So to do actual object-oriented programming. Uh let's look at an example. If I say my person is equal to, I can now define an object by using curly brackets and mapping uh field names to values. So this now looks much more like a Python dictionary. I can say name and then I can say that name is Mike. I can do again age is equal to 30. And then job could be equal to programmer. And the interesting thing is we can also add here now functions. So I can add a function called make older. Actually I don't need the function keyword here. I can just say make older and this takes years as a parameter. And the idea is now to increase the age of this object by the number of years. So we actually use the keyword called this. This age plus equals years. So this referring to this specific object and now I can lock the person object so we can see what it looks like. We can also take a look at the type of this object and we can also call the function. So actually let me print my person here again and before that we will say my person make older 10. And when I run this first of all you can see what the object looks like. You can see the type is object and you can see that the age changed when I called the make older function. So that is the direct way. The more modern way is to actually use classes. These are supported since JavaScript in 2015. I wrote down the version. It's ES6. That is the official JS standard. It includes classes now. So what we can also do is we can say class person. This looks much more like in most other object-oriented programming languages. And we can define a constructor. And this can take name, age, job as a parameter here. This is what it's what is being called whenever we create a new person. Then we can just say this. name is equal to name and then we can copy this. Do the same for age and for job as well. Then we can also again define the method make older takes years as parameter does the same thing basically which is taking this do years or not this years this. and adding years on top of that. And now to create an instance of this class which is now a blueprint. The class is just the basic idea of what a person looks like and an object is an in concrete instantiation of that class an instance of this class. So I can say my person let my person equal to new person and I can pass here name agent job. Let's try Bob 50 and accountant. then console lock the person. We can also do again my person make older 10 years and then I can lock the person again and we're going to see the same behavior. Note main. js. There you go. All right. And

the final thing I want to show you is how to work with JavaScript in the context of HTML just to have this complete for the sake of completeness here. This is already written code. I also don't have HTML syntax highlighting but it's not that important. basically a basic HTML page. We have two buttons on click alert message on click lock message. We have a script tag embedded in the body itself. So we have here the function alert message and then we also have a script imported pointing to a path. Then I have a separate JavaScript file here and what we do is we say let content equal document getelement by ID message value. So whatever the message is that the user inserts into the input field here is going to be locked to the console. And here we basically do the same thing with an alert message. So I can open up the index html in the browser. This is what it looks like. I can say hello. And if I say it will do alert. If I say lock, we're going to only see it in the console like here. So

that's it for this video today. I hope you enjoyed it and I hope you learned something. If so, let me know by hitting a like button and leaving a comment in the comment section down below. Also, in case you're interested, on my website, you will find a services tab and a tutoring tab. There you can contact me if you need help with a project. If you need a freelancer or consultant, you can contact me at the bottom of the pages using LinkedIn or email. Besides that, don't forget to subscribe to this channel and hit the notification bell to not miss a single future video for free. Other than that, thank you much for watching. See you in the next video and bye.