Learn JavaScript: Functions

Key Concepts

Review core concepts you need to learn to master this subject

Arrow functions in JavaScript (ES6)

JavaScript Functions

JavaScript Anonymous Functions

JavaScript Function Expressions

JavaScript Function Parameters

The JavaScript return keyword

JavaScript Function Declarations

Calling JavaScript Functions

Arrow functions in JavaScript (ES6)

// Arrow function with two arguments 
const sum = (firstParam, secondParam) => { return firstParam + secondParam; };  
console.log(sum(2,5)); // Logs 7 in console
  
// Arrow function with no arguments  
const printHello = () => {  
  console.log('hello');  
};   
printHello(); // Logs 'hello' in console
  
// Arrow functions with a single argument  
const checkWeight = weight => {  
  console.log(`Baggage weight : ${weight} kilograms.`);  
};  
checkWeight(25); // Logs 'Baggage weight : 25 kilograms.' in console

  
//concise arrow functions
const multiply = (a, b) => a * b;  
console.log(multiply(2, 30)); // Logs 60 in console

Arrow function expressions were introduced in ES6. These expressions are clean and concise. The syntax for an arrow function expression does not require the function keyword and uses a fat arrow => to separate the parameter(s) from the body. There are several variations of arrow functions:

Arrow functions with a single argument do not require () around the parameter list .
Arrow functions with a single expression can use the concise function body which returns the result of the expression without the return keyword.

JavaScript Functions

// Arrow function with two arguments 
const sum = (firstParam, secondParam) => { return firstParam + secondParam; };  
console.log(sum(2,5)); // Logs 7 in console
  
// Arrow function with no arguments  
const printHello = () => {  
  console.log('hello');  
};   
printHello(); // Logs 'hello' in console
  
// Arrow functions with a single argument  
const checkWeight = weight => {  
  console.log(`Baggage weight : ${weight} kilograms.`);  
};  
checkWeight(25); // Logs 'Baggage weight : 25 kilograms.' in console

  
//concise arrow functions
const multiply = (a, b) => a * b;  
console.log(multiply(2, 30)); // Logs 60 in console

Functions are one of the fundamental building blocks in JavaScript. A function is a reusable set of statements to perform a task or calculate a value. Functions can be passed one or more values and can return a value at the end of their execution. In order to use a function, you must define it somewhere in the scope where you wish to call it. The example code above contains a function that takes in 2 values and returns the sum of those numbers.

JavaScript Anonymous Functions

// Arrow function with two arguments 
const sum = (firstParam, secondParam) => { return firstParam + secondParam; };  
console.log(sum(2,5)); // Logs 7 in console
  
// Arrow function with no arguments  
const printHello = () => {  
  console.log('hello');  
};   
printHello(); // Logs 'hello' in console
  
// Arrow functions with a single argument  
const checkWeight = weight => {  
  console.log(`Baggage weight : ${weight} kilograms.`);  
};  
checkWeight(25); // Logs 'Baggage weight : 25 kilograms.' in console

  
//concise arrow functions
const multiply = (a, b) => a * b;  
console.log(multiply(2, 30)); // Logs 60 in console

Anonymous functions in JavaScript do not have a name property. They can be defined using the function keyword, or as an arrow function. See the code example for the difference between a named function and an anonymous function.

JavaScript Function Expressions

// Arrow function with two arguments 
const sum = (firstParam, secondParam) => { return firstParam + secondParam; };  
console.log(sum(2,5)); // Logs 7 in console
  
// Arrow function with no arguments  
const printHello = () => {  
  console.log('hello');  
};   
printHello(); // Logs 'hello' in console
  
// Arrow functions with a single argument  
const checkWeight = weight => {  
  console.log(`Baggage weight : ${weight} kilograms.`);  
};  
checkWeight(25); // Logs 'Baggage weight : 25 kilograms.' in console

  
//concise arrow functions
const multiply = (a, b) => a * b;  
console.log(multiply(2, 30)); // Logs 60 in console

Function expressions create functions inside an expression instead of as a function declaration. They can be anonymous or assigned to a variable.

JavaScript Function Parameters

// Arrow function with two arguments 
const sum = (firstParam, secondParam) => { return firstParam + secondParam; };  
console.log(sum(2,5)); // Logs 7 in console
  
// Arrow function with no arguments  
const printHello = () => {  
  console.log('hello');  
};   
printHello(); // Logs 'hello' in console
  
// Arrow functions with a single argument  
const checkWeight = weight => {  
  console.log(`Baggage weight : ${weight} kilograms.`);  
};  
checkWeight(25); // Logs 'Baggage weight : 25 kilograms.' in console

  
//concise arrow functions
const multiply = (a, b) => a * b;  
console.log(multiply(2, 30)); // Logs 60 in console

Inputs to functions are known as parameters when a function is declared or defined. Parameters are variables declared in the function signature that can be used inside the function body. When the function is called, these parameters will have the value of whatever is passed in as arguments. It is possible to define a function without parameters.

The JavaScript `return` keyword

