Functions
Learn about JavaScript function syntax, passing data to functions, the return keyword, ES6 arrow functions, and concise body syntax.
StartKey Concepts
Review core concepts you need to learn to master this subject
Arrow Functions (ES6)
Functions
Anonymous Functions
Function Expressions
Function Parameters
return
Keyword
Function Declaration
Calling Functions
Arrow Functions (ES6)
Arrow Functions (ES6)
// Arrow function with two arguments
const sum = (firstParam, secondParam) => {
return firstParam + secondParam;
};
console.log(sum(2,5)); // Prints: 7
// Arrow function with no arguments
const printHello = () => {
console.log('hello');
};
printHello(); // Prints: hello
// Arrow functions with a single argument
const checkWeight = weight => {
console.log(`Baggage weight : ${weight} kilograms.`);
};
checkWeight(25); // Prints: Baggage weight : 25 kilograms.
// Concise arrow functions
const multiply = (a, b) => a * b;
console.log(multiply(2, 30)); // Prints: 60
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 parameter 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.
- 1When 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…
- 2In 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 …
- 3As 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 …
- 4So 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…
- 5One 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 …
- 7We 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…
- 8Another 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…
- 9ES6 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…
- 10JavaScript 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…
- 11Give 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
Rock, Paper, or Scissors
It's time to build fluency in JavaScript fundamentals. In this next Pro Project, we're going to practice conditionals in JavaScript so you can hone your skills and feel confident taking them to the real world. Why? Given a certain input you want to return a certain output. If this than that. What's next? Games, conditionals, more JavaScript. You got this!
Sleep Debt Calculator
It's time to build fluency in JavaScript fundamentals. In this next Pro Project, we're going to practice functions in JavaScript so you can hone your skills and feel confident taking them to the real world. Why? Functions help us build separation of concerns so our code isn't one long function. What's next? Calculators, sleep awareness, more JavaScript. You got this!
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory