Start codelab

Codelab Flow

Let me get you started

L Last updated on 04/07/18 J Javascript functions

Functions allow you to package up lines of code that you can use (and often reuse) in your programs. So let’s take an example of a Pizza heating microwave.

You will be needed to test the functions using a javascript console; probably on Google Chrome in this codelab

Sometime functions take parameters like the pizza button. The function, reheatPizza() has one parameter: the number of slices. Check the code snippet below;

As your code gets longer and inevitably, there will surely be a code that repeats a number steps. Instead of repeating this multiple times, we can package those instances into chunks of code called functions.
In this code, the parameter is listed as a variable after the function name, inside the parentheses.

        function reheatPizza(numSlices) {
            // code that figures out reheat settings!
          }

And, if there were multiple parameters, you would just separate them with commas as shown below.


            function doubleGreeting(name, otherName) {
                // code to greet two people!
              }

But, you can also have functions that don’t have any parameters. Instead, they just package up some code and perform some task. In this case, you would just leave the parentheses empty. Take this one for example. Here’s a simple function that just prints out “Hello!”.


              // accepts no parameters! parentheses are empty
              function sayHello() {
              var message = "Hello!";
              console.log(message);
              }

If you try pasting any of the functions above into the JavaScript console, you probably won’t notice much happen. In fact, you probably see undefined returned back to you. undefined is the default return value on the console when nothing is explicitly returned using the special return keyword.

In the sayHello() function above, a value is printed to the console with console.log but not explicitly returned with a return statement.

You can write a return statement by using the return keyword followed by the expression or value that you want to return.


              // declares the sayHello function
              function sayHello() {
              var message = "Hello!";
              return message; // returns value instead of printing it
              }

How to return a function

Now, to get your function to do something, you have to invoke or call the function using the function name, followed by parentheses with any arguments that are passed into it.

Functions are like machines. You can build the machine, but it won’t do anything unless you also turn it on.
Here’s how you would call the sayHello() function from the code snippet above in the previous stage and then use the return value to print to the console:

            // declares the sayHello function
            function sayHello() {
              var message = "Hello!"
              return message; // returns value instead of printing it
            }
             
            // function returns "Hello!" and console.log prints the return value
            console.log(sayHello());
            
            // Prints: "Hello!"

Take away — functions, arguments and parameters

At first, it can be a bit tricky to know when something is either a parameter or an argument . The key difference is in where they show up in the code.

A parameter is always going to be a variable name and appears in the function declaration. On the other hand, an argument is always going to be a value (i.e. any of the JavaScript data types — a number, a string, a boolean, etc.) and will always appear in the code when the function is called or invoked.
Functions package up code so you can easily use (and reuse) a block of code. Parameters are variables that are used to store the data that’s passed into a function for the function to use. Arguments are the actual data that’s passed into a function when it is invoked:

            // x and y are parameters in this function declaration
            function add(x, y) {
            // function body
            var sum = x + y;
            return sum; // return statement
            }

            // 1 and 2 are passed into the function as arguments
            var sum = add(1, 2);

The function body is enclosed inside curly brackets:


            function add(x, y) {
            // function body!
            }

Return statements explicitly make your function return a value:


            return sum;

You invoke or call a function to have it do something:


            add(1, 2);

            // Returns: 3

What's next?

Try declaring and calling some functions on your own and have fun!

Support

Donate a Star and Contribute in any way. Be sure to follow us on Twitter.

License

Copyright PWA Fire, 2018. Licensed under an MIT License.

FORK ON GITHUB