Course: Section

Get Started with Modern React: Intro, Setup, and ES6 Basics

Episode: Title

S01・V09: Functions

Date Created: July 17th, 2019
Last Updated: 27 days ago

Objectives
  1. We will describe function declarations.
  2. We will explain anonymous functions, which are function expressions, and how they differ from function declarations.
  3. In JavaScript ES6, arrow functions were introduced, and we will explain their syntax and how they differ.
  4. These different types of functions have different hoisting rules, which we will demonstrate.
Watch Video
Duration: 6m 54s

Function Declarations

We will start with “function declarations”. Function declarations were implemented in the 1st Edition of JavaScript. A function declaration consists of the “function keyword”, followed by the “function name”, for example, “add”, followed by a list of parameters to the function within parentheses, and separated by commas.

Let’s say, two numbers denoted by a, and, b, followed by the JavaScript statements that form the “definition” of the function, within curly brackets.

function add (a, b) {...}

Let’s say we return a + b. So, now we have a function declaration, complete with its definition.

function add(a, b) {
  return a + b;
}

Hoisting

In a previous video, we discussed variables, and showed that variables declared with var were hoisted. Let’s declare a variable called greeting above our function declaration, and initialize it with the string Hello!.

console.log("greeting:", greeting); // Prints `undefined`

var greeting = "Hello!";

function add(a, b) {
  return a + b;
}

Now, let’s console.log() the greeting, before it is declared. We can see that the variable declaration greeting was hoisted, as we don’t get a “ReferenceError”. However, the value assigned to greeting was not hoisted, so we get the value undefined printed to Console.

Now, let’s console.log() the function add. We can see that the function declaration, and its definition, have been hoisted.

So, we should be able to call the add function, passing two arguments. Let’s pass the numbers 3 and 4, for example. The function returns the number 7. We can see that functions can be called before they are declared and defined. This feature of “function declarations” can be very useful.

JavaScript functions do not need to have a name. We call functions without a name “anonymous functions”. More generally, we refer to functions that can be anonymous as “function expressions”.

For example, let’s create an anonymous function which takes two numbers, a, and, b. It returns the product a * b. Now, let’s assign this anonymous function to a variable, which we will call multiply. Now, let’s console.log() it earlier in the file.

// `var` declaration is hoisted, but not its value
console.log("greeting:", greeting); // Prints `undefined`

// `function` declaration and definition are hoisted
console.log("add(3, 4):", add(3, 4)); // Prints `7`

// function expression’s definition NOT hoisted
console.log("multiply:", multiply); // Prints `undefined`

var greeting = "Hello!";

function add(a, b) {
  return a + b;
}

var multiply = function(a, b) {
  return a * b;
}

We can see that the function expression’s declaration is hoisted, but not its definition. So, unlike a function declaration, we cannot call a function expression before it has been defined.

Arrow functions

Since JavaScript ES6, we can also create a function using an “arrow function expression”. Arrow functions have a shorter syntax compared to function expressions. Arrow functions are always anonymous.

We will show you an example. We will create an arrow function that takes two whole numbers a and b, and returns the remainder after dividing a by b. The syntax of arrow functions is the list of parameters of the function within parentheses, separated by commas, followed by an equals sign and a greater-than sign, which is the “arrow”, followed by the JavaScript statements that “define” the function, within curly brackets.

Now, let’s assign this arrow function expression to a variable, which we will call remainder. Let’s console.log() this function called with the numbers 450 and 360. We see that the remainder is 90.

var remainder = (a, b) => {
  return a % b;
}

console.log("remainder(450, 360):", remainder(450, 360)); // Prints `90`

We can shorten the syntax of the example arrow function. If an arrow function only has one return expression, we can remove the return keyword and the curly brackets. Let’s test the shorter syntax in the browser. The output is unchanged, proving that the shorter syntax is equivalent.

var remainder = (a, b) => a % b;

Since arrow functions are function expressions, their definition is not hoisted, so we cannot call an arrow function expression before it is defined.

Summary

We described function declarations. We explained anonymous functions, which are function expressions, and how they differ from function declarations. Arrow functions were introduced in JavaScript ES6, and we explained their syntax and how they differ. And, we demonstrated the different hoisting rules that functions have.

Next Up…

In the next video, we will look at loops in JavaScript.