# Functions
# Building Functions
Functions are bundles of code that can be called upon to run at a later time. There are several ways that we can build a function.
# Function Declaration
This is the most common way to write a function, especially for beginners. They begin with the keyword function, then a name for the function, a set of parentheses, and finally a set of curly braces.
function clicked() {
//this function is called "clicked"
}
2
3
# Function Expression
A function expression is a second way to create a function. It is basically a function without a name that is being passed into a variable. Typically, the variable is declared on the same line as the function.
let f = function() {
//this is a function expression
};
2
3
The difference between a function expression and a function declaration is how their scope and hoisting is handled.
Function declarations can be written anywhere in your file and will be available. If you use a function declaration then you can only call the function from below the line where it is created.
# Anonymous Functions
A function declaration that does not have a name after the keyword function is called an anonymous function. We will use these occassionally.
They should only be used if they are a function that will only every be called from one place in the code and you will never need to remove it.
# Arrow Functions
This was a new way to create functions that was added in the ECMAScript version 6 (or ES6 or ES2015) version of JavaScript.
let f = () => {
//this is an arrow function
};
2
3
The syntax can be a little strange and confusing at first. I show them here only to be complete. We will come back to them later in the semester.
# Running Functions
To make a function run, you simply have to add a set of parentheses to the end of the name.
//first we will create three separate functions
function f1() {
console.log('this is function 1');
}
let f2 = function() {
console.log('this is function 2');
};
let f3 = () => {
console.log('this is function 3');
};
//Now we will make all three of them run
f1();
f2();
f3();
2
3
4
5
6
7
8
9
10
11
12
13
14
It doesn't matter how the function was built originally. You make them run the same way.
# Function Parameters
Sometimes you need to pass information to a function so it can run. You can think of it as going to the grocery store with your grocery list. Without the list it will be a very short trip.
The information bits that you pass to the function are called parameters. (or sometimes arguments).
function buyLunch(drink, main, side) {
//the variable drink will hold the String "drink"
//the variable main will hold the String "Burger"
//the variable side will hold the value undefined.
console.log(arguments); // ['Beer', 'Burger']
}
//now call the function and pass values to the parameters
buyLunch('Beer', 'Burger');
2
3
4
5
6
7
8
Unlike most staticly typed languages, JavaScript can adapt and handle situations where the number of parameters does not match.
If you don't pass a value to a parameter then it will be like a variable that is declared but not assigned a value - undefined.
If you pass more values than there are parameters, you can still access the values through a built-in property of the function called arguments.
# Function Default Parameters
# Function Return Values
All functions will return something. When they finish running, if they haven't been instructed otherwise, they will return the value undefined.
If you want to send back your own value from a function then we use the keyword return followed by any single value or variable.
On the return line, the function will stop running and return the value you choose. This means if you put return on the first line of your function, that is the only thing it will do.
If you want, you can nest different return statements inside of if statements.
# IIFE
Immediately Invoked Function Expressions (IIFE) pronouned if-ee, is a type of function expression, as defined above, except that it is wrapped inside a set of parentheses and then an extra set of parentheses are added to the end.
As we learned above, when you add a set of parentheses to the end of a function, we are telling the function to run.
So, an IIFE is a place where you create and run a function all at the same time.
We will be using these later on. For now, just learn to recognize them.
(function f4(name) {
console.log(name);
})('Steve');
// this creates a function called f4
// and then immediately runs the function,
// passing the String 'Steve' into the variable name.
2
3
4
5
6