Learn JavaScript #16 | Functions - Parameters and Return Values

Alright, so, what we're going to talk about in this video is a little more about functions, and we're going to pass parameters into a function. So, right off the bat, I'm going to remove all of this because we're not going to be using any of it. Now I'm going to create a function called saySomething. And now when you're talking about passing a parameter into a function, basically when you call the function you can supply data to the function, and then that data is used in the function to do whatever you're trying to do. So in this case we're going to call this function passing it whatever we want it to say. So, for instance, we would just name an internal variable here phrase, so whatever data we pass in to this is going to be available within this function as the variable phrase. So, I can say console.log(phrase), and let's concatenate this a bit, "You said: " and then phrase...like that. So now when we call the function, and we did discuss creating and calling functions, all we need to do is saySomething, and then in here we put what we want to say. So, in this case, it's a string that we need to pass in, so we need to use quotations there, and let's say "Hello how are you?" I'm gonna save this, I'm going to refresh this, and as you can see what happens here is by calling this it's making this actually do that. Now another thing I need to talk about is passing variables into functions. And so instead of having this text being passed in as a string, what I'm going to do is create a new variable called p, and it's going to be "This is a phrase." And then here we're going to pass that variable in. So the flow of this is going to be this is defined, the console doesn't read it or anything or do anything with it, it sets the variable, and then we call this function and pass the parameter p into it. So at this point this goes up here and it says okay you want to call this and put that data inside this function as phrase, and then it runs what's in here. So if I save this and refresh this, now it's going to say this is a phrase. Now another thing that you can do with functions that's useful is to return something. So, let's say we want to create a function here called getPhraseLength, and we're going to pass in a phrase to this method. Now what we're going to do is we're going to determine the length of characters of whatever variable we pass in, and then we're going to return that. Now it's not going to print it out, it's not going to do anything with it, it's just going to return to wherever it was called. So, the best way to describe this, or actually to demonstrate this, is to show you guys exactly what we do here. So, the phrase... let's create a variable called l, and the l it's an abbreviation or rather an acronym, single letter acronym, for length. And we're going to say phrase.length; So now l is equal to phrase.length within this function. When you create a variable inside of a function it's only available within that function, and that's called variable scoping and we'll get into that more later, just know that down here I wouldn't be able to you know console.log(l). If I do that it's going to say that it's undefined because l has not been defined where this can read it, because this function hasn't run. And even if it does run, it's still only available inside that instance of the function. So what we need to do is we need to return l. I'm going to this, and if I just call the function get PhraseLength, I pass in "This is a slightly longer sentence" I'm going to save this, and refresh, and nothing happens because we're not telling it to do anything. All we do is behind the scenes we're returning the length of that phrase to this point in our code, but it doesn't do anything, it just puts it there. So what we can do is we can put this into a variable called var this Length, it's going to be equal to getPhraseLength... so then this is going to automatically become just an integer that we return here. So I'm going to console.log(thisLength), and we'll get into the this keyword later. I generally don't like to it, but this length is just the first thing that came to mind. It's a variable name at this point. So I'm going to save this. I'm going to show you guys what's going to happen, then I'm going to run down through and explain a little more. So, it just prints out the number 34. So, what happens here is, when we refresh what happens is, it's the interpreter says okay this function is here. Okay, this function is here. Let's create a variable called this length, and...oh this function, and then it refers back to this, the interpreter does, and then it passes this value in through here, then it starts processing the function. So, it says okay, let's create a new variable called l, and l is equal to the length of the phrase, and in this case it's 34 characters. So it says okay, return the number 34, or whatever the length is, to wherever the function was called. So then this statement essentially becomes the same as this. So now when we print that out it prints 34. So, this just becomes whatever the return value of it is, and that's how to return things from functions and also using parameters in functions. If this looks complicated, it's not. I think I've explained it in the best way that I can. Again, the best way to really sink this in is to open up a code editor and print this out, and then play with it, and then write your own code using the same concepts in my code here, and then you can you can start to see what's actually happening and how you can manipulate the content and the code, and make certain things happen. In the next video, we're going to be discussing functions even a little bit more.