Writing Functions

Objectives

By the end of this chapter, you should be able to:

• Write a function using a function declaration
• Write the same function using a function expression
• Write the same function using an arrow function
• Recognize that these are three syntaxes for a similar thing, not three different concepts
• Name one behavioral difference of arrow functions worth knowing early on

💡 Why this matters: You’ll see all three ways to write a function in real code, often in the same file. Knowing they do the same job with different syntax stops you from being confused by unfamiliar-looking code.

Function Declarations

A function declaration starts with the function keyword, followed by a name, a list of parameters in parentheses, and a body in curly braces.

function square(n) {
  return n * n;
}

console.log(square(4));
// 16

Function declarations are “hoisted,” meaning JavaScript makes the function available even before the line where it’s written, as long as the call happens somewhere after the declaration exists in the file. In practice, this just means declarations feel very flexible to use.

Function Expressions

A function expression stores an unnamed (or “anonymous”) function inside a variable, using the same function keyword.

const squareExpr = function (n) {
  return n * n;
};

console.log(squareExpr(4));
// 16

Notice this is the exact same function body as before, just assigned to a variable with const instead of given a name after the function keyword. Unlike declarations, function expressions are not hoisted: the variable must be assigned before you call it.

Arrow Functions

An arrow function drops the function keyword entirely and uses => between the parameters and the body.

const squareArrow = (n) => {
  return n * n;
};

console.log(squareArrow(4));
// 16

When the body is a single return statement, you can shorten it further: drop the curly braces, drop the return keyword, and the expression’s value is returned automatically.

const squareConcise = n => n * n;

console.log(squareConcise(4));
// 16

All four versions above, the declaration, the expression, the block-bodied arrow, and the concise arrow, do exactly the same thing. They’re different syntax for writing a function, not four unrelated ideas.

One real behavioral difference worth knowing now: arrow functions don’t get their own this, they use this from the surrounding code instead. You won’t need this for a while yet, but recognize this as a reason some code deliberately chooses an arrow function over a regular one.

Try It

1. Write a function declaration called double that returns twice its argument. Call double(7) and log the result.
2. Rewrite double as a function expression called doubleExpr. Call doubleExpr(7) and log the result.
3. Rewrite double again as a concise arrow function called doubleArrow. Call doubleArrow(7) and log the result.

Recap

• A function declaration uses the function keyword with a name, and is hoisted.
• A function expression stores an anonymous function in a variable, and is not hoisted.
• An arrow function uses => and can be shortened to a single expression with no braces or return.
• All three write functions that behave the same way for a plain call. Arrow functions differ in how they handle this.

Next lesson: parameters, default parameters, rest parameters, and what a function returns when you don’t write return at all.