// Arrow function with two arguments 
const sum = (firstParam, secondParam) => { return firstParam + secondParam; };  
console.log(sum(2,5)); // Logs 7 in console
  
// Arrow function with no arguments  
const printHello = () => {  
  console.log('hello');  
};   
printHello(); // Logs 'hello' in console
  
// Arrow functions with a single argument  
const checkWeight = weight => {  
  console.log(`Baggage weight : ${weight} kilograms.`);  
};  
checkWeight(25); // Logs 'Baggage weight : 25 kilograms.' in console

  
//concise arrow functions
const multiply = (a, b) => a * b;  
console.log(multiply(2, 30)); // Logs 60 in console

Functions return values using the return keyword. return ends function execution and returns the specified value to the location where it was called. A common mistake is to forget the return keyword, but without using it in functions, information doesn’t get passed back to us.

JavaScript Function Declarations

// Arrow function with two arguments 
const sum = (firstParam, secondParam) => { return firstParam + secondParam; };  
console.log(sum(2,5)); // Logs 7 in console
  
// Arrow function with no arguments  
const printHello = () => {  
  console.log('hello');  
};   
printHello(); // Logs 'hello' in console
  
// Arrow functions with a single argument  
const checkWeight = weight => {  
  console.log(`Baggage weight : ${weight} kilograms.`);  
};  
checkWeight(25); // Logs 'Baggage weight : 25 kilograms.' in console

  
//concise arrow functions
const multiply = (a, b) => a * b;  
console.log(multiply(2, 30)); // Logs 60 in console

Function declarations are used to create named functions. These functions can be called using their declared name. Function declarations are built from: the function keyword, the function name, a comma-separated list of parameters enclosed by a set of parentheses (), and a function body enclosed in a set of curly braces {}.

Calling JavaScript Functions

// Arrow function with two arguments 
const sum = (firstParam, secondParam) => { return firstParam + secondParam; };  
console.log(sum(2,5)); // Logs 7 in console
  
// Arrow function with no arguments  
const printHello = () => {  
  console.log('hello');  
};   
printHello(); // Logs 'hello' in console
  
// Arrow functions with a single argument  
const checkWeight = weight => {  
  console.log(`Baggage weight : ${weight} kilograms.`);  
};  
checkWeight(25); // Logs 'Baggage weight : 25 kilograms.' in console

  
//concise arrow functions
const multiply = (a, b) => a * b;  
console.log(multiply(2, 30)); // Logs 60 in console

JavaScript functions can be called, or executed, elsewhere in code using parentheses following the function name. Arguments are values passed into a function when it is called. See the example above.

Functions

Lesson 1 of 1

1
When first learning how to calculate the area of a rectangle, there’s a sequence of steps to calculate the correct answer: 1. Measure the width of the rectangle. 2. Measure the height of the rec…
2
In JavaScript, there are many ways to create a function. One way to create a function is by using a function declaration. Just like how a variable declaration binds a value to a variable name, a …
3
As we saw in previous exercises, a function declaration binds a function to an identifier. However, a function declaration does not ask the code inside the function body to run, it just declares …
4
So far, the functions we’ve created execute a task without an input. However, some functions can take inputs and use the inputs to perform a task. When declaring a function, we can specify its _par…
5
One of the features added in ES6 is the ability to use default parameters. Default parameters allow parameters to have a predetermined value in case there is no argument passed into the function …
6
When a function is called, the computer will run through the function’s code and evaluate the result of calling the function. By default that resulting value is undefined. function rectangleArea(w…
7
We can also use the return value of a function inside another function. These functions being called within another function are often referred to as helper functions. Since each function is carr…
8
Another way to define a function is to use a function expression. To define a function inside an expression, we can use the function keyword. In a function expression, the function name is usuall…
9
ES6 introduced arrow function syntax, a shorter way to write functions by using the special “fat arrow” () => notation. Arrow functions remove the need to type out the keyword function every t…
10
JavaScript also provides several ways to refactor arrow function syntax. The most condensed form of the function is known as concise body. We’ll explore a few of these techniques below: 1. Funct…
11
Give yourself a pat on the back, you just navigated through functions! In this lesson, we covered some important concepts about functions: * A function is a reusable block of code that group…

What you'll create

Portfolio projects that showcase your new skills

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Functions Quiz
What will be printed to the console?

Learn JavaScript: Functions

Key Concepts

Arrow functions in JavaScript (ES6)

JavaScript Functions

JavaScript Anonymous Functions

JavaScript Function Expressions

JavaScript Function Parameters

The JavaScript `return` keyword

JavaScript Function Declarations

Calling JavaScript Functions

What you'll create

Rock, Paper, or Scissors

Sleep Debt Calculator

How you'll master it

Functions Quiz

Learn JavaScript: Functions

Arrow functions in JavaScript (ES6)

JavaScript Functions

JavaScript Anonymous Functions

JavaScript Function Expressions

JavaScript Function Parameters

The JavaScript return keyword

JavaScript Function Declarations

Calling JavaScript Functions

Rock, Paper, or Scissors

Sleep Debt Calculator

Functions Quiz

The JavaScript `return` keyword