Contents
JavaScript Functions
This practical course explores JavaScript Functions. You will learn what they are and how to use them.
Learning Objectives
- Learn how to write function declarations and expressions
- Understand function parameters and arguments
- Learn how to write ES6 arrow functions
- Understand the return statement
Intended Audience
This course is intended for anyone who wants to learn about JavaScript functions.
Prerequisites
Anyone with an interest in JavaScript functions or who wants to improve their knowledge of JavaScript in general.
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.
Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.
Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.
Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.
Farish is an avid powerlifter, sushi lover, and occasional Funko collector.