Functions: Declaration, Expression, and Arrow

A function is a reusable recipe — a block of instructions you can run whenever you need it, as many times as you want.

What Is a Function?

A function bundles up a set of instructions under a name, so you can run that whole set just by using the name — instead of retyping the instructions every time.

🍳 Real-life analogy

A function is like a recipe card for "make scrambled eggs." You write the steps once. Anytime you want scrambled eggs, you don't rewrite the recipe — you just say "make scrambled eggs," maybe with slightly different ingredients (2 eggs vs 4 eggs), and you get eggs out the other end.

Why Do We Use Functions?

Reuse — write logic once, run it many times.
Organization — break a big problem into small, named pieces.
Isolation — variables inside a function don't leak out and clutter the rest of your program.

Function Declaration

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

greet("Maya"); // "Hello, Maya!"

function — keyword that starts a function declaration
greet — the function's name
(name) — a parameter: a placeholder for a value the function will receive
{ ... } — the function's body: the instructions that run
return — sends a value back out to whoever called the function
greet("Maya") — calling (running) the function, with "Maya" as the argument

A key trait of a declaration: it's hoisted, meaning you can call it earlier in the file than where it's written (more in the Scope & Hoisting lesson).

Function Expression

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

This does the same job, but here the function is stored inside a variable, like any other value. Unlike a declaration, it is not hoisted — you must define it before you call it.

Arrow Functions

const greet = (name) => {
  return `Hello, ${name}!`;
};

// Shorter, for a single expression:
const greet2 = name => `Hello, ${name}!`;

Arrow functions (introduced in 2015) are a shorter way to write function expressions. When the body is a single expression, you can drop the curly braces and the return keyword — the value is returned automatically. Arrow functions also handle the this keyword differently (covered in the Objects section) which matters most inside classes and callbacks.

Style	Hoisted?	Has its own `this`?
Declaration	Yes	Yes
Expression	No	Yes
Arrow	No	No — inherits from surroundings

Parameters vs Arguments

These two words are often mixed up:

Parameter — the placeholder name in the function definition (name).
Argument — the real value passed in when calling the function ("Maya").

Common Mistakes

⚠ Watch out for

Forgetting return in a regular function body — without it, the function gives back undefined.
Calling a function expression before it's defined — this throws an error, unlike a declaration.
Trying to use this inside an arrow function expecting it to behave like a regular function — arrow functions don't have their own this.

Best Practices

Give functions verb-based names that describe the action: calculateTotal, sendEmail.
Keep functions small and focused on one job.
Use arrow functions for short callbacks; use regular functions when you need your own this.

Performance Notes

All three styles run at essentially the same speed in modern engines. Choose based on readability and hoisting/`this` behavior, not performance.

Browser Compatibility

Declarations and expressions have worked forever. Arrow functions (ES6, 2015) work in all current browsers.

Interview Questions

What's the difference between a function declaration and a function expression?

A declaration starts with the function keyword and a name, and is hoisted, so it can be called before its definition appears in the file. An expression assigns a function to a variable and is not hoisted the same way.

Why don't arrow functions have their own this?

They were designed to inherit this from the surrounding scope, which avoids a common source of bugs when using callbacks inside methods or event handlers.

✏️ Exercise

Write the same "add two numbers" function three ways: as a declaration, a function expression, and an arrow function.

🧠 Quiz

1. Which style can you call before its definition in the file?

Function declaration.

2. What is passed into the parentheses when you actually run a function?

Arguments.

🚀 Mini Challenge

Write a function isEven(number) that returns true or false depending on whether the number is even. Write it as an arrow function.

Summary

Functions bundle reusable instructions under a name.
Three main styles: declaration, expression, and arrow — differing in hoisting and `this` behavior.
Parameters are placeholders; arguments are the real values passed in.