Data & LogicBeginner⏱ 8 min08 / 12

Functions

Learn how to package reusable logic into functions, pass data in with parameters, get results back with return, and write the sleek arrow-function syntax.

Imagine writing directions to your house. You could repeat every turn every time someone asks — or you could write them down once and hand that sheet to anyone who needs it. Functions are JavaScript's version of that reusable sheet of directions.

Without functions, programs are enormous walls of repeated code. With them, you write logic once, give it a name, and call on it as many times as you like. This lesson covers everything: declaring functions, passing data in with parameters, returning results, default params, modern arrow syntax, and why functions are actually first-class values.

#Declaring and Calling a Function

Think of it like

A function is a recipe card

A recipe card describes steps once. Handing it to a chef is like calling the function — the same instructions run every time, with whatever ingredients (arguments) you provide.

A function declaration. 'name' is the parameter (placeholder); 'Alice' and 'Bob' are arguments (real values).
function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Alice"); // 'name' receives 'Alice'
greet("Bob");   // same function, different argument

#Returning a Value

return hands a value back so you can store or reuse it anywhere
function add(a, b) {
  return a + b; // sends the result back to the caller
}

const total = add(3, 4);
console.log(total);        // 7
console.log(add(10, 25)); // 35
Common mistake

return exits the function immediately

Any code written after a return in the same block will never run — JavaScript stops the function the instant it hits return. If your function seems to skip logic, check whether an earlier return is cutting it short.

#Default Parameters & Arrow Functions

You can give any parameter a default value — if the caller omits it, the default kicks in automatically. ES6 also introduced arrow functions, a shorter syntax using =>. With a single-expression body you skip the curly braces and return entirely (called an implicit return) — a style you will see constantly in modern JavaScript and React.

Arrow syntax: single param = no parens needed; single expression = no curly braces or return needed
// Traditional function
function square(n) { return n * n; }

// Equivalent arrow function (implicit return)
const square = n => n * n;

// Arrow with two parameters needs parentheses
const add = (a, b) => a + b;

console.log(square(5)); // 25
console.log(add(3, 4)); // 7

#Functions as First-Class Values

In JavaScript, functions are values — just like numbers or strings. You can store them in variables (as you saw with arrow functions), pass them to other functions as arguments, or return them. Passing a function as an argument is called a callback, a pattern you will use constantly with arrays, events, and more.

Passing a function as an argument — the foundation of callbacks
function runTwice(fn) {
  fn();
  fn();
}

const sayHi = () => console.log("Hi!");
runTwice(sayHi); // pass the function itself, not sayHi()
Quick check

What does the following code print? const multiply = (a, b = 2) => a * b; console.log(multiply(5));

Key takeaways

  • A function declaration packages reusable logic under a name; call it anywhere with parentheses.
  • Parameters are placeholders; arguments are the real values you pass when calling the function.
  • return sends a computed value back to the caller and exits the function immediately.
  • Arrow functions (=>) are a concise alternative — a single-expression body returns its value implicitly, no return keyword needed.
  • Functions are first-class values: store them in variables, pass them as arguments, and use them as callbacks.
Practice challenges
Test yourself · earn XP
0/4
Predict the output#1

What does this code print?

predict-output
const multiply = (a, b = 3) => a * b;

console.log(multiply(4));
console.log(multiply(4, 2));
Fix the bug#2

This code has a bug — what's wrong?

fix-bug
function getDiscount(price) {
  return price * 0.9;
  console.log("Discount applied!");
}

console.log(getDiscount(100));
Fill in the blank#3

Complete this arrow function so it takes one parameter n and implicitly returns n squared (n * n), matching the lesson's square example.

const square = n => ;

console.log(square(5)); // 25
Reorder the lines#4

Put these lines in the correct order to declare a function, store it in a variable via return, and print the result — like the add example from the lesson.

1
console.log(total);
2
  return a + b;
3
const total = add(3, 4);
4
}
5
function add(a, b) {
Your turn
Practice exercise

Write an arrow function called calculateTip that takes two parameters: billAmount (the total in dollars) and tipPercent (the tip percentage, defaulting to 18). Return the tip amount rounded to two decimal places.

Examples: - calculateTip(50) → 9 - calculateTip(80, 20) → 16 - calculateTip(33.33) → 6

Hint: tip = billAmount (tipPercent / 100). Use Math.round(value 100) / 100 to round to two decimal places.

Try it live — edit the code and hit Run to see the output:

solution.js · editable