JavaScript Functions: Master Functions, Arrow Functions with Projects

1. Course Introduction: Hey, there. Welcome to the scores on JavaScript functions by building real projects. My name is Wessel, and I'm thrilled to guide you through this exciting journey into the world of JavaScript functions. Functions are the backbone of JavaScript or any programming language that you learn. It enables efficient and modular code that developers can write. And in this course, we will dive into this concept of functions from the basics of defining and calling functions to understanding parameters, arguments. We will also talk about the basics like calling functions to the advanced topics like expressions, arrow functions, and even methods within objects and arrays. Now, here's what we will cover. We'll talk about functions in JavaScript. We'll also talk about parameters and arguments. What are parameters and how these two terms differentiate from each other. How can you return values from a function here we'll talk about how function processes data and returns the values. We'll talk about function expressions and arrow functions. This is one of the crucial topics where learners often face difficulties. We'll also talk about functions inside objects and array methods. So this is all about the course, and this course also has hands on projects wherein we'll be applying everything that we have learned into this particular course to build something meaningful. In the end, you will have a robust understanding of what functions are, and this knowledge will empower you to create interactive and amazing jaw Script programs. This course is suitable for developers of all levels. So whether you are a beginner, intermediate learner or someone who is advanced and looking to brush up their Jascript skills, this course can equip you with amazing knowledge and some practices that you have never heard before. So with that said, are you ready to master the art of Ja Script functions and transform the way you write let's dive in and start together. I'll see you on the other side. 2. Unlocking JavaScript Functions: The Fundamentals: Hey, there, so now it's time that we begin talking about functions in JavaScript. Now, what is a function first of all? Now, a function is essentially a block of code. So it is multiple lines of code that is grouped together, and it is designed to perform a specific task. The best part about function is that it can be reused multiple times across the program. Now, let me show you how you would write functions and why would you write, so. Okay? So let's say we have a very simple task of greeting a user. Okay? So I'll say hello and let us say I'm greeting a user. A user name is Alice Awa. Okay? I'm doing this. Now let's say I wish to do this greeting three times. Okay? So, of course, I'll Copy P three times. So I'm greeting it three times, right? Greeting the user three times. Now let's say I wish to change a message over here in the greeting, right? And it should be reflected across all the messages. So let's say the change I wish to do is add one more exclamation. Okay? Now I have to make sure that I update this at all the places wherever I am making use of this grating. And if I save this, I'll see the output up here. All right. But now this is okay if the group of statement like over here, the task is only to greet, right? It's just a single piece of statement, and any change over here is manageable because the code base is not that huge. Now, what I would want to do is I would want to head over towards convenience, right? And we can ease this with the help of function. Now, let me show you how functions can make your life easier. So first of all, I need to create a function over here so that we can use it. So I can make use of this function keyword. You can see. And you have two options, function statement and function over here. If you select function, it'll bring in function for you, the keyword. But I would want to have the function statement. So you can see this appeared. Now, it is automatically added a placeholder for name params, and it has added these curly braces, right? So I'll update the name over here to greet, okay? And in place of params, I'll just remove this for now and I'll within the body. So this curly brace, okay? Within these curly braces, you can have the function body, right? I use this term function body. Now, what is function body? Function body is the block of code that can be executed when this function is called, okay? So let's say I move this code over here. Okay. And now I don't need to call the greeting this way or greet the user this way. Okay. Instead, what I can do is I can call this function, right? So now I have this function greet, okay? The name of the function is greet. So every function that you create must have a name, okay? And you are assigning it a name because you need to call that function later on, right? So now if I want to call this function, I'll say greet, and I'll have round brackets opening and closing. Now, if I save this, you'll see Hello Alice is now being printed over here, okay? If I want to greet the user thrice, like my original requirement, I can have this called thrice, and you'll see it appear thrice. Now if I want to change the message, so let's say if I want to get rid of this extra exclamation that was added, I have to make that change at only one place, right? And it is reflected everywhere, and it's reflected everywhere, essentially, wherever this function is being called, o because it's the single block of code that is being reused and called multiple times. Here, in this approach, what you are doing is you are duplicating the code. You're duplicating console dot log thrice to make this task happen thrice, right? But over here, you are not duplicating the code. You are having console dot log written once. But if you want to do this task thrice, you're calling the function twice because this console dot log statement is within a function now. All right? So let's come back to the definition. A function is a block of code. You can see this is a block of code. Now you can have multiple statements over here. Let's say I also want to greet the user and say you are now logged in. Okay, something like this. I'm displaying these kind of messages. Okay? You can see Hello Alice, you are now logged in. Hello Alice, you are now logged in. Hello Alice, you are now locked in. It's coming in three times each message. Okay? So it's a block of code. Now, within the Curly braces, you can have multiple lines of statement, multiple lines of JavaScript code, which is a part of this function and it is invoked or called whenever this function is being called. And the next part says it is designed to perform a specific task. You are essentially grouping multiple statements together and you are naming it as function and this is designed to perform a particular task. For example, over here, it is designed to greet the user, right? And you're making use of this function keyword over here. This is something that is not to be missed if you're creating functions this way, all right? And it can be reused multiple times. So you are now calling this block of code thrice over here, right? Not once, twice. And you can call it number of times, like number of times you want to call it or the requirement is. Right? So that's a function for you in JavaScript. Now, if you're coming in from any other programming language like Python or Java, you must be aware of this concept of function or methods, right. So it works the same way in JavaScript, but the syntax is a little bit different. Alright? So I hope this was useful. 3. Dynamic Data Flow: Mastering Parameters & Arguments: Right now, I have a function named GET, which is used to greet users. And here in this block of code, I'm having the entire operation of greeting the users. And the operation is there are a couple of print statements like console log statements that are printing two messages, two distinct messages onto the console. I'm calling this function thrice. And as a result, you are seeing six messages being printed onto the console, right? Now, over here, the message that you're seeing is pretty static. What if down the line or in future, I wish to customize the message for every user, and what if I want to call every user by their name? Because this function right now is only being used to greet Alice and not any other user. So in that case, JavaScript allows you to pass function parameters just like any other programming language. So let's say I wish to have name as dynamic, okay? So I can accept name over here. All right. I'm not specifying the data type, please make a note over here. And then over here instead of Alice, what I'm doing is I'm having $1 oops, so I'll have to add $1 and I'll say Alice. Sorry, not Alice, I'll have name. And then this will be a template lateral, like this. All right. And then if I save this, I'm going to get error saying undefined, because this name is not yet being initialized, right? So we'll be doing that shortly. But the point I want to mention over here is this thing that you're passing over here, name is a function parameter. Okay? Now, to call the function in the right way with parameters, you need to pass in something called as arguments, right? So over here, we'll now have to pass the function arguments because the name is going as undefined. You can see undefined. It's printing thrice, and all the three times, it's undefined, right? So I'll pass in the name over here, so I can say Alice once, then I can say John, and then I can say Lucy, right? And if I save this, you'll see Hello Alice, Hello John, and hello Lucy, right? So this thing over here is argument, okay? These are function argument that I'm passing to the function parameters. So why are we passing the arguments? Because the function is accepting parameters. And here you can see name is the name of the parameter that we wish to initialize over here, okay? And then this is being used within the function in whichever way the function wishes to make use of it. So I want you all to remember the difference between parameter and arguments. They both are not the same, right. So most of the programmers get confused and I don't know what is the difference between a parameter and the argument. They think they are same, right? So this thing over here is a parameter. If you hover on this, it'll say parameter name. And this thing over here is a argument because this is a value that you're passing in and using this value, the parameter is actually initialized. So this is an argument. All right. So this function argument in use, and this is function parameters that are being declared. All right? Now, this is function with one parameter. There will be scenarios wherein you want to pass in multiple values, multiple arguments into a function, right? So in that case, you can of course have multiple parameters. Here, I can add H over here, and I can add one more console log over here. Okay. You are from or, I'll say, we'll print the Ho. Okay, something like this, and I'll get rid of the inverted commas over here and I'll add Bac ticks. All right. Now I can save them. Okay. Once you save this, you'll see undefined being printed. Now, this function accepts two parameters, but we are passing in only one, right? So we need to pass in the second parameter also. So I can say 22 over here. This could be like 21, and you can pass in any age over here. This could be 29, something like that. You save this, you'll see, Hello Alice, you are 22-years-old. You are now locked in. Hello, John, you are 21-years-old. You are now locked in. Hello, Lucy, you are 29-years-old and you are now locked in. So what does this tell us that the function can have multiple parameters that it can define a function. Okay? So you can define a function with multiple parameters, and if you are having a function with multiple parameters, you need to pass in multiple arguments as well so that it can initialize it really well. All right. Now one thing over here I want to make a note of, I want you all to make a note of is this part of the parameter the first parameter over here, name is a string, and this is a number. Okay? Now, in the end, what I can do is I can add a type over here, type of and I can simply say age over here. Okay. And I can do the same for name as well. All right. So let's do for name, type off, and I'll save name. And once I save it, you'll see, Hello Alice string, you are 22-years-old number. Okay? So one function parameter over here is a number and the other one is a string. Alright. Now, what if I change this to string? Let me save this. Oops. So let me save this. Now you'll see for Lousy. Hello, Lucy. So Lucy is a string, and 29-years-old is also a string over here. Okay. But for the rest, the first parameter is a string, and the second parameter is a number over here. Okay? So what I'm doing is I'm getting the type of each being changed for every function call over here. All right, you can see over here, and this is possible because Ja Script is dynamically typed. So you don't need to have a data type declared or defined when you're creating variables. And these parameters are essentially variables, right? These are variables that are only existing within the function block. So this is a function block over here, okay? This curly braces that you're seeing two CRY braces, this is what a function block is, and this name and age are only existing within this. So if you try to make use of name over here, okay? Sorry, not this. So I can say console dot log and let me say name over here. If I try to do that, I won't see any output. Even for H, I won't see any output. You can see all right? So name and age are only existent within the function block and not outside that, right? And these two are variables that are parameters for this function, okay? And you can dynamically change the type of the parameters is what you can see over here, right? So yeah, this is completely dynamically typed. Now, another thing that I want to highlight over here is the order. Of the parameters and the arguments matter. Okay? So for example, if I change this age over here and if I change name over here. Okay? So age I made first. If I save this, you'll see, hello 22 number, you are Alice years old, which is absolutely wrong, right? Because we interchange we interchange the order over here, right? So if I do control side over here, you can see, like, it's all correct now. Okay? And also, this has to be passed in the order. Okay, so it is initialized in order. So this first parameter will be initialized with Ale, 22 will be initialized with each. So order matters a lot. Okay? So if you're having ten parameters, you can have as number you can have multiple parameters. Here I'm just giving example of one and two, but you can have three, four, five, ten parameters. That's absolutely okay, right? But if you're having those many parameters, then be sure that you're passing the values in order, and you're not messing up with the order because the output that you'll get will be messed up totally. So I hope this is so far so good. All right. So now I want to talk about default parameters, and for that, what I will do is I will simply duplicate this function. I'll just copy paste, okay? And you can see, I'll just rename this function, okay? I'll say greet person over here, and I'll have just one parameter over here just for the sake of demonstration. Alright, I'll get rid of all the other statements over here. We'll keep things simple. Alright? So this is my function, which is greet function. Sorry, greet person, it's called, right, not great function. So another thing over here that you can notice is a single jaw script program can have multiple functions defined for different purposes, of course, right? So here I'm creating another type of greeting, right. Now, let me call this over here. Okay? If I save this, you won't see any error. Okay? Now, let me call this greet person, and I've called this function. Okay? Now, the moment you call this function without any argument are you seeing you are seeing hello undefined. Why are you seeing hello undefined? Because this name is not yet defined, it does not have any value because you have not passed the argument, all right? Now, there will be scenarios wherein you wish to set some sort of default values or parameters because the collar or whoever is calling the function might not pass the values always. And in that case, you might want to have a set of default value with which the parameter is initialized. Now, one way is to have a default value over here, okay? But this is not good. All right. I can have a default value like guest over here. Okay. And I can save this hello guest. But this is not a good way of doing things. If I actually pass a value, that value will be overridden. And if I don't want that to be overridden, I need to add unnecessary checks over here. Okay? But Ja script provides a simple way to do so. All right. What you can do is when declaring the parameter over here, you can actually initialize the parameter with a default value, like so. Okay, something like this. If you save it, you'll see hello guest being printed over here. All right. Now, if you're not passing any parameter, you're seeing this output. If you pass any sort of parameter. So if I say hello ron, all right, if I save this, you'll see hello Ron being printed. Okay? So if you're passing in any sort of parameter, you'll see that parameter being, sorry, if you're passing any sort of argument, not parameter, if you're passing in any sort of argument, you'll see that argument being used. But if you're not passing any sort of argument, then the default value will be used, provided you have defined a default value over here, okay? So this is an example of function with default parameter. Value, right? So this is how this is very helpful people. There will be scenarios. Like, for example, this is a greet person, right? So if you don't have the name of the user over here, okay? We can have name being initialized to guest over here, right? And then what can happen is guest is being used. If the name is not available, guest if you don't want to use guest, then you need to pass in the name, actual name of the user. Okay? So irrespective, user will see a decent output. He won't see hello undefined. Right. So it'll be a decent output, right? Now, this is a function with default parameter value. All right. I want to talk about function with rest parameter. Okay? So function with rest parameter. All right. Now what does a function with rest parameter mean? All right. So let's say I have a function called calculate sum. All right, let's say. And here, in the place of parameter, I have A P two parameters, right. And what this function does is it will say console dot log. It'll just do A plus B over here. All right. Now the thing is, I wish to call this function, right? So what I will do is I'll calculate sum. I'll pass in 1020. Pretty simple. So it will print 30 as the output as expected, right? Now, the scenario is or the problem statement is this will work fine or this will do the job if you know how many arguments you are going to pass, right? Now, if you're not sure of the number of arguments that you're going to pass into the function, then in that case, you can make use of variable number of arguments, right? So you need to change the syntax over here for that, and you need to add three dots like this, and you can say numbers, right? Now, what this tells is that numbers is the name of the parameter. Okay. But it's of variable number, right? The count is not fixed. All right. Now the question is, how are you going to use this inside the function if the count is not fixed? All right. So for that, we'll have to make use of four loop. Okay, so I'll say let sum is equal to zero. And I'll say four. So if you're coming in from some other programming language, all right, like Java, C plus plus, or any sort of programming language, then it's likely that you must be aware of what loops are, right? If you're not aware, then that's completely okay. Just stick with me. We'll cover everything as we go. All right. But for now, I'm adding this four loop, and I'll say sum plus equal to, and I'll say over here. Okay. And then in the end, I can do Console log over here. Okay. And I can say some okay. Something like this, right? Now here, I've passed in 1020, which is giving me 30 as a result. Okay, I can pass in 1020 and then 30. I'll give 60 as a result. I can copy this again, and I can pass in ten, 20, 30, and I can pass in 80. You can see it's giving 140 as a result, right. So this will keep on going, right, because the number of parameters that this function accepts is variable because of this syntax, right? So you can pass in any number of arguments as you like. Depending on your requirement, right? So this is something that you should be aware of. This is known as the rest parameter. You can see over here, this is rest parameter. All right. So yeah, this is done. Also, one example I wish to show you is of a boolean, right? So you can even pass in boolean parameters, and how can you use Boolean parameters, okay? Now, let us say, if I want to Check if a member is eligible for a discount or not, right? And a user is eligible for a discount if he's a member. Okay? So I can say function over here, check eligibility over here. Okay. Parameter is, let's say, uh, I can say I can say is member over here. Okay. I'll keep it simple, and I'll say console dot log over here. And within this, I'll have a ternary operator check. Okay? So I'll say, is member. If this is member, then in that case, eligible else print out what will print? Not eligible. Something like this. Okay. And yeah. Okay, so I made a mistake in the syntax. It would be something like this, and over here, it would be Colin. Okay. So yeah, this is done. Okay. So what you're doing is here, let me take this two new lines so that it's much more readable, you can see, what I've done. I'm actually checking the eligibility for discount with the help of this boolean variable. So if he's a member, he's eligible, else, he's not. Okay. And very simply, you can call this. It's a check eligibility, you can say, true. Okay. So you can see he's eligible, and if you change this to false, he's not eligible. All right. So that is what you see as the output. All right. Now, these were variables based functions. All right. You can even have functions with object. Okay? So functions with objects as parameter. All right. So in that case, I'll create a function over here. And let's say we wish to print the address. Okay, so address can be complicated, right? And in that case, let's say we are, let's say we wish to have street over here, I'll have city, and I'll have SEP. Okay, these things I'll have. Okay. And I'll say console dot log over here. And with the backticks, I'll say address. Okay. And then I'll print in address. Sorry, this will be street, then this will be this will be after street. There is city and ZIP. Okay, so I'll say city. And then this will be ZIP. All right. So I have this function, okay, that is having that is having three parameters or it's having a single object with these three properties over here. Okay. Now, how would you cool this over here? Okay. So in order to coll this, I can call simply print address, ok? And I can have let address over here. And I can say street street as street one, okay, something like that. You can have any sort of dummy address. I can have a city city one. Okay, I'm adding all dummy addresses. You can say ZIP and you can say over here, something like that. Okay. So yeah, this is what it is over here. And I'll close I'll have a semicolon, and then I'll pass in address a. Now if you see the output, you can see address Street one, city one, and you can see this being printed over here. So I'm actually getting the output on multiple lines because I've added line separation. So I'll just go back and I'll move everything to single line, and you can see the output now, right? So this is how you can get the objects passed. All right. You can even have a print address over here. This is also another syntax, and you can directly create the object over here. So you can say street Colin ABC. Okay. This way also you can pass in. Right. You can see Street is being passed in now and the rest two are undefined, right? So it's important that the key is right for all the key value pairs. All right. So here you can say city two, two, save. You can see the output, yeah. Okay. So you can pass in or create object dynamically like this also over here. All right. And also, one more thing I wish to highlight over here is arrays, okay? So functions can also be used with arrays as parameters. All right. Now, in this case, what we will do is we'll have function. I'll say print numbers and I'll have numbers as the parameter over here, and I can say console dot log, and I can say numbers, something like this. All right. And I can call this function. So let me call this. I'll say print numbers and let me call this. I can say one, two, three, four, five, six. All right? If I save this, you'll see the array being passed into the function. So this is also an example of function with array. All right. So this is all I had to talk about different parameters. I mean, the function parameters and the function arguments. All right. I hope this concept is clear. The distinction between parameters and argument is also cleared, and I hope you have some clarity as to how you can create functions that accepts different arguments, and you can make use of it in JavaScript. Allright? So I hope this was useful. 4. Function Outputs Unveiled: Returning Values Explained: Now let's say I have a function that can help me get a square of value, okay? Now, SQUA all right. And for this, I'll accept a number over here. All right. And what is a square? A square is in number multiplied by itself. So I'll say let result, and I'll say number into number. Okay. Now this is done. I can do a console log over here. Okay, console dot log, I can say result. All right. Now I'll call this function. I'll say get square, and I'll call four. Now what is a square of four? It's 16. So you'll see 16 as the output. All right. Now what is happening over here is we are passing in this argument four to this parameter to this function, and this parameter is initialized with four, and then the calculation happens where the result is initialized with four into four, which is 16, and then you get 16 as the result, right? Now, this 16 or the result is not accessible outside this function, right? Now, there will be scenarios wherein you might want to do certain sort of processing, all right, certain sort of operations, where you're processing some data, some information, and then you want to get that processed value. Over here, we're not getting the processed value back from where we called, right? So here we are asking the function to get the square of four. But what if I want to make use of square over here? I cannot. I cannot access result over here. Okay? So if I simply move this statement from here to here, it won't work, right? You can see result is not defined. And the reason is result is created inside this function block, so it exists over there itself, right? You cannot access it outside the function block. So how do I get the process data? From the function. Now, this is where you can return the values, right? So here, what I'm doing is instead of printing it over here, I can simply say return. I can make use of this return keyword over here. You can see this return, and I can say result. Okay? Now, what will happen as a result of this the result would be returned. Okay? And where is it returned from wherever you call the function. So from wherever, whichever position you are calling the function, there this result is returned. But the thing is, you're not seeing it over here, right? So to get the result, you need to catch it, and how do you catch it? You can say square numb over here. You can create a variable and you can catch it this way, o and you can print this variable. So now you'll see 16 as the output. So what we are doing essentially over here is we are creating a function g square to process or to get the square of a number and it can be any number, and we are getting the result over here, and we are logging it over here. Right? Now, this thing this way of doing things is known as returning the value from a function. And here, we're getting that value and we are doing some further processing, right? So yeah, this is how you can return and use the values from a particular function. Now, the thing over here is here we are just returning single value. Of course, you can have functions that return multiple values as well. How would you do that? So I can have function Okay, over here and I can say get user info. Okay? And I can say name, comma H. Okay. I can say return. I can say user name, Colden name over here. Okay. And I can say user H and I can say g over here. Okay. So this is done, and okay. So this is done, and I'll have instead of adding this, what I can do is I'll get rid of this and I can have this initialize it this way. Okay. So I'm having name test, and I'll have H as test. Okay. Now, how do I get this value into the place wherever I'm calling this? Okay? So what I can do is I can see console dot log. Okay. I can straightaway over here, say I can say G. Sorry, not get. Oh, yeah, it starts with G actually, G user info, and I can just call it this way. And you'll see the user info being printed over here, right? Instead of printing it onto the console, what you can also do is you can unpack this, right? So here, there are two properties coming in, username and user H. So you can unpack this and assign it to separate variables. How do you do this? So you can say let over here. You can say use a name. And you can say user g over here. Okay? Is this, okay, you're creating over here and you're calling get user info. All right. And now if you do console dot log over here, user name, comma, user H. You can see name is this and H is this. Okay? Now, what we are doing is when we are getting the value. So when the value is returned from get user info, it is returned in the form of object. So this is actually object over here, key value pairs, right? And this is how you can return multiple values from a function. And we are getting an object as a return type. So what we are doing is we can either print it onto the console, Okay, we don't want to print it. We want to handle it in a custom way. So what you can do is you can unpack these values and you can assign it to separate variables using the syntax. Okay? So you have the list of variables over here and make sure they match the name over here because if I say user name one, and if I save it, you'll see user name is not okay, over here. I'll love username one, and I'll save this. You'll see username one is undefined now. Why? Because the name of the property is username, and here you are unpacking it into a variable with different name. Okay? So name is being matched, you can see, right? So this should work. And this syntax where we are creating variables this way from object is known as destructuring. Okay? And you will often read this term object destructuring. We are destructuring the objects. What is destructuring? In simple terms, we are unpacking the objects, okay? Object comes in this syntax, right? It has username attribute and user H. You are unpacking it and creating a variable called username, you're assigning it this value, right? This value, yeah. And then you are creating user He and you're assigning it this value. Pretty simple. We are unpacking it, and that is what is object destructuring. And here, actually in the hindsight, not in the hindsight, actually, it's pretty clear that this particular synta or this particular concept is being used over here to destructure the objects. All right. So this is how you can have function return multiple values, as objects, of course. Okay? Now, this is how you can return a object, right. And I also showed you how you can make use of object from the place where you're calling this. Now, another way of doing things or returning multiple value is you can have a function, return array, right? So you can also do that. Now, how would you do that? So let me show that to you. So you can see function and you can say get dimension over here. Okay. I won't accept a parameter. So let's say we are creating a function to get the dimension. I'll say return, and we can straightaway have an array over here. I can say 200 300, 500. Okay. And I can simply call Console dot log get dimension over here. Okay. And you can see the output over here. Okay, so this is also doable, okay? Now, you can even destructure the array over here into individual variables. Okay? How would you do so? Okay? We are already aware, by the way, how destructuring works. So I'm going to say, here I'm returning 200300500, right? So I can say width Okay. I can say height, I can say depth over here. Okay. I'll get rid of this and I'll get this. I'll say it's equal to get dimensions. Okay. And I can say Console, dot, log over here. I'll say width, height, and depth, something like this. Okay. Oops. So this is undefined. Let me see where the issue is. So the syntax is a little bit different over here. Instead of curly braces, there will be round brackets. Okay? Oh sorry, not round, square brackets. I'm sorry about that. Okay. So if you save this, you can see 200300500. This worked, right? So this is about raise over here. Okay? One thing I want you to talk about is over here in the in this function. Okay? Let me copy this over here. Okay. I'll comment this. I'm not removing this code so that you can see what changes we are doing. So this is the code, okay? Here, what I'm doing is I'm actually creating a variable. We don't need to create this variable over here. I can simply cut this and just return the calculation, something like this. This is also fine. There's another way of doing things. You can see 16. Shorthand way is what it's called, right? So yeah, this is how you can return function. Sorry. This is how you can return values and different kinds of values actually from the function. Now you can also have Function with no return over here. Okay? So I can have function called say hello. This something you're already aware or you must be already aware, and you can say, I want to show you how things work if you try to accept value from a function that is not returning anything. Okay? So I have say hello. This is not returning anything. Okay? I can say say hello over here. Okay. You'll see hello printed. Okay? Now, if I say console dot, Log over here and if I say message Okay. And if I try to accept message as the return of this particular function. This function is not returning anything, but still I'm creating message and trying to accept whatever it is returning, you will get undefined. It's not returning anything, right? So, of course, you'll get undefined, right? So yeah, this is about it, right. You can also have so I want to show you one more case over here. So here I'm returning number into number, okay? Now, let me add attment after this, okay? I'll say hi. Let us see what happens. If I save this, you'll see this statement is never executed. You'll also see that it's grade out. Can you see this? This is not grade out, and this is grade outut. If you hover on this, you'll see unreachable code detected. What does unreachable code mean? Okay? So what happens is actually, if you are having any sort of statement after the return statement, I repeat if you're having any sort of statement after the return statement, then that statement will never be executed, right? How will it be executed? Because you are actually returning from here. You said return. Return means you are coming to the place from where you are called the function, right? You're coming to the place from where you call the function. So this is never going to be executed. So this is, of course, unreachable code, right? This will never be executed, right? Now, let me make things a little bit interesting, right? So you can have function. With multiple return values or return statements. Not values. I should say return statements because values already we have seen how you can return multiple values in the form of objects and arrays, right? So let's say I have a function wherein I want to check each of the user. I'm checking age and I'm accepting age over here. Okay. Now I can I can say age if age is greater than 18, ok? Then I'm making use of ternary operator. I'm saying okay, return adult. Something like this. So it's returning adult if the age age is actually above 18, okay? And oops this is not allowing us to return over here, ternary operator. I'll have to make use of I treatment over here. Okay, so I'll say I age is greater than 18, then in that case, okay? I'll want to return adult, right? I'm returning adult. Okay? Else, what I'll return is minor. Let's say. Okay. So yeah, this is done, and I'll have semicolons. Okay. So here what is happening is observe this carefully, people, okay? I'm having a function where I'm having two return statements, return adult, return minor, okay? So this is absolutely valid, okay, because these two return statements are not executed at once. Either of these will be executed depending on the condition, right? So if the condition is true, this will be executed. If the condition is false, this will be executed, right? And this is how the if statement works. So we are first checking this condition, and then we are executing this, right? So you can have multiple return statements. This is absolutely okay over here. All right. And if I try to run this over here, I can say console dot log over here. Okay, and I can say check, age, let me pass 14 over here. Okay, I'll copy this and I'll save this. You'll see minor as the output. If I run this again with age of 24, you'll see adult. All right. So here we are making use of return with if statements, and this is absolutely valid. There is no issue as such, all right? So I hope this is making sense now as to how function can return values in multiple and different scenarios. All right. So I hope this is useful. 5. Crafting Code: Exploring Function Expressions in JavaScript: So now it's time that we talk about function expressions. Let us say I have a very simple function, which is used to say hello, right? And I can call it like this. Nothing magical over here. We'll see the output as hello. Okay? Now, another thing I want to highlight over here is at the top, if you add a function call like this, you'll see the output even before the function is declared. So even before the declaration of the function, if you try to add say hello or call the function that you're going to declare, it will still work. You won't get any errors. All right? Now coming to the topic of function expressions, what are function expressions? So you can have a variable created, like this. You can say let create over here. And you can assign a function to it, right? So that is something that you can do. All right. So what I will do is I will cut this. I won't create a new function. Instead, I'll cut this and I'll add that thing over here, okay? And a, this is absolutely valid over here. Okay? This is something that you can do in JavaScript. Okay? You can call Greet something like this, and you can see, Okay, C hello. Okay. So this needs to go away over here. The name C hello needs to go away, right? And once S hello goes, you need to like comment that out. Okay. And you can see, you are now able to call this particular function using greet. Okay? So what we are doing over here is actually we are having a sort of variable that is now pointing to this function definition. And when you are referring to this variable, you can call the function using this variable itself. Okay? So this is an example of a function expression. Now how this entire thing works is, what happens is first anonymous function is created. Okay? Anonymous function, meaning a function without a name is being created, because we are not adding a name over here, okay? So function without a name is created, and it is assigned to this variable called Grit, okay? And then you can make use of greed to call the function. Now, if I copy this function call, and if I add it at the top you'll see that grit is not yet initialized or grit does not exist. All right. So unlike say hello, where we were able to call the function with its function name, we're not able to call function with greet because grit is essentially a reference that we have created that is pointing to this function. Okay? So this is something that you need to be aware, okay? You cannot call grit before its definition in the code. You must define it before you use it. All right? So yeah, this is about the function expression. Now, this thing over here, what we are doing when we are assigning the function this way, we are actually creating an expression. Okay? So this is an example of function expression. You can even add a function, right, which returns something. Okay? So let me also say let multiply. Okay. Let's say we want to have a function to multiply something. I'll add function over here. Parameter is E P over here, and I'll say return A into B, because this function is multiplying the two numbers and returning. Okay? Now you can say multiply over here, ten, 20. Okay. And if I save this. Okay, so it's simply returning. We need to print the value if we wish to use it, or display it to the users. Still not giving the output because of this line at the top, we are getting an error there. So if you save this after commenting that, so you'll get multiplier over here, you can see, and you can see the multiplication result over here. Okay? So this is also doable wherein you are having a function that is returning something and you are assigning that function to a variable. So this is an anonymous function or unnamed function that you are assigning to a variable. All right. Now, one more thing I want to highlight over here is functions in JavaScript are objects. Okay? So they are objects, which means, if you have a function, Okay, so let me create a function over here. Okay? So here, I'll say functions are objs. All right. And I'll have a function definition. I'll call this as GET. Okay. No parameters. I'll say console dot log, and I'll quickly say hello over here. Okay? So yeah, this is a function. Now what you can do is we have this function. Okay? Okay, GET has already been defined, so say hi, o or say hello. All right. So if you call say hello, it'll work, of course, nothing magical, right? Now, hello again. I'll print something. Hello again, way. So that we know it's coming in from this function. Hello again is coming from this function. All right. What you can do is you can have a variable. You can say A over here, and you can assign say hello over here. Okay? So what is happening over here is this function or this variable, I should say. All right. This variable is also referring to this function now, right? And you can simply say, A, and you'll see hello again. All right. So you can see you are assigning a function essentially to a variable. And this is possible because functions are objects in JavaScript. Okay. And you can make use of A to call this particular function. All right. I hope this is making sense, right? So these are a few concepts that I wish to touch upon. I hope this was useful. 6. Modern JavaScript Essentials: Mastering Arrow Functions: So now it's time that we talk about arrow functions. Now what are arrow functions? Now, arrow functions is syntax, and the syntax provides a more concise way of creating and writing functions in JavaScript. All right? Now, if you have to create a function, what would you do you would say function, say hello, and I would just say hello over here. Okay? So I would say Console, log, and I would say hello. Okay? This is a function. And, of course, if I have to call it, I will simply call it this way, say hello. This is a basic way of creating functions in JavaScript. Now, you can make use of function expression, right? And you can say, et greet is equal to, and you can get rid of this kind of a syntax over here. Okay? Or let me actually keep this syntax over here at the top. Okay, so that we see how we are progressing and I'll get rid of this over here. All right. And this is also another way of creating function. But here we are making use of function expression where we are assigning a function to a variable. Okay? So now this variable is pointing to this particular function. Now, in JavaScript, you can improve or make this even more concise. All right. So what you can do is you can say over here, cret I'll say greet arrow. We'll see what arrow function is. So you can skip this function keyword over here first of all. All right so you can get rid of this function keyword. And since our function is just having a single statement, I can simply get rid of the phrases and I can simply say, or I can simply do something like this. All right. So I'm making use of arrow over here to define the body of the function or the definition of function. Now I can say greet arrow over here. And I can save this and you'll see hello being printed onto the console. All right. So this syntax over here is a syntax of the arrow function. And you can see this is a function creation in a normal way, all right, with just the normal syntax. This is function expression where you are assigning a function to a variable. And here, now what you're doing is you are making this syntax or function expression even more concise and you're making use of arrow over here. So this is arrow functions, right, wherein you can create functions this way. Now, of course, this is much more concise, if you're just creating a function to do one line of operation, for example, any one line of operation like printing something or logging something or processing something in just one line, then this way, the arrow function is much more concise than doing things this way or this way, right? It's just an option. All right. And you'll see a lot of code out there that is making use of arrow functions. All right? Now, the question is here, this function is one line, right? So is it like arrow function is just used for a single line of statement? Absolutely not. So if the function body has multiple statements. So here I can say create arrow, multiple, all right? And I can say over here, okay? So here, I'll add body, something like this, and I can say, over here, I'll copy this and I'll piece this hello. H two. Okay? So this is hello one, and this is how two. All right. And I just need to call this so I can say create arrow multiple and uh simply add so you can see hello one, hello two. So you can have multiple lines of code as well in the arrow functions. All right. Now, let us quickly create and see different arrow functions in different scenarios, right. So how would arrow function behave if there are parameters, right? So we saw like this is how you can create without parameters, right? So with parameters, you'll simply add a parameter over here, Alright. So for example, over here itself, I can update this example over here. Okay. Let me duplicate this over here. Okay. Now, here, I can say param one. Okay. So it is having one parameter, so I can say name over here, right. And I'll simply convert this to template literal. Okay, because that's more convenient, and I can say taller and name over here, right? And now I need to pass in name here. Okay. So I'll say Crete arrow, and I'll say param one. Okay. And I can say John. Okay. And if I save this, you'll see, hello, one, John, right? So this is how you can pass in the parameters, all right. You can even pass in multiple parameters if you wish to. So I can say param two. So here we are passing in two parameters, so I can say H as well over here, Alright. And here, I can simply replicate this syntax, okay? Here. I'll make use of template literals, and here, I'll say H. Okay. And here, I'll just copy this. So we'll say param two, and I'm passing John, as well as 34 or 32. I'll save this and you can see hello one, John, hello two, 32, right? So you're passing in multiple parameters, and you're also having a function body, right? You can also get this one. Okay? So let me get this with a single statement over here. Okay, get arrow, I'll say one, I'll pass in name over here. Okay. And I can add name here. Something like this. Okay? Now, if I call this function, get R one or greet R one, okay. So great R one and I can pass in nada, okay? And if you save this, you can see hello Nadar, right? So here, this is a single line function, actually. It's not going on like multiple lines. This function is just having single line, and you can even pass in a parameter over here, right? So you can have single parameters, multiple parameters. You can even return values, right? So let me write in the example over here. Okay? So what I can do is I can say, let sum, and I would say is equal to, okay. So let me first create using normal syntax, so that we deduce it then to arrow functions. Okay. So here I can say s and Oops, I can say s, and here I can say E P, and this simply returns, E plus P. Okay. That is it. Pretty simple. And now here I can say sum, right? I can say 1020, right? And I'll put this entire thing in console log. Okay? So because we are simply returning and we're not printing anything, right? So it won't be shown on the console. So you can see we are seeing 30 over here, right? Now, if I have to convert this into a function expression, I can say let and I can say some over here. Okay? I'll keep the name same. Let's get rid of this. Okay. Now, this is a function expression. You can see 30. Now if I have to convert this into arrow function, how would I do so? So here, I can I can get rid of function first of all, Okay. And then I'll start seeing red marks over here, right? So you can see arrow expected. So here I can see arrow. Okay, and this is it. You can see this is arrow function. And I don't even need this over here. Okay, because it's just having single line of code, so you can see how this is. And you don't even need return keyword, by the way, if you're returning and it's just having a single line of code, you can see, is it. You know, This is it. I'll just add space. You know, this is it. So how clean is this? You're saying let's sum. This is a parameter, arrow, you're saying A plus B. There is no return keyword, so this is automatically being returned. It's understood that it will be returned or this value needs to go back, right? So how concise is this as compared to doing things the old way, right? It's pretty simple, pretty easy, and it makes the syntax a lot more readable and concise as you can imagine over here, okay? So return values is what I'll write over here. So I hope you have been able to follow along, and I hope arrow functions explanation was useful. 7. Empowering Objects: Harnessing Functions Within: So let us talk about how you can make use of functions inside objects. Now, let's say I have this object over here called person, okay? And I'm going to have a couple of properties over here. Okay. So I'm going to say Alice over here. Okay. And I can say go, g is 33. Okay, I missed a comma. Okay, I can say console dot log over here. Oops, and I can say so this is person thought H. Okay. Now, I can add pactics over here. I can convert this into template literal, and I can say, Hi, I am. Okay. And I can actually add an expression over here. Okay. Now, this will be name. All right, because name is what makes sense. And if I save this, you will see, hi, I am Alice. All right. So what we are doing is we're referring to the properties within the objects using dot notation over here, right? Now, you can have functions inside objects. Now, if you're adding functions inside objects, they are known as methods, right? So here, I can simply keep on adding statements over here, I can say my age over here, I can print in my age person dot H over here. Okay? But this is outside the object. So I can add this thing inside the object with the help of function, like I said, so I'll just cut this over here. Okay? And I'll first add a comma because methods that you're adding, like I said, function inside a object is known as method, right? So if you're adding a method over here now, okay, this should be comma separated because it's a attribute, right or a property, I should say. So I'll say Grit over here. I'll say function like this, and I'll add it over here. Okay? If I save this, nothing happens because I need to cold this. So I'll say Oh, I won't be greet. I'll say person dot Greet away. Okay? I don't need to call console dot log over here because I'm already doing console dot log within this method over here, right? So I'll say person dot Greg, and I'll see this you'll see hi I'm Alice, right? I'll just get rid of this one way. Okay? So this is doable. Now I'll call this object as person Alice. I'll replace person Alice over here as well as over here. This is working fine. Now I'll add one more person over here, o which is the replica of this object over here, and I'll say person John over here. Okay. I'll copy his name, person, John, person, John, and I'll duplicate this over here, and I'll say person John. You can see? Hi, I'm Alice. Hi, I'm John. Alright. So this is working good so far so good. Alright. Now, the way we have created functions over here is with the help of function expression, right? So you can get rid of the function over here, the function keyword, and you can convert this into arrow function. Okay? So what I can do over here is I can simply get rid of this and I can add this sort of syntax over here. Okay. I can get rid of this and I can make use of this kind of a syntax over here. Oops. This kind of syntax, right? So this will work fine. And if you save this, it'll work fine. No change in the output. So these methods have been created. All right. Now I can get rid of the curl press also, and I can make it look even more concise because I'm making use of arrow functions now, right? So I'm going to move to this syntax. Okay. And in the end, I'll remove the semicolon. Okay. If I save this, no change in the output. All right? Now, I also want to talk about one keyword that exists, which is this keyword. Now here, I'm seeing personalis which is this particular object name, right? But actually what I'm doing is I'm actually referring to name attribute or name property using this object name. This is not required. What I can do is I can simply make use of this over here. This is a keyword in JavaScript that is used to refer the current object, right? So if you hover on this, okay, you'll see this keyword type of global test. If I save this, okay? All right, it does not work because both are converted to arrow functions. All right. So one thing you need to remember is if you're making use of this keyword, it won't work in arrow functions, so you need to say function over here, and you need to save it. Okay, and I need to get rid of this. So I'll have to do a little bit of reversing because this keyword won't work inside this particular syntax over here. Okay. So I'll switch over to this kind of syntax again. Okay. So you can see, hi I'm Alice working over here. So you are now making use of this. If you hover on this, you'll see this is referring to name, g, and greet. If you change this over here, of course, it won't work because you just saw it won't work inside arrow functions. And if you hover on this, you are seeing like it's referring to global this. Okay? But this one is referring to this over here, o the other attributes in the object. All right. So you can see the output. The output is not proper. Okay? So I'll stick to person John over here. So one thing that you can take away over here is if you're making use of this or if your method within the object involves making use of this, then you should not make use of arrow function within the object over here, right? The syntax should not be used. You should make use of this kind of a syntax. All right. So I hope this is useful. Now, you can do a lot with the methods within the objects, okay? So if you come over here, what I will do is I will have a counterexample over here. Okay. Now what is counter going to do? It is going to teach you how you can pass in the parameters and how you can return it from the object, right? So I'm going to say const, or I can simply say let over here, counter. Okay. And I'll say value. So this counter has initial value of zero. Okay. And I can say increment over here. So this is a function that I'm creating increment function, and I'll say return value. Now value needs to be incremented. So you can see this dot value got added and you can increment the value over here. So I can say this dot value plus equal, and I can say one over here. Okay? And save this so far so good. Now if I scroll down, I need to invoke this over here so I can say Console, dot log over here, and I need to say counter, dot, I need to say increment. You can see it incremented by one, I can copy this. Okay, I can increment it by two, incremented by three, incremented by four, and so on, right? Now, this is an example of how you can return values from a method that is defined within within the I should say object, right? I'll show you one more example where you can accept the parameter and return as well. Let's say I want to increment the value by a certain amount. So I'll duplicate this. I'll add a comma. Here, I can say increment B and I'll I'll accept a value as num over here, and I'll add that value num over here. Okay? And I'll return the value. Now, here, what I should do is here, if I come, I can say increment Pi, and I can add ten over here. So ideally the output should be 14. If I save this, you can see the output is 14. So you are passing in this parameter and you are getting this as the output. All right. So this is how you can pass in the parameters and you can also get the return values from the methods, like functions within the objects are known as methods. So I'm referring to them as methods. Okay. But if you're creating methods within counter, this is how they'll work. All right. Now, one more example I wish to give you over here is of dynamic objects over here. Sorry, not dynamic objects, but I would call this as a way in which you can define methods dynamically. Okay? So defining methods dynamically. All right. So let's say I have a method. Okay, I'll call this dynamic method. Okay. Is an example of how you can create dynamic methods. So I have this, and let's say it has an attribute, I'll add one attribute, just like that. I'll call it value zero. Okay. What you can do is you can do Console Log and you can see dynamic method dot value. Eight. So this will give you zero, of course. Now, I've not added a method inside. You can add method dynamically after the object has been created. You can do that. Yes. How would you do that? So here, you can come. You can say dynamic method, tot. Okay. Let me scroll up so that it's visible. So dynamic method, tot, I can say, let's say say high over here and I can say function. Okay. And I don't need any sort of parameters. I'll say console dot log over here, and I'll say hello dynamic, right? And oops, I'll come down and I'll say dynamic method dot. I'll say Chi, something like this. You'll see the output hello dynamic over here. So this function or the method, I should say, method was added to the object dynamically after the object was created. So this is absolutely possible. Methods can be added to objects at any point in program, not just at the time of object creation. Keep this thing in mind, all right, you might see code wherein things are this way, so don't get confused. Okay, this is normal in JavaScript. All right. Now, this is about normal objects. I want to talk a little bit about nested objects as well, okay so how would functions work in nested objects, right? For that, we'll take an example of car. Okay. So I'll create a car object quickly. And let's say the car has a attribute called brand. It has it has brand as Toyota, okay? And then what I'll do is I'll say it has a nested object over here called specs. I'll call the attribute within specs to be speed. And I'll have a function called display specs. And so this is a method, actually, not function. Sorry. Okay. So terminologies, don't mess up with terminologies. I have a habit of doing so, but I hope you would call it method, always, because they are called methods within objects, right? So you can say speed is or you can just simply displayed speed over here. So I can say speed and I'll add you can say this tot speed. Okay. Now this is done. Now, how would you call this displaced specs, right? So it's an object within object, right? So I don't need to do console log. I'll just get rid of this. But I can say cartt specs, tot, displaced specs. You can see. So you'll see speed is 120. So this is how you can refer to methods that are created within nested objects, objects within objects. So that is how you can do things. All right. So I hope this is useful and I hope you have been able to follow along as to how things work with methods within the nested objects. All right. There is also one shorthand version. Okay. Now, let me show that to you. A right? So what I would do is I'll make use of existing object over here. Okay. I'll make use of existing object. Okay. So shorthand version over here. So this is I'll say person shorthand. Okay. I'll call this person as shorthand. All right. And now here, what we can do is instead of having this kind of a syntax over here, I can simply have function like this. Okay. So I'm not making use of arrow functions here. Keep this in mind, right. But I'll add a semicolon and this. Okay. And yeah, this is it. And you can make use of person shorthand over here. All right. And this should work absolutely fine. You can see. Okay, saying hi, I'm John because this is referring to person John. You can see this over here. Okay. So you can see, hi, I'm shorthand. All right. And this is a shorthand version, you might also see this kind of a syntax when working with objects. Okay? So methods created this way. All right. So this is one way, all right. Another way is using arrow functions, and then you also have function expression like this kind of a syntax, right? So these all are valid, and they would work absolutely fine. All right. So I hope it's clear to you all, and I hope this was useful. 8. Supercharging Arrays: Advanced Methods in JavaScript: Now, when you're working with arrays, there are a lot of inbuilt methods that Ja Script provides. And you can make use of these methods to work in a better way or to do a lot of tasks when working with arrays. All right. Now, we'll take a look at quite a few methods that exist, and you'll get a better understanding of what these methods are and how you can make use of it in your day to day programming. So here you can see this list, right. Uh, so there is this map, filter, reduce forage. We'll go through each one of them, right, and I'll explain everything one by one, right? So first, we'll talk about map over here. Alright. I'll just take this down, and I'll just take this to the new line. Over here and I'll just zoom in a bit. All right. Now what is map? Now, map method transforms each element in an array and it will simply return a new array. How does this work? Now, this transformation can be any of operation or any transformation that you want to do on every element of the array and you want to collect all the transformed elements again back in a array. Now let me give you an example as to how you can make use of map. Now let us say I have an array called numbers. All right. Let's say it's a simple array, it's having elements like one, two, three, four, and five over here. All right. Now, let's say I have a requirement wherein I want to do double every element in this array. Okay? So there are these many elements and I want to double each element that exists. So two becomes four, one stays one or one becomes two, actually, okay? Becomes four, three becomes six, four becomes eight and five becomes ten. All right. So what I can do is I can have a function over here, okay? So I can have a function called double over here. Okay. And parameter can be num over here. Okay. And I can say return num into two. Now, this is a function that is going to help me double every element. Now, how am I going to apply this function to every element of the array? Okay? So for that, what I'm going to do is I'm going to say numbers, which is array over here. I'm going to say dot. The moment you say dot, you'll see that these are all the methods that you have access to, right? And you have one method over here, which is map. So we'll say map over here. Okay? If you hover on this, you'll see calls it defined callback function on each element of an array and returns an array that contains the result. Okay? So I'm going to say map, and I'm going to pass in the function over here, okay? I'm going to simply say Okay. Right? Now what this is going to do is it is going to apply this function to every element of the array. All right? Now, the return over here is an array again. So what I need to do is I need to collect the doubled elements back in an array. So I need to say doubled or double numbers, something like this. Okay? And then I can say console dot Log over here. Okay. Oops, so I need to say console dot log, and I need to say double. Numbers, something like this. All right. And they should give the result. Now, you can see over here, two, four, six, eight, ten, right? So every element has been doubled. How did it work? It worked with the help of map function, sorry, map method within arrays. So we applied this particular function called double that we have created over here, right, to every element of the array. Okay? So you can even have a console log over here. Say console dot log, and you can say over here, you can print num over here. Okay. So you will know against which number this is being called. So you can see it was called on one, two, three, four and five. If I change this to 14 over here. And if I save this, you'll see this turn to 14. So it is being called for every element that exist in the array. Okay? We don't need this console log. Okay, we just started this for additional information, but this is how it'll work. All right. So I hope this is pretty clear as to how this is working and how map can be useful. Now, here we have a separate function over here, right? This is a named function. You can actually convert this into a nameless function or a anonymous function. Okay, so you don't need a separate function declaration for this. Now, what am I saying in how would you do that? Okay? So I won't delete this, but actually I would copy this thing over here. Okay? Now, this is an example of using anonymous, right? Anonymous function, right over here. So this is how we got the double numbers wherein we were applying this function to every element in the array using map, right? So I'll say double anonymous. Okay. And here, instead of passing in this function over here, what I can do is I can actually get this entire definition over here. I can copy this and I can paste it over here. And instead of double, this will be function. Okay. I'll be function keyword. Okay. So let me scroll down a bit and let me zoom out a bit. So you can see this syntax over here. I'm saying let double anonymous. So this can be any variable that you have, which can do the job of collecting arrays, okay? Arrays, as in this thing, this entire operation will return an array, right? So you need something to collect it, right? So I'm saying numbers dot map. And instead of passing in the name of the function, I'm directly creating the function over here. So I'm saying function, num, return num into two. That is what I'm doing straight away. All right. And then I can simply get this console log over here. And I can simply say double anonymous, and I can save this. The output that you get will be same. You can see, this is the output from the earlier piece of code, and this is the output from the current piece of code. Okay? There is no change in the output, but there is like the syntax that we have written this in this one. Okay? This is very concise. Okay, concise then the first one. Okay? So yeah, this is an example of anonymous function wherein we are creating a nameless function just for the sake of this operation. So when would you use this kind of a syntax, and when would you use this kind of a syntax? So if you want the function to be reused at multiple other places apart from this array, then you should have a separate function and you can make use of this kind of syntax. But let's say, if you are creating a function just for the purpose of the array transformation, then you can have that function like this. This is much more concise and much more readable. You can go a step further over here. I'll just duplicate this entire thing over here. Okay. You can go a step further and instead of like over here, anonymous function, I can see arrow function. So here, I'll show you an example using arrow function. Okay? So here, you can say arrow, okay, map function, and over here, we are seeing num, right? So this entire syntax will be converted into arrow function. So this function keyword is not needed, okay? And then this becomes the arrow function sort of syntax. Okay? And then instead of printing double anonymous, I'll print double arrow. Okay? You can see the output is same, right? Now, this syntax can be reduced even further. Okay? We don't need curly braces because there is only one statement, right? There's only one statement. So curly braces are needed? No, it's not needed, right? So I'll come over here, I'll get rid of curly braces, and this goes into a single line, right? Return is also not needed now. Okay. So I'll get rid of return. You can see. And this parentheses, round brackets are also not needed. I'll get rid of them as well. You can see how concise this is, right. So you can see just in this expression or just in this statement, we are actually transforming the entire array over here. If you save this, the output does not change. You're getting the same output, but look at the syntax people, right? This is the first syntax. Observe carefully. Separate function. You are passing in the function name over here, you're applying this function for every element in the array, right? You get the transformed element, you're printing it. You're making use of anonymous function where you are actually passing in this function over here. This is an anonymous function without name. You're applying this function for every element in DRA. And then finally using arrow functions, you can see the syntax is much more simplified, concise and easier to read. Okay. So you'll see this kind of syntax being used a lot. Okay, and a lot of people get confused and they don't understand what is happening over here, especially people who are new to JavaScript. All right? If you have good experience in JavaScript, then you might know what this is. But people who are new to JavaScript and coming in from different programming languages like Java, C plus plus, Python, okay? It's often difficult for them because, you know, this entire thing, you know, this entire thing got reduced to such a small expression over here. Right. So I hope this is pretty clear. I purposely went step by step. I showed you how this is being done first, how you can pass in a named function over here. You can see how you can have anonymous function and how you can directly have arrow function. Most subject tutorials cover directly arrow functions. Okay. So if you happen to learn about map method within RAS, they will directly cover using this syntax, right? But I wanted you all to understand and go step by step, right? Now, we can apply this kind of syntax to all the rest methods, right, because you've understood one, so you will find it really easy to understand the rest, right? So this is about map. You can do any sort of transformations, people, any sort of transformation. Like if you want to make this three X, or make this ten X, for example, you'll get ten, 20, 30, 40, 50, okay? Any sort of transformation, right? So this is about map. Now the next in the line or the next in the queue is filter. Okay? Now, what is filter? I'll just take this down. Okay? So filter will return in new array with elements that pass a condition. Now, there will be scenarios wherein you want to filter out elements in an array based on a certain condition, right? So in that case, you might want to filter out, right? And that is where filter comes into picture. Now, filter is a method that offers a very concise way of doing so. Okay? So let's say we have this array num okay with two, four, sorry. This is not the element. It's one, two, three, four, five. Right? This is what the array is. Let's say I want to get the list of even numbers. So I can say constant even numbers over here, and I can say numbers dot. I can say filter, something like this. And here, I can say num I can say num modulo two is equal to zero over here. Okay. And then you can simply print in the Oops. So then you can simply print in the even numbers over here. So it's something like this. Okay? So I get an error that N is not defined. Okay, it should not be N, it is num. Miss printing. I miss typing in Num. Okay. So you can see, this is a list of even numbers. So what is happening is, this is a test that we have mentioned over here, right? This is a test. So whichever element is passing this test is returned and added to this new array or it's filtered and added to this new array, right? And you're printing in this new array, right? So the entire array is filtered and you have a filtered array that is matching this condition, right? Now, let's say if you have three over here, so you will only get numbers which are divisible by three. You can see three over here. Okay. So this is how filter works, okay. Next method I have is about reduce. Now what is reduce? Reduce will do the job of reducing the array to a single value, right? Now, this does by applying a function, okay? And there can be many use cases if you want to add, let's say, the sum, if you want to get the sum of all the elements in an array, then you can make use of reduce over here. So I'll stick to our example of array, and let's say we want to get the sum of all the members in the array, right? So I can say numbers over here. This is what our arrays, I can say reduce over here. So I want to reduce this array. Okay. Now, I'll have to pass in the accumulator. Okay. So I'll say accumulator. You can see the syntax over here. You can get the previous value, Okay, and you can get the actual number. So I'm going to call accumulator over here and I'm going to see current value. Okay. So this is what I'm going to say, okay? And you can see the documentation of function that accepts up to four arguments, the reduced sum meta calls the callback function one time for each element in the array, right? So I'll say accumulator now what is an accumulator? So accumulator will accumulate the callbacks return value. Okay? So with every iteration, okay? With every iteration, we will have access to the current value, right? So when so let me scroll up. So when the iteration is with one, okay, it will take one into picture. It will add it to the sum. Then with the next iteration, it will add two to the sum. And whatever the sum is with every iteration, that is being holded by accumulator, right? Over here. So we are saying accumulator, current value, and over here, I'm going to say accumulator plus current value. Okay, that is it. And then I'm going to say console log over here. I'm going to log to Console, and I need to collect this into I need to collect this oops. So I need to collect this into a variable, let's say, let sum. And I'm going to have some over here. Now, if I say Save, you will see 15 SD output. All right. So I hope this is making sense as to how this is working, right? And you have some good clarity over here. Okay, so I took this to a new line and just so that it's actually visible to all of you, but it was not. All right. But yeah, this is what the entire method for reduce is. All right. Now, then we have for each. Now it is for each. So for each will execute the provided function once for each array element. Okay. So what I can do here is I'll just go to the new line. Okay. Something like this. And now I can say number. Okay, numbers taught for each, I can say. So for each element in the array, what I want to do is I want to print it, let's say. I'll get the output to the console, and here, I'll print this. Oops, I miss removing this, I'll save this. You can see one, two, three, four, five, so this is array, right? So this is how four each works. Any sort of function, you can apply to every element in the array. All right? We have something called as find over here. Fine will return the first element that will satisfy a particular condition over here. Okay? So that is what find is. Okay? And how can you make use of it? So let's say we want to get the first even number in the array, right? Let's say that is what the requirement is. So I can say numbers dot find over here, and I can say num over here, and it will be num percentage two is equal to zero, something like this. Okay. And I need to collect this into so I need to collect this actually, right into a variable so I can say let first even, I'll call this as first Steven number. And I'll say log over here, console log, and I'll say for Steven. Save this and you'll see the first even is two over here, right? So this will get the first element that satisfies a particular condition. All right. I hope this is clear. We have some over here. So some will check if at least one element passes a particular test, right? So that is what it will check for. And over here, I'm going to just make use of it. Now, the definition for sum says it will check if at least one element passes a particular test. Now, these are tests that you have to define as the function over here. And if the test is passed by at least one element in the array, then you'll get a boolean true, right? So this returns boolean. So I can say numbers over here, dot, and we can make use of sum over here. Okay. And I'll say num. Okay. And the condition that I want to check for is num less than zero, let's say, for example. Okay? So this is going to return boolean, so I can say let and has negative. Okay, so if it has negative, it is going to give me a boolean row of falls. I can log this and I'll say has negative. If I save this, you'll see falls. So this array does not have any sort of negative numbers. Okay. You can actually replace this to get an array of negative numbers. So you can say minus one, two, three, oops, three, four, and so on, right? So this has negative numbers, right? I'm greeting an array on the fly. If I save this, you'll get truSC output. So this makes sense as to how this can be used to check at least one element passes a test. Now, this is helpful in scenarios, if you want to run a quick check on the array and get a boolean, yes or no, and based on that boolean, yes or no, you might want to do something into the application. Okay? So that is where it is useful over here. Okay. Every. Now, every is just evosion of sum. So some will check if at least one element passes a test, but every will check if all the element pass a test. So I can actually duplicate this over here, and I can say, has or I'll just say every, all right. And I'll print this has every over here. And instead of sum, I'll have every. So does every element is every element less than zero? The output is false? No, because one element is every element actually. So the condition is is every element less than zero? So this is false. Sorry, I got confused a little bit. So because we have three elements that are not less than zero, one is less than zero, right? So this is absolutely fine. Now if I remove negative from this, okay, you'll see that gives gives fals over here. And that is because not all elements are less than zero. So to get true over here, I'll have to make all of them negative. And if I save, you'll get true because now all the elements are negative over here, okay? So you can run these kind of check with the help of every. You have concat. All right. So this is another interesting thing, okay? If you want to combine two arrays into one, you can make use of this. So let's say I have more numbers over here. Okay. More number is six, seven, and eight over here, right? So what I can do is I can say numbers or let me say okay, numbers, I'll say numbers dot concat over here and I can say more numbers, right? And I can assign this to new array, right? So I can say let new array, something like this. I'll print in new array. Okay. I'll say Console log over here, and I'll say new array. I'll save this and you can see, one, two, three, four, five, six, 79. All right. I can also add eight over here. I don't know why I missed it. So yeah, you have this, right? So yeah, this is concat. It'll concat to arrays, slice. So slice will return a portion of an array, Alright. Let me show this to you. So I can say let sliced numb over here. Okay. And I can say numbers over here. Uh, numbers, tot, slice, and I can specify over here that I want the beginning index from Index one to index three part of the array. Okay. Now I can log them, log it over here so I can say slice numb. You can see two and three. Okay? So two and three over here. So you're just slicing the array. Okay. Splicing now what is slicing? This will help you remove or replacing the elements. Okay. Now, how does this work? So let me show this to you. So let's say I have ARE of fruits. Alright, so let me scroll down. So I can say let fruits over here. Okay, I can say apple. I can have oops, I can have banana. Okay, and I'll have let's say orange. Okay. Okay. This is done. And let's say I want to, I want to remove banana and add mango. So I'll say fruits, tot, splice. Okay. I'll say at one index. Okay? So I'm specifying at one index, delete one. Okay. You can see delete count. So starting one index, delete one element and add mango. Something like this. Okay? And then if you print in fruits, you'll see the output as apple, mango, and orange, you can see. So yeah, this is how it works. Join. Now what does join mean? So sometimes there will be a requirement wherein you want to join and get all the elements within an array into a string. So you can absolutely do that. So I can say let all fruits. Okay, I can say fruits tat join and how do I want to join? So this is a separator that I want to add over here. Okay. So I'll add a comma. I want all the fruit names to be separated, and I can say all fruits over here. You can see apple, mango, orange. Now, whatever I add over here, if I add exclamation, you'll see exclamation being added for all the elements, right? So I'll stick to coma because that is what looks natural over here, right? Reverse. Now reverse is pretty simple, pretty straightforward. You can get a reverse of an number with the help of this method. So I can say numbers dot reverse. Something like this. Okay. And over here, I can say console dot log, and I can say reverse number. You'll get 54321. All right? In sort, of course, as the name says, pretty easy to identify and understand as well. Okay? You can sort the elements in an array, right? So you can say sort it. And you can say numbers over here, T, sort. Okay. And you can actually specify over here. So I'll just end this over here. Okay. I won't add any logic, then we'll add the logic, and we'll see what are the issues that we are solving. Okay? So if you make use of sort this way. Okay? Actually, the function that we have created is actually already sorted, right? So let me update numbers over here. Okay. So I'll update numbers. I'll say three, one, and I'll add ten over here and two, for example. Okay. And I'll see this. Now you'll see it's not sorted actually in the ascending order. Okay? Now this is because it is by default as string. So this comparison because what is happening is the comparison is happening in the form of string. So the numbers are not sorted in the right way. Now in order to get this sorted in the right way, what we can do over here is we'll add two arguments, using the arrow functions, so I can say A and B over here, and I'll make use of two arguments, and I'll say A minus B over here. Okay, this way. And if I save this, you will see one, two, three, and ten. So it is sorted over here now. But what magic did this logic do to this sorting thing over here? Okay? And how did it work? All right. So what happened is A and B are the two elements of the arrays that will be compared at any given point in time, right? And this comparison will be done by sort method over here. Okay. So these two arguments are passed first. Okay, two arguments are passed in these parameters. And then what has happened is A minus B is calculated. Now, if A minus B, now let's say if this is working on three and one, right? A is three and one is B. Okay? Now, A minus B is two. The number is positive. Right? So B will be sorted before A because if the number is positive, it means that B is smaller than A. So B will come first. If the number is negative, then what will happen is A will be moved before B, in that case, right? And if the return is zero over here, then the both will be considered as equal and they will be treated equally. Okay, so this is taken care by SOT over here. You just have to pass in this because with the help of minus over here, they are treated as numbers and not as strings. All right. So this is how sorting will work when you're making use of SOT over here. All right. So that's about the functions or I should say methods in JavaScript with respect to arrays, right? And this is how you can make use of it. So you can see how we started initially. We started with the basics like how you can pass in a function reference over here into map method. And then we converted this into anonymous, and then we converted this anonymous into map over here. Sorry, not map, arrow functions, I should say, right? And then we saw all the functions, all the methods that exist with arrays, right? So you can see sort, reverse. All of these are useful at some point in time when you're programming and working with arrays to save you a lot of time and a lot of code as well, making your code much more readable, but by helping you do things in a much more concise and readable way. All right. So I hope you have been able to follow along this step by step guide, and I hope this was super useful. 9. Project Spotlight: Build Your Own Unit Converter: Alright, so how are you all doing? So it's time that we build a unit converter that is going to do each job of converting a value to different units. So it's going to convert from one unit to another. If, for example, I enter 100 over here or let me to 110. And let's say I want to convert from meters to feet, I can get this converted, and you can see 110 meters is this many feeds. Now, I can say 150 over here. I can get this converted from kilograms to pounds. You can see this is now in pounds, and I can even get this converted from Selsius to fahrenheit. So you can see one 50 Celsius is 302 fahrenheit. So this is simple unit converter and pretty simple interface as well, nothing too fancy or chassi. All right. So let's go and build this out. So here I'm quickly onto VS code, and we have this HTML file, the CSS file and the index JS file within a folder. These all three files exist in the same folder. I have this HTML code over here and I'm going to start modifying this code over here. The title of this particular page will be unit converter here. I'll just get rid of this, and I'll have the same unit converter text up here over here as the H one tag. All right. Now what I need over here is first thing, I need a input. All right. So I'm going to say input from where I'm going to enter the value that I wish to convert. This input is going to be a number over here. The type is number. ID is input value because I need to refer this from JavaScript so that I can get the input values that the user has entered. I need to have an ID over here. I'm going to have a placeholder called Enter value. Oops, something like this, right? And I'm just going to close this. So input is done. Now, what I need to do is I need to have eight drop down, and for that, I'm going to make use of select over here, and I'm going to see ID as conversion type over here. So what sort of conversion I wish to do. Within this, I'm going to have option Okay. Now, option is meters to fit over here. The value, so I'm going to have value over here. The value is M to FT, right? So I'm going to have individual values to this, which I can make use of. So here I'll say meters to feet. This is going to be kilograms to pounds kilo grams to pounds. Okay this is going to be KG to LP. All right. And, uh, then this is going to be C Celsius. Okay. What I mean is Celsius to fahren height. Something like this. Okay? Oops. So, yep, I've corrected the spelling, and yeah, this is what it is. So it'll be C to F over here. Okay. This is done. We have this unit converter, the textbox, and this dropdown over here that you can see for selection of values, right? Now, once this is done, after selection and everything is done, I need a pattern over here, right? So I can say pattern ID is convert. Okay? This will be the ID. And I can have a text called Convert over here. Okay? So this is a button that is being displayed. And after this, I need to display the converted value as well. So I'm going to have a P tag, which is going to say, oops, I'm going to have so I don't need ID over here, but I can simply say convert it. Value is o I'll display the value inside a span over here. Okay? And I'll have zero initially, and I can have ID as converted. Value, something like this. Okay. So this is done, you can see, converted value is zero. All right. So that's it in the HTML. Okay. There's not much that we'll be doing in the HTML. Just make sure that you have the Ja Script file linked like this and you can also have the CSS file being linked over here. So I'll just have the linking for CSS, and I'll do it at the top. Okay. So within the head, I'm just going to have link over here. Well, I'll say style sheet. Okay. And I'll say href, styles dot css. All right. This is done. Okay, yeah, this is it. So this is it from the HTML part. Now, let's head over to the Jascript part, and let's see how you can build a Junit converter using JavaScript and add some life into this webpage. This webpage is pretty static right now. Nothing would happen if you end of values NC convert, right? Because there's no life. So who's going to add life? Jascript, of course. Now, first thing I need over here is different functions, right? So these conversions that I'm going to do, I need to have a way to do these conversions. And what I can do is for every conversion that I want to do, I am going to have a function created, right? So the first conversion that I'm having over here is meters to feet, then I have kilograms to pounds, Celsius to Fahrenheit. I have three functions, right, and I need to have a listener over here that listens to the button click of Convert. So that is something that we need to do. All right. So I'm not just going to have normal functions. Of course, you can do normal functions, but I'm going to have an object, and I'm going to call this as Unit converter, and I'm going to have the methods created inside this object, right? So I'm going to say M to F T, o? And I'm going to say function over here. Okay. And I'll just get rid of this here, the parameter will be so if it's meters to feet, so the parameters parameter will be in meters, right? And I can say return. I can say meters into. And how would you convert a meter to feet? So you need to multiply a meter by 28084, right? So this is standard formula. There's nothing fancy over here. Okay? So yeah, this is done. I am getting I'm getting an error right marks, it's because I've missed an equal to over here. Okay. So this is done. This is first method that I have M, which is meters to feet. I'm going to have KG to B over here. Okay? This is going to be another function over here, and this is going to accept kilograms because we're converting kilograms to that of pounds, right? So I'm going to say return. I'm going to say kilograms into. And we're going to multiply this value with 2.2 0462. So this is standard multiplier if you want to convert kilograms to pounds, you can just Google how to convert kilograms to pound and you'll find any number of formulas, I'm making use of this one. Okay? So this is a multiplier that you have C F. So this is for Celsius to Fahrenheit over here. I'm going to add function. I'm going to say Celsius, something like this, and then over here, I'm going to say return. There's a formula to convert Celsius to Fahrenit. I'm going to force multiply it by nine by five over here and I'm going to say plus 32, something like this. Okay. So these are all the functions, I should say. So we have created methods within object, and, of course, you can have these methods created outside as well as functions. Why have I created within object is for logical grouping purpose. Now, whenever you are having a jaw script program, you might create objects for grouping purpose, right? So here I'm grouping these methods together, right? So this is done. So I'll begin defining the listener over here, so I'll say document over here. Oops. This got converted into document. Okay. I'll say dot and get element by ID over here. Okay, and I'll say convert. Why convert? Because this is the ID that we have defined over here in the HTML for button, right? So that's what we need to refer to if you are referring to button over here and I'll say on click over here. Okay? So on click of this, we need to make use of arrow functions, and I'll have the logic as to what happens on click. Okay? Now, logic can be as simple as displaying an alert. Okay? If I save this and if I say convert, ok? There's no alert box being displayed. So it's not working because here, the C for click cannot be caps. It has to be small. It's a small small word. Okay? Everything is in small on click. Now if I change this, it'll work. You can see. Now, we need to have the logic over here. Okay? So this is being triggered on the click of the button. Okay. So what is the logic? How will we define the logic? So first thing is we need to see which option is selected out of this. Okay. So out of this dropdown, which option is selected, right? Then once we also have this, we need to get the input text value over here because that is a value that we are going to convert. So the input text value and the option from the drop down. These two things we need to get over here. Okay. So I'm going to say let input value over here, and I can say document dot. I can say get element by ID over here. Okay. And I'll say input value. Okay. What is input value? Input value is the ID that you have assigned over here. That is what we are getting here. Okay? This is done, and we'll say dot value over here. Okay. We have this over here. Now, this would be in string by default, right? You need to make use of this for calculation, right? Because you'll be passing this value into this function. So what we can do is we can do an explicit conversion over here. We can say pass float and oops, you can come over here and here, you can this, something like this, right? So we have a float value of whatever user has entered into the textFx. All right, this is done. Now I can say let conversion. Type over here. What is the type of conversion? What sort of conversion you wish to do over here? So I can say document dot get element by ID. And I'm going to refer to conversion type. Okay. Now, what I would recommend is over here, you should copy. So here you can see, this is the ID. You can copy this ID and add it over here. Okay, rather than typing. Because if there is a single mistake, you won't get the value correctly. And I can say value over here, right? And then over here once we have this, I can display this in alert. I can say input value, comma, I can say Cosion type. Something like this. You can see NN I can enter 100. You're seeing 100 over here, let me congatenate these two. So I can say something like this. Okay. So if you add 200, you'll see 200 and meters to feet, right? If I switch to kilograms to pounds, you'll see KG to LB, right? Because you're getting the value. Over here. What is the value? The value is something that you've defined over here against the option. Every option has a value and you are referring to the value over here in HTML. You can see Celsis to fahrenit C F. So you're getting everything perfectly, even if you enter, let's say, if I enter a floating point value, you'll get that entire value over here. Okay? So far so good, so we are able to retrieve whatever the user is entering into what we call the form over here, right? Now, what I will do is I can I can add I can add a variable over here. So I can say convert it. Value. So what is the converted value by? Okay? So I can say converted value. Okay, and converted value is equal to, so I can make use of conversion type over here. Now, I'll have a condition if conversion type is equal to M two FT. Okay? If conversion type is equal to M to FT, I'll say unit converter to FT because this is a function or the method name, I should say, I'll pass in input value. Okay. Else, what I would do is here. Okay, else, I would have another check over here. I'll say conversion type is equal to. I'll say KG to LP. Just be sure to have these keywords correctly. If you want, you can copy it from the HTML file. But any sort of typo will get the condition wrong. Okay? So you can say unit converter tag you can say KG to LB over here and you can pass in input value. Something like this. This is done. I'll have e colon over here. Now here, if both are false, if there is no match for both, I'll have Unit converter taught C F because this is what is remaining, right? So it has to be distinct selected. So this formula is done. This condition is done. What we are doing over here is we are having a check over here whether the conversion type is meters to fit. If that is true, with the help of ternary operator, we are doing this call over here, this method call. If this is not true, then we are having another ternary operator over here. Which is nested. So we're having another check. If this is true, if this is true, then this is executed, else, this is executed because this is what is left, right? So it has to be either one of these three, right? Now here, what I'm going to do is I'm going to say document, dot, get element by ID, and over here, I'm going to say converted value. Okay? Why converted value? Because we have this ID for span. So we are going to get this converted value. Okay? I'm going to say dot text content. Something like this. I'm going to say converted value over here. Okay? Because that is a variable that is having this value created, right? So this is done. Now what I can do is I'll save this and let us test this. So if I say 100 meters to feet, convert, you can see. There's the output kilograms to pounds. There's the output. If you have Celsius to Fahrenheit, there's the output. You can see. Now, one improvement you can do is there are three decimals or there will be number of decimals because there is no restriction. So you can add tot to fixed over here and you can say over here, something like this. So now it will be fixed to two decimal places over here, 220.46. Okay? Something like this, over here. All right. So yeah, this is about this is how you can build a currency or sorry, not currency. This unit converter. I'm sorry. All right. You can have some validation over here so you can say if this is not equal to not a number. Okay. Sorry, is AN. Then I need to pass input value over here, and then you would run this, o. Then you would run this, you will move this closing phrase in the end over here, something like this. Okay. And I'll add like this over here. Okay, this is done. And if this condition fails, then you can display an alert. Okay, please enter a valid number. So a small validation over here, validation check that will make sure that whatever user is entering over here is a valid number. Okay? That is what this check will do. Okay. So let's say if I enter 100 over here, it'll work fine. But if I entered 100 or anything else over here, I'm not able to type anything over here because this type is number. But still I added this check over here. If by chance, this is not a number, I Nian condition, so it returns a boolean value that indicates whether the value is a reserved value Nian, not a number. If it's an, that is not equal to, so if this condition is true, then only this will be executed, else you'll get an error. Over here, which is an alert. All right. So this is done so far. Now, we'll switch over to styles over here. We'll add some basic styling and we'll make it look decent over here. Okay. So I'll just start with Body over here. Straightaway, I'll say font family. I'll select Sinef over here. Okay. Something like this. And then I have text align over here. I'll say center. I'll say margin, margin will be zero. Let me see if this. You can see everything is centered now. Margin is also zero padding, I'll say 20 pixel over here. I'll say background color is I can have this Alice blue. You can select whichever you want, okay? Little bit of bluish theme I have. If you want white, you can select white smoke. It's totally depending on your choice, right. You can select whatever you want over here. Okay. This is done. I'll add a space. Now after body, I'll come to H one. H one is where we are displaying that unit convert a heading over here. So I'll say color, and I can have black. I should have black over here. I'll just stick to black. You can customize this if you wish to, all right. Now for input, input where the type type is number, okay. So okay for this and I'll add a comma for select over here. Okay. For both these, like, I need to add, let's say, padding. Okay. So there's no padding. So if you enter 100 over here, there's no padding, so I'll say padding, colon ten pixel. Okay. You can see some decent amount of padding, you can add margin over here. Okay, margin of ten pixels. Okay, you can see a little bit of spacing there now. Okay. And you can say border over here. So border is one pixel, solid, and I can say hTD. So this one color code that I use for border, you can see, it's grayed out, sort of. Okay. And I can say border radius. So I'll just give it a round sort of feeling. Okay, so I'll just add five pixels. So the borders will be rounded now a little bit, slightly rounded by five pixels. Sorry, slightly rounded by five pixels over here. I'm sorry. Okay, this is done. Width, I'll add Widts can be 200 pixels over here. Okay. So it's done for both of these, okay? For button. Okay, button looks raw right now. So let me let's do something for button over here. Oops. For button, I'll say padding first, padding of, I'll say ten pixel and 20 pixel. Okay. Then I can have background color hoops. So this needs to be semicolon, background color. Okay. Background color can be, I would say blue. I'll see if this, you can see, blue, but the borders look bad. Okay, I should say. I'll have border as nun maybe. See if Yep. Boda is nun. I can say color is white. White where it's white over here, you can see convert white. You can have border radius, border radius, I can say fi pixel because I've given that for the other elements. Okay. Now, curso if you hover on this, I want this to be changing, so I can say cursor pointer. So now if I go over here, you can see cursor turning for pointer. Okay. This is done. I can also add a hover effect. So button, colon, I can say *** and I can say background color. And I can have dark blue. So if you hover on this, you'll see dark blue. Sort of an effect, right. Now this is done, and we can have e tyling for the display, which is for P tag. That can be font size. I'll just increase the font size to 18. I'll just change it to 18 and I'll have margin of let's say ten pixels. If you save this, you have this. Okay. Now, I'm zoomed in a bit. Okay? So I'm zoomed in a bit. You can see over here so that students can see it properly, but you can see the output over here. Okay, so it's looking pretty decent now. I also opened the application in the full screen mode, so you have a better view. Okay, 2,200 and you can see the conversions over here, right? So this will work fine. Okay? It's looking pretty decent. You can customize the CSS based on your requirement. You can change the color depending on your color preferences. Alright? So that's about the unit Coto using jaw Script. I hope this was super fun. 10. Project Showcase: Create a Dynamic To-Do List App with JavaScript: Alright, so it's time that we talk about to do list application using JAScript HTML, and CSS. So here you can see this application that we are going to build, and you can see there is one to do already added learn Ja Script functions. All right. I can add more todos from this input box over here. I can say, learn spring boot, and I can say add task. I can bring groceries. Okay. Something like this. And you can add the tasks. You can hole on these, and you can mark them as done as well. All right, so this is a simple application that we are going to build. We're going to make use of JavaScript, HTML, and CSS. All right? Excited, let's jump right in. So here I am in Visual Studio code, which is the editor that I'm going to use. I also have this browser open in the side with Live Server. I have three files open index dot HTML style dot css and index dot Gs. Now, before moving forward, just make sure that these three files reside in the same folder. All right. Now I'll begin with the HTML file. First, I'm going to add an exclamation. Oops. I'm actually in JavaScript file, so I'll come to HTML file. I'll add an exclamation, and I'll get some boilerplate code over here. Alright. So over here, I can give the document title as to do list application, okay? Something like this. All right. And you can even have E H one tag over here as a title. Okay? So I can say H one. And you can say to list over here. Okay, something like this. All right. Now, we're going to need two things over here. One is input and other one is ePaton, okay? So I'll create a div first, and I'll have an input over here like this. I'll call this as oops, sorry, type as text over here. Okay. ID is the ID is task input. I need to assign it ID because I'll be referring to this element right from Ja script so that I can get what user has actually entered over here. I'm going to say enter your task, something like this. All right. Now on the next line after input, I'm going to have a button over here, right? So button will say ID, and I'll call this as add task over here, something like this. And then this will be add task, something like Okay. This is done, and then I think we are all good over here. Okay. Let me see. We're not seeing any sort of output here. So I see the output now after refresh, all right. And yeah, so this is the input and the button, we're going to keep HTML very simple. Okay, I have input button, and I'll have a unordered list created over here, which will be used to render the task list. Okay. So I'm going to call this as task list, something like this. Okay? Over here, script under script tag, I'm going to have SRC, and I'm going to call this as I'm going to link it to Index Gs over here. And at the top, I can have style sheet over here so I can say link, RL, I'll say style sheet. Okay. And I'll close this. I'll also mention F tag, and I'll say styles dot CSS. So far so good. Okay, so HTML is done. We've kept it really, really simple. You can see, this is the container over here, which is holding the input type and the button. Okay? I can assign this an ID over here so that we can later use it for styling. I can say task container over here. Okay. So this is the contin of the task over here where I'm having input and button. This is where all the action happens. And then I have a unordered list where I'm displaying the list of items or list of to dos. This is done. Now I'll come over to Index GS. Okay? This is a JavaScript file where we are going to write some code that will help us bring some life into this HTML. Okay, so this literally does nothing as of now, Alright? So first thing, what we will need is we'll need a way to store and manage our to do list, right? And we'll also need a way, essentially to listen to this event. So whenever the user clicks on at task, we have to make sure that the task is added into the application. Once the task is added into the application, we'll have to also render it. Okay. So things like rendering, addition of task, okay, marking the task as complete, all of this will be managed within the application itself. So what we will do is we'll have an object, okay? So I'll begin by creating an object. I'll say to do app over here. Okay. And this is how I'm going to create it. Now over here, I'm going to have an array, because the application can have multiple tasks, right? So I'm going to have an array, which is going to be used to store tasks over here. Now, I'm going to have a few methods over here. One is at task, okay? So this is the first method over here. Okay. Then I'm going to have another method, which is toggle task. This is going to be used to toggle. So if you say this task is done, if you click on the task, it is going to be marked as done. If you click again, click on it, it is going to be marked as not ten. Okay? So it's basically toggling over here. And here, this function or this method is going to accept index over here. This is done. I'm going to have remove completed tasks, okay? So this is also we can have so I can say remove completed tasks. Okay. And, uh I'll have this. Okay. So this is going to help us remove the completed tasks, okay? And I'm going to have a method for rendering tasks over here. Okay? So I'm going to say render tasks, something like this, and over here, this is how it'll be. All right. So this is done. Okay? This is how the object will be. This object will have the attribute for task for storing task, and all the methods basically to manage tasks, right? Now, what I'm going to do is I'm going to say document over here, thought Oops, document tot. I'm going to say get element by ID over here, and I'm going to say at task over here. What is at task? At task is the button over here. Okay? You can see this is a button. So we are getting the button, and on the button, I'm going to say on click over here. Okay. I'm going to make use of arrow functions, like so. And here, I'll have the logic as to what is supposed to happen when a user clicks on the task over here. Okay, on the button, I mean, okay? So here, first of all, I can display an alert. I can just test whether this listener is working fine. It should. So if I say add, Okay, it's not displaying, it's because this is capital. I'm sorry about that. Okay. So here you can see, hi. Okay, it's working fine. So this is getting triggered on the click of the button. So far so good. Now, what are the tasks that we need to do within this listener? First thing, we need to get what is entered in this task. How will we get that? We'll get that from this input. We have this ID task input, right? Then once we have the text that is entered over here, we are going to call at task and get that task added into the tasks array, right? And then we are going to reset this input box to an empty string because it's cleared because the task is added, right? So what I will do is, I'll say let task input over here. Okay, I'm going to say document dot, get element by ID. And let me get the task input over here. Okay? So I'm going to say task input. Be sure to have this ID reference. This ID reference should be same as the one that you've defined over here in the HTML. All right. So this is done. This is taking care over here. Okay. Now, what I need to do here is, okay, this is done. I'll come over here. I'll say to do app dot at task, and I'm going to say task input, dot, value. Okay. So what I'm doing is I'm saying task input. So this is the element that I got, and I'm saying dot value. Yeah. Okay. And then I need to reset this over here, this field over here, right? So I'm going to add an empty string, something like this. This is going to clear the input field, right? So I can say test at task. You can see it's being cleared, but it's not being added right now. Why? Because this function or this method has literally nothing. It's an empty method. Okay? We need to define all of this. We are yet to define all of this. All right. So now what I'll do is I'll I'll begin with the ifstreatment over here. Okay. If there is a task, or I can if you want to validate, you can add a check over here wherein you check if the task exist. Or what you can do is you can straightaway say this dot task, sorry, this dot tasks dot push over here. So we need to push or add this particular task to this task over here. Okay? And here, I'm going to say text, Colin Okay, so this is the task, and I'll say completed. Is it completed? I'll say falls over. Okay? Something like this. Okay. And once this is done, I need to call render. So this dot render. Something like this. Be the UI needs to refresh, right UI once the task is added, the list of the task should refresh, and that is why I'm calling this dot render over here. Okay, this is done. So basically ask every individual task in this array has two things. One is task itself and whether task is marked as completed or not. So far so good. We need to now toggle the tasks. Okay? So what we will do is we'll say this dot tasks. I'll get the task from the index over here because we have access to the index. I'll say dot completed. Okay. So this will be the reverse of whether it's completed or not. I'll say this dot tasks, and I'll say index over here, dot completed value. I'm just reversing this value over here. So whatever the value stored in the completed attribute of that particular task is reversed and assigned again. That is what is happening. That is it. Now, after making this change, I need to render the interface, right? So render the UI over here. I'm going to say this dot render tasks. Something like this. This is done. I need to remove the completed tasks. Okay. So what I would do is I would say, so we can make use of filter over here, right? So you can say this tot tasks over here. Okay? And you can say this dot tasks, tot filter over here, and I'll say task over here, use arrow function, and I'll say if task is completed. Something like this. Okay. So whichever task is completed will get removed and I'll say this dot Render tasks, something like this. Okay. Now, how would you render the task, right? So for that, what we will do is we need to render the task over here in task list, right? So what I would do is I would simply copy this to save some time. Okay. And over here, I'll say task list. Okay. And the ID over here is task list, right? So I'll add task list over here. Okay. Task list is added. Now what we need to do is Okay. So here, I'm going to have I'm going to actually clear the current list. Okay? First, first, we need to clear the current list. I'll tell you why I'm doing this, okay? It'll be clear to you in a short while. HTML is equal. So I'm clearing the current list first because we are rendering the task again, right? So if you don't clear the inner HTML, if you don't clear the current task list, the list will be duplicated, right? I hope this makes sense. Now what we need to do is we need to say this dot tasks that for each over here. Okay. And within this, I'm going to have a function, and I'm going to say task index. So task and index over here is something that is going to be passed. Okay. And I'm going to have arrow function. Okay. And within this, I'm going to say const Li Okay. And I'm going to say document dot get element by ID. Sorry, I won't be get element by ID because we've not created LI. So within UL, you will have LI elements, right? So I'll say create element over here. I'll say create Li over here. Okay because you want to render it as a list. And then I'll say Litt text content. And then I'll say task dot text over here. Okay. And then I'll say I dot on click over here. Okay, we also need to add on click to the list over here because on click of that, the task shoot toggle, so I'll say this dot toggle task, and I'll pass in the index of the click over here. This is done. Okay. Now, I'll say if the task is completed, we'll be here. Okay. Then you can add the I'll i dot class list. So I'm adding the class over here. Okay, dot add. I'll say completed. I'm adding a class to this HTML element if the task is marked as completed. Okay? So here you are adding class like ID class over here for CSS. That is what I'm adding here from the Javascript. So you can say element dot class list. You are adding this to the class list, completed. And then we can have CSS against this. This is making sense. And then over here, you can say task list over here, tot up and child. Something like this. I'll append this into the UI. Okay. Let us test this. I'll say test. You can see test is being rendered 100. This is also being rendered. Okay. So this is being rendered twice over here. There is this was rendered twice. So there is a problem. Okay? So the issue is the HTML is not getting cleared over here. Okay? So I hope you get the importance of this statement over here now. This is not working actually. And you can see the entire list is getting rendered again. So if I add 200 over here, you can see test, 100, 200. It's re rendering everything. Okay, whenever you are adding the task. So it won't be this.in HTML. It will be taskls dot HTML. If I save this, I can say test. It's added test. If I see 100, it will add 100. You can see it's working fine now. All right. Now, the tasks are also being marked as completed, but the completion thing you'll have to handle in CSS because there is a class that is being added, o over here. If you take a look at the class, Okay, let me show you. So here you are seeing the Li over here. It's 100, right? In fact, click on this 100. Okay. The class is not being added here yet. Okay? It should get added. So actually on click of this, completed should be added as a class name over here dynamically. But this is not happening. Let's see what the issue is. On click, we are seeing that toggle tasks, and for every completed task, the class list should be added. This is okay. Okay, over here, I see this is capital C. This is not right. This should be small. Okay. Now let's see what happens. So here there is no task over here. Let me add a task. I'll add test. Okay. I have one task. If I click on it, you can see class is completed for this. You can see. Now if you add whatever CSS for the completed class, you can add the CSS of strike through. So it will appear as strike through, because you have applied that CSS. You just need to say class for elements, having class this completed. Okay, you need to add that sort of completed effect in the CSS. All right, so it will be managed. Okay? So application is almost done, okay? We are done with the application. You can see everything is being done. All the functionality is working fine. Okay. Now we'll head over to CSS, and we'll add some basic styling into our application. All right. Now we'll begin with the body tag over here. Okay? Of course, font family, and we'll see Ariel Helveta, Albatica and Sansa. If this is okay, okay, text or line. I'll say Cena over here. I'll add Oops, not max resolution, but margin over here. I'll say zero. Okay. And let me add padding. I'll say 20 pixel. Okay. Let me see and see what happens. Okay, a little bit of change. Oh, you can add background color or whatever you want. I'll add is blue. Okay. It looks a little bit bluish. If you want something else, uh, like over here. See. So antique white. You can add this also. Okay. Depending on your choice, whatever you wish to. Or display, I'll keep display to flex over here. Okay. Flex direction is I'll say column. Okay. And then align items, I'll say center. I'll save this. Okay. This is done. Each one. Okay. So each one, I'll just explicitly assign it a color. I'll call this color as black. Okay. This is done. All right. Now, let us come over here. I'll see this. If you come over here, there is this task container. I'll get this task container ID over here. Okay. I'll say hash. This is how you refer to any elements ID in CSS with the help of hash. Okay. I'll say display flex, and we need to add we need to justify content. I'll say center. Okay. So this now comes in single line, as you can see here. And I'll say margin bottom. Okay. And this will be 15 pixels. Okay. So this is actually not a full screen view, but if you head over to the full screen view over here, if I refresh, you can see this is how it's appearing right now, and I can just add a task. You can see. Okay? So yeah, this is how it's looking right now, margin bottom. Okay, this is done now. I can add some styling for input over here. Okay. I'll say type type is equal to text, something like this, and I'll say over here, padding ten pixels. See if this, okay. I'll say width over here, width is 200 pixels. Okay. I'll say border. Okay, border can be one pixel. Okay, there's no border now, you can see. Okay. Now, one more thing is, I think I should also optimize it for smaller screen size. Okay. What I will do is I'll add media query over here, media and say over here. So it will be max width. Okay, something like this, and it will be so max width of 600 pixels. Okay. So I'll add some styling over here for the same, right? So I can say hashtag task container. Okay. I'll say flex direction. I'll say column over here so that it becomes vertically aligned when basically the screen size is smaller. So button input box is vertically aligned because it was not looking good, o, horizontally, basically side by side view, right? So I just added this. So it's horizontally aligned over here, sorry, vertically aligned when the screen size is small, but horizontally like this if the screen size is wide. Okay? So when the screen size is small, this CSS is applicable. Okay? I can even add CSS for this over here. Okay. So I'll input type text width is padding I don't need. I'll skip padding. Width is 100% over here. Margin over here. So I'll say margin is five pixel and zero. Uh, like this. And I can say UL. So the unordered list can be width, 90%. Something like this. Okay. So this is done. Okay? This is for small screen size. I'll come back over here. Okay. So I was saying powder of one pixel. Okay. I'll say solid over here, and I'll have this border over here. This looks fine, right now, you can see. It's looking fine. Okay? We need to add some more things like radius. Okay, radius of five pixel, for example. Okay, five pixel looks decent in my opinion if you save this, right? And I'll add margin so margin over here, margin of, let's say, ten pixels. Okay. This is done, I guess. All right. Input is done. We'll now style the button over here. So how do we style button. Okay. So button we can say, uh, padding, I'll say ten pixel and 15 pixel over here and background color of blue. Okay. And then color of white. If you save this, you can see. But body is not looking good, so border will disable none. Okay, border gone. I can have border radius over here. Okay, F pixel, like this. And then I can have cursor pointer. So right now, it's not turning itself into a pointer. But if you hover now to see, this cursor is becoming a pointer. Okay. And I can even add button button Colin hov effect. Okay, so I'll say background color. Is dark blue. Okay? So if you hover, it's going to come as dark blue. Straightforward. Now, I'll add some styling for endured list. I'll copy this. Okay. And here, we'll have width as 50%, and I'll say list style type as none over here. Okay, so I don't want those dots to come over. So I'll say list style type, none. That does not look good. I'll say padding as zero. Okay. Fit is 50% and margin is zero. Auto. Okay, this is done. And yeah, I think this is it. We just need to add one CSS for completed. Okay. So I'll say completed. Item over here. I'll add this task, and I'll click on it so that it's marked as completed. All right, so I'll say completed. Okay. So I'm referring to completed class like this dot completed. That is how you refer. I'll say text decoration, so I need to strike through, right? So I'll say over here, line through. That is what the property name is. Okay, so both get strike through, I guess both are marked as completed. So I'll say test. Okay, this is not completed, and I can say complete it. Task okay. These are some dummy tasks that I'm adding. If I click on this, you'll see this is completed. Okay? If I mark this as completed, you'll see this is completed. Okay? So this is working fine. Text decoration completed. I'll say color as grey. Okay, something like this, this should look decent yeah. Okay. I guess this is looking okay now, right? I can add more. Okay, so the task is being added. Okay. You can see. We also can add styling for each task over here. Okay. So what I can do over here is after UL over here, I can add LI. Okay. I can see styling for every task could be padding ten pixel. Okay. I can add border over here, border of one pixel, solid, and I could call this as white smoke. You can see. Okay, this is actually not looking that good. So I have a color code, TTT. I'll add that. Okay? But this is not then looking good on the background, if you take a look, okay? So what I can do is I will scroll up over here, and I'll change this background to hash I can say a four, a four, four, something like this. Okay? Sort of white bluish color. This looks decent now. Okay. So over here, I need to add radius. Doesn't looking too square to me, too squarish, right? So what I can do is I'll add a radius of probably five pixels. Let's see. Okay. Radius of five pixels. Save this. Okay. And then I can say margin over here. Five pixels and zero over here. This is looking decent now. You can see. Also, if I hover on this, ideally, I wish to have the cursor pointer. I'll say I Cursor. Pointer. You can see got a pointer coming in, right? So it's looking great now. Okay? At least decent, I would say. Okay. I'll just refresh this and you can have default task also added over here if you wish to. So here in JavaScript, what I can do is I can I can add I can call the method. Okay, so I can say todo app dot at task over here. Default task is learn JavaScript. Something like this. Okay. You can see. So it's added now. Whenever you load the application, this would be the default task that is added. Okay? And you can add task or learn C shop, for example, learn Java. Okay, you can mark them as complete. So I hope this is useful and I hope you enjoyed building this Studo application with me using, of course, Ja Script, HTML, and CSS. 11. Course Conclusion: And that brings us to the end of this amazing course wherein we explore endless possibilities with Jascript functions. Throughout this course, we delve deep into the heart of JavaScript functions, wherein we explore every bit of functions from the very basics to more advanced topics such as parameters, return values, function expressions, and arrow functions as well. We even ventured into the world of functions inside objects and arrays methods, ensuring you have a comprehensive understanding of how to write modular and efficient code. But our journey didn't stop there. We also did a couple of hands on projects where we saw every knowledge or everything that we have gained in this course into application. And these projects not only reinforced your learning but also equipped you with practical knowledge and understanding. And these projects are such projects that you can even use it in your portfolio. Remember, the mastery of any programming skill is just a beginning. The true power of JavaScript lies in continuous experimentation and practice. I encourage you to keep building, keep refining your code, and keep making use of things that you have learned today into the projects that you build. Thank you for being an engaged and enthusiastic learner throughout this entire course. I hope you have gained enough confidence in your job script skills and are excited to tackle even more challenging projects in future. With this class, you have a class project that you'll find in the project section, which I would encourage you to complete and share it with the entire class over there. So that's the end of our journey together, happy coding, and all the very best.