JavaScript Functions

Learn how to create reusable blocks of code with functions!

Learning Objectives

Understand what functions are and why they're important
Learn to declare and call functions
Master function parameters and return values

Explanation

Functions are reusable blocks of code that perform specific tasks. They help organize your code, avoid repetition, and make your programs more maintainable. Benefits of using functions: - Reusability: Write code once, use it multiple times - Organization: Break complex problems into smaller parts - Maintenance: Easier to update and fix issues - Abstraction: Hide complex implementation details There are several ways to define functions in JavaScript: 1. Function Declaration: The most common way to create a function. Syntax: function name(parameters) { code block } 2. Function Expression: Defining a function and assigning it to a variable. Syntax: let name = function(parameters) { code block }; 3. Arrow Functions: A shorter syntax introduced in ES6 (modern JavaScript). Syntax: let name = (parameters) => { code block }; - For single-line functions: let name = (parameters) => expression; Functions can take parameters (inputs) and return values (outputs): - Parameters are like variables that get assigned values when the function is called - The return statement specifies what value the function should output - If no return statement is used, the function returns undefined

Code Example

// Function declaration
function greet(name) {
  return "Hello, " + name + "!";
}

// Calling the function
let greeting = greet("Padawan");
console.log(greeting);  // "Hello, Padawan!"

// Function with multiple parameters
function add(a, b) {
  return a + b;
}
console.log(add(5, 3));  // 8

// Function with default parameter values
function welcome(name = "friend") {
  return "Welcome, " + name + "!";
}
console.log(welcome());  // "Welcome, friend!"
console.log(welcome("Master Yoda"));  // "Welcome, Master Yoda!"

// Function expression
let multiply = function(a, b) {
  return a * b;
};
console.log(multiply(4, 2));  // 8

// Arrow function (compact syntax)
let square = (num) => num * num;
console.log(square(4));  // 16

// Arrow function with multiple statements
let checkAge = (age) => {
  if (age >= 18) {
    return "Adult";
  } else {
    return "Minor";
  }
};
console.log(checkAge(20));  // "Adult"

// Function without a return (returns undefined)
function sayHello() {
  console.log("Hello there!");
  // No return statement
}
let result = sayHello();  // Outputs: "Hello there!"
console.log(result);  // undefined

Try It Yourself!

Create a function that calculates the area of a circle using the formula: area = π × radius²

JavaScript Editor

// Function declaration
function greet(name) {
  return "Hello, " + name + "!";
}

// Calling the function
let greeting = greet("Padawan");
console.log(greeting);  // "Hello, Padawan!"

// Function with multiple parameters
function add(a, b) {
  return a + b;
}
console.log(add(5, 3));  // 8

// Function with default parameter values
function welcome(name = "friend") {
  return "Welcome, " + name + "!";
}
console.log(welcome());  // "Welcome, friend!"
console.log(welcome("Master Yoda"));  // "Welcome, Master Yoda!"

// Function expression
let multiply = function(a, b) {
  return a * b;
};
console.log(multiply(4, 2));  // 8

// Arrow function (compact syntax)
let square = (num) => num * num;
console.log(square(4));  // 16

// Arrow function with multiple statements
let checkAge = (age) => {
  if (age >= 18) {
    return "Adult";
  } else {
    return "Minor";
  }
};
console.log(checkAge(20));  // "Adult"

// Function without a return (returns undefined)
function sayHello() {
  console.log("Hello there!");
  // No return statement
}
let result = sayHello();  // Outputs: "Hello there!"
console.log(result);  // undefined

Mini Quiz

Test your knowledge with these quick questions!

1. What happens if a function doesn't have a return statement?

It returns null

It returns 0

It returns undefined

It causes an error

2. Which function syntax is the most compact?

Function declaration

Function expression

Arrow function

All have the same length

Your Progress

Lesson ProgressIn Progress

Est. time: 15-20 min

100 points

Module Progress

JavaScript Fundamentals2/10 completed

Complete all lessons to earn the Code Fundamentalist badge!

Rewards

Complete this lesson

Earn 100 points

Complete this module

Earn the Code Fundamentalist badge