Loading
Lesson 12
Courses / JavaScript for Complete Beginners
JavaScript Functions with Parameters

Video Transcript

Welcome to MDK Tech World. In the previous lesson we learned about JavaScript functions. Now we're going to go a little bit further in our learning of functions. We're going to learn how to add parameters to our functions. Those are the inputs given to the function. To do that we're going to use an example that we previously used. Remember the Hello My Name is blank and I am blank years old. We use this to display a message like this where the first blank would be somebody's name that was stored in a variable called name and then somebody's age stored in a variable called age. We use this, we display this message to the console using the console log function. Now what we want to do in this practice, this challenge, the challenge is to follow me. I'm going to write a function that's going to do precisely this. We're going to do a log of this message except we're going to take the name and the age as parameters as arguments to the function. So when I say parameter and argument they're sometimes used interchangeably. When you call your function you pass the function arguments. When you're defining a function you typically define the parameters. Those parameters are actually what you give as arguments when you call the function. So keep in mind there's a slight difference in the usage of the word depending on the context situation. So let's start writing the function. The first thing you have to say is what? What's the keyword? Keyword is function and then followed by space followed by the name of the function. Let's call this function say greeting for example. And then you pass what? You have to write the two parentheses like this and then the curly brace. And inside the curly brace you write the set of instructions this function is going to perform. In this case we want to do a console log of whatever the message was. Let's use string interpolation remember string interpolation use back tick and then here let's paste the message. Wherever you see the blank you're going to put the dollar sign with the two braces and inside this has to be the variable name. Let's call this variable name name and then the other one age as like we did before. Except now we have not defined these guys previously right and we expect these guys to come from the function input. Okay, so whoever's going to call say greeting has to provide the name and the age so that the console log is going to display something here in the name and the age. So to do that you're going to go here see the parentheses. This is going to be your parameter list. The function takes several parameters could be zero or more. This case you're going to take the name and the age as parameters the parameters are a listed comma separated. So first parameters name if you want one more parameter you have to put a comma followed by another variable name. You don't have to have a space here but by convention I was put a space here. So I highly encourage you also follow this convention. Okay. So let's just reveal a little bit what we did. So we're defining we're declaring this function. Okay. And name is say greeting. It takes two parameters takes the some name and age. Then the instructions to this function inside here the function body in between the curly braces is like so you do a console log of this message. And inside the message it's going to interpolate whatever value store in this variable called name and whatever value store in this variable called age. And these variables just so happens to come from the function parameters. That's the input that is going to be given by whoever calls the say greeting function. Okay. So we just enter here and then we're going to do is we're going to try calling it like by the name and then we have to give the input say greeting. Now first input has to be named. So you can say your name as a string. Now the second one has to be separated by comma has to be the age and we're just make it up like before like so. Okay. So the function name and then you give a list of arguments. So when I do in the function call typically call these guys arguments that are passed to the say greeting function. And these are the parameters. So this value is going to be mapped to this variable called name and this value 35 is going to be mapped to this variable called age. And these are be referenced inside the log here. So let's try it out. So as you can see after calling say greeting we got the message hello my name is my name and I am 35 years old. So let's just look at some other things here in the function. You may notice that I always type like two spaces in the function body every time I open the curly brace. That's an invitation convention. It's very common when you do programming. It used to be traditionally a tab but these days we plus to do spaces and in because I do web development. I got into the habit of always using to space indentation so I would always add two spaces every time after I see opening curly brace like in the function definition to make things look nice and see OK this is part of the body of the function and not something else like on the same level. You can look into that if you want to get to know that more. It's just a convention that makes the code easier to read as you have a lot a lot of code working with a huge like a group code base. So that's a good style and practice. You should be following from early on in your learning. So I strongly suggest you always put the invitation when you see an opening curly brace at say my case I was just two spaces. You can use for the web development typically to these days. All right. So other thing I want to point out is we haven't really used a semi colon before. And this is something that you would always add at the end of every statement. OK. So this is a statement right here and at the end you put the semi colon. So this comes from programming in a C language. Every statement has to end in the semi colon. But when JavaScript came about it's not really like necessary to have it but people who added anyway just to be consistent and they might you might get end up having some bugs because they forget to do some things or combine statements. But so the take is some people there are people who like to have it versus people who don't want to use it. In my case I always like to have it. So that's my recommendation for you. But you don't have to follow my standard. Feel free to look into that to some research and choose your side. I will always put a semi colon when I'm writing JavaScript here like a writer function a statement at the end of the statement semi colon. OK. I didn't do much of this before when I started the course because we're just doing the JavaScript console. We're not really writing a program source files that if we had a like a big program in an actual external file it's not just the console. I would always add the semi colon. So you might not see me adding semi colon every time here. And that's because of that. Like I didn't add a semi colon here but he actually could have added. So it doesn't hard to add one. All right. So keep that in mind as you walk in your journey. So enough of that. So thank you for watching and just just a little bit review before we end the video. So we learned how to define our own function with parameters and parameters can be none like we did before say hello. There was no parameter but now we added we made a function called safe reading with two parameters. If you have more than one parameter separate them with a comma. OK. And then these parameters they'll be mapped according to how how you pass the arguments when you call the function. It will be in order. My name will be mapped to the first argument parameter here. Thirty five map to the second here and those will be available as a variable inside the function body like I did here. All right. So and what's good about this is that you can say say reading with different inputs and get different outputs. So if say another name and twenty nine. I forgot to say the quote here. If you say like this you expect a different message. So you're going to say hello. My name is another name and I am twenty nine years old and you can try different inputs and see the different outputs that you get. That's an exercise I'm going to leave to you to try different things with the same reading method. OK. So thank you so much for watching until the next time. Bye.
No comments yet (loading...)
No comments yet (loading...)
Did you like the lesson? 😆👍
Consider a donation to support our work: