Introduction to JavaScript functions. A function is a block of code designed to perform a specific coding task. Usually given a name to reference in order to execute the function as many times as you want. And I'm going to start off with a declarative function. Function at parentheses. Number one, comma, number two, comma, curly brackets. I'm going to zoom in and do a quick tour of a declarative function. First I have the declarative keyword function.

Next I have the name of the function, add. Any function declaration must have a name. Inside of the parentheses, after the functions name, are parameters. And parameters are name placeholders for the function arguments. Arguments are the actual values that get passed through the parameters when the function is called. Which I will demonstrate shortly in the video.

Inside of the curly brackets is the specific block of code that will be executed when the function is called. One thing to note parameters aren't required for a function unless they need external input. I could write the function with an empty set of parentheses to indicate no parameters. Now it's time for our block of code.

Now, inside of this function, I'm going to console.log number one, plus number two. Now this add function is ready to be used. So I'm going to invoke it on the following line. Add, parentheses, four, comma six. And now I will execute it, and to the right is a value of 10. And here's what's happening when I execute the function. So with add, I'm invoking the function using its name. Inside of the parentheses, Four is the argument for the number one parameter. Six is the argument for the number two parameter. And these are the actual values that will get passed through into the function to be used by its block of code.

Now for demonstration purposes in this video, I am using console.log, but there is one caveat when it comes to JavaScript functions. In order to make the result available from the block of code that's executed within a function, I need to return that value. So I'm going to type return, number one, plus number two, otherwise, any other aspect of this JavaScript program that uses this function will only get an undefined value because I'm not returning it. Console.log is only being used in this video for demonstration purposes.

Now I'm going to take a moment to explain one of the reasons why we use functions. And this is a programming principle called DRY. Don't repeat yourself because I have a function that references a of code, I can call that function over and over again and reuse it. I'm going to go ahead and copy the add call and paste it three more times. I'm going to change the values for each set of arguments and execute all the function calls. And now I have four different values, one for each function call, and that's where DRY comes into place. If I didn't put this block of code inside of a function, I would have to write this block of code over and over again. And looking at the screen, what seems to be more efficient, the lines of code inside of the function and writing the function call plus its arguments or writing the code inside of the function over and over again.

Now I'm going to clean this up and talk about function expressions. Function expressions are functions that are stored in a variable and can be accessed using the variable's name. Typically they are anonymous. They are nameless inside of the variable. I'm going to convert this function declaration to a function expression. I'm going to start by deleting the function keyword and replacing it with var, putting an equal sign to the right of add. And now writing function before the parentheses. Now I'm going to clear my console and execute this. And the result is the same as before.

So what is the difference between function expressions and function declarations? Well, this has to do with use case. If you want a function that's available throughout your whole program, use a function declaration. If you want to take a function and maybe use it as arguments to other functions. Now there are other use case scenarios, but not for the scope of this video.

Now with ES6, there was eight other syntex introduced for functions called arrow functions. And I want to go ahead and convert this function over to an arrow function. So when I replace var with const, we delete the function keyword and to the right of the parentheses, I'm going to insert an arrow which is a combination of the equal sign and greater than symbol. And I will execute this and we can see the value of 10 to the right.

Now, I could stop here because the syntax as it's written will work. But there's a feature that arrow functions have called implicit return. Where you don't have to use the return keyword as long as the function is written on one line. To demonstrate this, I'm going to delete the return keyword and the console.log statement, because it moved us over to one line, curly brackets aren't required either, so I will go ahead and delete those.

Now I don't have a console.log to output this value to the console. So what I'm going to do is wrap the add function call, on the following line, inside of a console.log. Now I'm going to go ahead and execute this and we can see that the value of 10 is still displaying on the right, so the implicit return mechanism is working.

Now going back to earlier in the video, I had mentioned that whenever we have a function that generates a value, in order to make it available throughout our program, we need to return it. And I'm going to demonstrate how this works. I'm going to start by making a new variable. Const sum, I'm going to set it equal to, the add function that I wrote in the console.log plus that same add function again. And each of these function calls is going to return the value of 10. And this is what allows me to take these two values and add them together. So now I want to console.log sum, and I'm going to execute this and we can see the value of 20 in the console.

So when should we be using ES6 functions? If you're working on a newer JavaScript code base, chances are you're already using ES6. But there are some caveats. First ES6 functions scoped differently. Along with the scoping differences, they do not bind to this, so they should never be used for object methods. And that's it. Thanks for watching at Cloud Academy.