Lesson 13 of 20

6 mins read

Functions, Arrow Syntax & Return Values

In Plain English

Functions encapsulate reusable blocks of code. JavaScript supports standard function declarations, function expressions, and modern arrow functions (() => {}) with implicit return expressions.

The Mental Model

"A function is like a kitchen blender recipe: you provide ingredients (arguments), the motor executes the recipe steps (function body), and it outputs a smoothie (return value)."

Deep Dive: How It Works

Function Declaration: function add(a, b) { return a + b; } is hoisted to the top of its scope.

Arrow Function: const add = (a, b) => a + b; provides concise syntax and lexical this binding.

Return Values: Functions return undefined by default unless an explicit return statement is provided.

Syntax Blueprint

const double = (x) => x * 2; ──▶ double(4) returns 8

Arrow functions with single expressions have an implicit return (no curly braces needed).

Core Rules to Remember

Modularity: Breaks large programs into testable, focused single-responsibility units.

Arrow Functions: Modern ES6 syntax: (param1, param2) => expression.

Return Value: Passes calculated results back to the caller.

Common Beginner Traps & How to Fix Them

Mistake:Using curly braces in arrow functions without return.

Why it happens: const add = (a, b) => { a + b }; returns undefined because curly braces require an explicit return.

How to fix: Either omit curly braces: (a, b) => a + b, or write: { return a + b; }.

Pro Tip: Prefer arrow functions for callbacks and array iterators, and named function declarations for top-level utility functions.

Live Interactive Example

Hit Run Code to see it live

Declaring and Invoking Functions

JavaScript ES2024

Output Console

Click "Run Code" to view the rendered output.

How it works: Demonstrates invoking functions and formatting calculated return values.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Write a multiply arrow function

Define an arrow function const multiply = (a, b) => a * b;
Call multiply(6, 7) and store the result in const result.
Print "Product: 42".

Sandbox Output

Click "Run & Check" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.