#36 What are Parameters and Arguments? | JavaScript Full Tutorial

what is going on guys you're watching dev dreamer and this is lesson 36 in our javascript series in this lesson we're going to be learning all about function parameters and arguments if you enjoy the content don't forget to like and subscribe down below also be sure to ring that bell and choose all notifications so you never miss an update [Music] okay so welcome back to lesson 36 so in this lesson then let's learn all about parameters and arguments let's start with parameters so we can make our functions dynamic by adding parameters we place the parameters inside the function parentheses we can then use these parameters inside the function called block so let's make sense of all this by looking at some code so first of all i'm going to create a function declaration so we have a function keyword the name of our function so let's call this fav game then we have parentheses and then we have curly braces now inside this parentheses you see the word params which is short for parameters and as mentioned this is where we want to place our function parameters so inside here i'm just going to get rid of this and type in the word game so our parameter for our fave game function is called game and now what we can do inside of our code block is use this game parameter very much like we would use a variable so in here i'm going to say when the fav game function is involved let's console.log the following so i'm going to say console.log and now we can pull this parameter in just like we would do a variable so here i'm going to say dollar sign curly braces and then the word game and if you notice here in vs called when we're not using that parameter it's actually grayed out and when we do it lights up as normal okay so we've got a function here called fave game it uses the game parameter and this function console logs my favorite game is game let's go ahead and invoke this function so we're going to say fave game with the parentheses as normal but now when we invoke the function we need to provide some sort of data that will be substituted for game so here we're looking for a string okay because this is a string here and so in here then let's just say sonic 2 okay let's go ahead and save and in the console then we get my favorite game is sonic 2. so what's happening here then is we're using this sonic 2 value or string and we're using it as a substitute for our game parameter which is why we get my favorite game is sonic 2. let's go ahead and invoke it a couple more times let's get rid of these and let's change this for skyrim let's go for fallout 3. okay let's save and in the console we got three console logs my favorite game is sonic 2 skyrim and fallout 3. so as you can see each time we've passed a different value inside of our function invocation and that value has been substituted for our game parameter so you can probably start to see how powerful parameters are and how they really make our functions dynamic so that's what parameters are now what about arguments well when we invoke a function like we've done here one two three times and we pass values to it like so these values are known as arguments okay so our arguments here would be sonic 2 skyrim and fallout 3. so parameters are the values inside the actual function definition appear and then when we call that function the values passed in are called arguments so to clarify then although you might hear these two terms used interchangeably there is actually a subtle difference parameters are set when the function is defined and when a function is invoked it's provided with arguments now you're not just limited to a single parameter we can specify multiple parameters separating them with commas so let's take a look at a new example let's go to this and instead let's say function ninja turtle and for the parameters we're going to say name and weapon and as you can see they are comma separated so we've got name comma space then the second parameter called weapon now in our call block we're going to console.log the following we're going to say again let's use template literals dollar sign curly braces and we're going to bring in our first parameter here so we're going to say name uses the weapon so as you can see here then we're using both parameters we're using name here and we're using weapon here let's go ahead and invoke this function now so we're going to say ninja turtle and it's provided with some arguments the way that we provide arguments for multiple parameters is in the same way so these will just be comma separated so here i'm going to say donatello and then we'll say comment space bo staff and this will be the weapon so let's just go ahead and save and you can see that that works so in the console we get donatello uses the ball staff so when we supply a list of arguments like we're doing here these arguments are assigned to the parameters in the order specified so the first argument gets assigned to the first parameter in this case its name and the second argument gets assigned to the second parameter which is weapon another key thing to note is that javascript functions do not check the number of arguments received so for example let's say we didn't provide any arguments here let's get rid of these let's go ahead and save and in the console we get undefined uses the undefined so if a function is involved with missing arguments then these arguments are set to undefined and you'll see that even if you provide a single argument here such as say don't hello the first parameter of name was assigned however the second one was not which is why name gets a value of donatello and weapon gets a value of undefined so if a function is involved with missing arguments then these are set to undefined let's take a look at another example we'll go for a numbers example now so i'm going to say function let's call this add num1 and num2 and over here we're going to console.log num1 plus num2. so down here we can say add and let's just go for the numbers five and two let's save and in the console we get seven if you only provide a single argument for num1 the console returns not a number and that's because num1 has the value of 5 and num2 gets the value of undefined because we haven't passed an argument here for num2 which is why the console gives us n a n or not a number so if you don't have enough arguments when we invoke the function to account for the right number of parameters any missing arguments are simply assigned a value of undefined but what happens if too many arguments are provided during the function invocation so let's go ahead and do that so we'll say five and add a bunch of other numbers here so here we have more arguments than we have parameters let's go ahead and save and let's see what the console gives us okay so the console has returned 10. and so when you provide more arguments then you have parameters what happens is the function continues to work as normal and these extra arguments are simply ignored which is why we have five plus five and we get ten in the console now we can still access these additional arguments if need be using something called the arguments object arguments is an array-like object and remember that very carefully an array-like object that contains every argument that is passed to the function during invocation now we can see this by simply using the arguments keyword inside of our function so here let's just uh get rid of this and instead let's console.log the word arguments and this code there changes the color indicating that this is a special keyword so if we go ahead and save so in the console then we get this arguments keyword and the number six because we've actually passed through one two three four five six arguments and if we open this up we can see all of the arguments listed out here so you can see it has a zero index which is the first one there five a one index two three four and five and so just like an array we could say something like arguments dot length let's save and the console gives us six we can also access individual arguments by using an index position so let's just say square brackets and the number five save and we get nine because that's the fifth indexed argument pretty cool however the problem that we have with the arguments object is that whilst it has a few of the same features as an array it's not an array for example we don't have access to any array methods so we can't say something like add.map or dot join dot slice etc in fact for years using the special arguments object was the only way to gain access to all arguments of a function but today in modern javascript which of course is what you should be using there is a much better and more efficient way to do this called a rest parameter now the reason why we'd use the modern rest parameter over the arguments object is because the rest parameter actually does return an array and so using a rest parameter we have access to all of our usual array methods join slice etc we'll be looking at rest parameters in detail in an upcoming lesson including all the cool things that we can do with it okay the final thing i want to share with you in this lesson is that with the es6 update we can also supply our functions with default parameters so that if an argument is missed out or not received during the function call then it will receive the default parameter value instead let's take a look at a quick example let's build our function so we'll say function let's go for a fave game function again and we'll come back to the parameters in just a second in our call block we're going to console.log my favorite game is game just like before but this time we're going to use a default parameter so here i'm going to say game equals no game provided so the way that we create a default parameter is we use the parameter name equals and then the default parameter value so what's going to happen here then is if we say fave game let's invoke this function and we get my favorite game is null game provided so since we haven't provided an argument here the default value of no game provided is actually assigned to game now it's very important to note that we always add our default parameters to the end of our parameter list otherwise the function call won't work properly now wouldn't it be cool if we could pass some sort of default error message if no argument is provided so let's see how let's get rid of this we're not going to be using a default parameter here so use a normal parameter called game and then inside of our function block rather than just doing a console log we're going to use an else statement so i'm going to say if game is equal to undefined then console.log the following let's say something like please provide your fave game we'll say for example fave game and inside this we'll say super mario okay so if nothing is passed through then game gets a value of undefined and if that's the case then this will be true and the console will log the following however if something is passed through so here we want to say else and then here we're going to console.log my fave game is game okay let's put this to the test let's go ahead and save and here we get please provide your fave game for example fav game super mario and if you put something in let's say super mario [Music] and save we get our usual console log my fav game is super mario so here we've used an if else statement to test whether the argument was defined or not so guys that's all about function parameters and arguments let's go ahead and summarize so we can make our functions more dynamic by using parameters parameters go inside the parentheses of our function definition and we then use them inside of the function call block when we invoke our function we can reference our parameters by using arguments the order of the arguments will follow the same order for the parameters and if we don't use enough arguments versus the number of parameters then any outstanding arguments are given the value of undefined but also if we were to use more arguments than we've defined then the function is involved anyway and simply ignores the extra arguments we looked at the arguments keyword which can be used to access the different arguments that are passed through and we also saw that there was a much better way to do this which was called the rest parameter and once again we'll look at rest parameters in detail a bit later on and finally we can also specify default parameter values to counteract any missing arguments that are turned into undefined okay so let's take a look at your tasks for this lesson for task number one i want you to create a function called food and then use response as a parameter in the cold block i want you to console.log your favorite food is food for task two i want you to invoke the function with your fav food as the argument and then for number three i want you to update that function to add a default value of empty please add your fav food and then go ahead and test out the default value and then finally for test number four i want you to update the function once more to display the message please enter your favorite food if there is no response added okay so as always go ahead and pause the video try these out and when we come back we'll take a look at the answers okay so how did you get on then let's see so for task number one we need to create a function called food so we'll say function fave food and we're using response as a parameter response and we want to console.log your favorite food so your favorite food is and then our response for task 2 we need to invoke the function so i'm going to say very food and of course i'm going to put pizza in here let's save this and in the console we get your fav food is pizza for task 3 we need to update the function to add a default value of empty please add your food so here we're going to turn response into a default parameter which is going to say let's just copy this we're just going to say empty please add your fake food and then we need to test out that default parameter so let's get rid of this so i'm not passing anything now let's save and we get our default value and then finally for task 4 we need to update the function once more to display the message please enter your favorite food if there is no response added so very similar to the last example we looked at so let's get rid of this and get rid of this console log call and instead we're going to say if else something else so we're going to say if response is equal to undefined in other words if no arguments are passed in this function call then we're going to console.log please enter your free food else so if something is passed into our function call then we're going to say your favorite food is and then the response so let's test this out let's go ahead and just save like this and since we've entered nothing response is given the value of undefined and if response is equal to undefined then we're going to console.log please enter your favorite food which is what we get here and then let's just add a fav food in and say pasta let's go ahead and save and we get your favorite food is pasta so guys while done completing those tasks that's it for this lesson in the next lesson we're going to be learning all about the return keyword the return keyword is used quite frequently in functions and in the next lesson we're going to learn exactly what it is and what we can do with it so as always guys don't forget to smash that like button down below comment share and subscribe and i'll see you on the next one [Music] you

Channel: Dev Dreamer

Views: 15,182

Keywords: javascript, javascript function parameters, javascript function arguments, default parameters, html, css, web development

Id: k1-tpFDyUwo

Length: 16min 0sec (960 seconds)

Published: Mon Nov 01 2021