Function Introduction

By the end of this lesson, you will be able to write a JavaScript function that takes input, performs a task, and returns a result.

What it is

A function is a reusable block of code that runs when it is called. Think of it as a small machine: you give it inputs, it does work, and it may give you an output. In JavaScript, functions are defined with the function keyword, followed by a name, parentheses for parameters, and curly braces for the body.

Related terms include parameter, which is the variable listed in the definition, argument, which is the actual value passed when calling, return value, which is the result sent back, and call, which means using the function.

Why it matters

• It removes repeated code by letting you write logic once and use it many times.
• It makes programs easier to read by giving tasks clear names.
• It helps you test small pieces of logic separately.
• It lets you pass different data into the same behavior.
• It is the foundation for methods, callbacks, and modules.

Syntax or steps

The smallest useful pattern is a named function with parameters and a return statement:

function name(parameter1, parameter2) {
  // work with the parameters
  return result;
}

1. Choose a clear name that describes the task.
2. List parameters inside parentheses.
3. Write the steps inside curly braces.
4. Use return to send a value back to the caller.
5. Call the function with arguments.

Example

function calculateTotal(price, quantity) {
  const total = price * quantity;
  return total;
}

const orderTotal = calculateTotal(12.50, 3);
console.log(orderTotal);

Part by part:

• function calculateTotal declares a reusable function named calculateTotal.
• (price, quantity) are parameters that receive values when the function is called.
• const total = price * quantity; performs the calculation.
• return total; sends the computed value back to the caller.
• calculateTotal(12.50, 3) calls the function with arguments 12.50 and 3.
• console.log(orderTotal); prints 37.5.

Common mistakes

• Forgetting to call the function. Defining calculateTotal does not run it; you must call it.
• Using return incorrectly. A function without return gives undefined.
• Passing arguments in the wrong order. calculateTotal(3, 12.50) multiplies the wrong values.
• Using a vague name like doThing. Prefer names such as calculateTotal or formatName.

When to use it

Use a standard function declaration when you need a named, reusable task. Use an arrow function when you need a short inline function, especially as a callback.

Practice

Guided exercise: Write a function called add that takes two numbers and returns their sum. Call it with 4 and 6, then log the result.

function add(a, b) {
  return a + b;
}

console.log(add(4, 6));

Expected output: 10.

Challenge: Write formatGreeting(name) so it returns "Hello, Ada!" when called with "Ada". Hint: use string concatenation or a template literal.

Quick check

Question: What is the difference between a parameter and an argument?

Answer: A parameter is the variable name listed in the function definition, while an argument is the actual value passed when the function is called.

Summary

Functions turn repeated instructions into named, reusable units. They accept inputs, perform work, and can return outputs. Mastering this pattern makes JavaScript programs clearer, smaller, and easier to maintain.