0Pricing
Frontend Academy · Lesson

Functions: declarations expressions arrow functions

Define functions three ways, understand hoisting, use parameters and return values, and write concise arrow functions.

Functions: declarations expressions arrow functions is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Are Functions?

Functions are reusable blocks of code. They take inputs (parameters), execute logic, and optionally return an output. Functions are first-class values in JavaScript — they can be assigned to variables, passed as arguments, and returned from other functions.

Function Declarations

A function declaration creates a named function using the function keyword. Declarations are hoisted — you can call them before they appear in the code.

function greet(name) {
  return `Hello, ${name}!`;
}

// Can call before declaration due to hoisting:
console.log(greet('Alice')); // 'Hello, Alice!'

Function Expressions

A function expression assigns a function to a variable. It is not hoisted (the variable is hoisted as undefined). Function expressions can be anonymous or named.

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

console.log(multiply(3, 4)); // 12

// Named function expression (name useful in stack traces):
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

Arrow Functions

Arrow functions are a compact syntax introduced in ES6. They don't have their own this — they inherit this from the enclosing scope. Great for callbacks and short functions.

// Standard arrow:
const add = (a, b) => a + b;

// Single parameter (no parens needed):
const double = n => n * 2;

// No parameters:
const greet = () => 'Hello!';

// Multi-line body needs {} and return:
const process = (x) => {
  const result = x * 2;
  return result + 1;
};

Parameters and Arguments

Parameters are the names listed in the function definition. Arguments are the values passed when calling the function. Extra arguments are ignored; missing arguments are undefined.

function info(name, age) {
  console.log(`${name} is ${age}`);
}
info('Alice', 30); // 'Alice is 30'
info('Bob');       // 'Bob is undefined'

Default Parameters

ES6 lets you set default values for parameters. The default is used when the argument is undefined (including when not passed at all).

function greet(name = 'World') {
  return `Hello, ${name}!`;
}
console.log(greet());        // 'Hello, World!'
console.log(greet('Alice')); // 'Hello, Alice!'

The return Statement

Functions return undefined by default. Use return to output a value. A function exits at the first return it hits — subsequent code is not executed.

function divide(a, b) {
  if (b === 0) return null; // early return
  return a / b;
}
console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // null

Rest Parameters

The rest parameter ...args collects all remaining arguments into an array. It must be the last parameter. It replaces the old arguments object for modern code.

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

Functions as Values (First-Class)

Functions can be stored in variables, passed to other functions as arguments (callbacks), and returned from functions. This enables powerful patterns like array methods and event listeners.

const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b); // callback
console.log(sorted); // [1, 1, 3, 4, 5]

Pure Functions

A pure function returns the same output for the same inputs and has no side effects (no DOM changes, no network calls, no global mutations). Pure functions are easy to test, debug, and reason about.

// Pure:
const add = (a, b) => a + b;

// Impure (side effect: mutates external state):
let total = 0;
function addToTotal(n) { total += n; }

Immediately Invoked Function Expressions (IIFE)

An IIFE runs immediately when defined. Historically used to create private scope. Less needed today with modules and block scope, but still seen in older codebases.

(function () {
  const secret = 'hidden';
  console.log('IIFE ran');
})();
// secret is not accessible here

Quick Check

Which of the following is true about arrow functions?

Recap: JavaScript Functions

Function declarations are hoisted. Function expressions and arrow functions are not. Arrow functions are concise and don't have their own this. Use default parameters to handle missing arguments. Functions are first-class values — pass them around freely.

Frequently asked questions

Is the “Functions: declarations expressions arrow functions” lesson free?

Yes — the full text of “Functions: declarations expressions arrow functions” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Functions: declarations expressions arrow functions”?

Define functions three ways, understand hoisting, use parameters and return values, and write concise arrow functions. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Functions: declarations expressions arrow functions” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Variables: let const var and Scope
  2. Data Types: string number boolean null undefined
  3. Functions: declarations expressions arrow functions
  4. Control Flow: if else switch for while
← Back to Frontend Academy