Learn JavaScript Episode #16: Functions – Parameters and Return Values [w/ subs]

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

Video Url: