JavaScript Function Declarations Get Certified

A function is a reusable block of code designed to perform a specific task. Instead of repeating the same code multiple times, you can define it once as a function and call it whenever needed.

A function declaration (also called a function statement) is one of the most common ways to define a function in JavaScript.

In this lesson, you will learn how to declare a function, pass it parameters, return values from it, and understand a key behavior called hoisting.

Basic Function Declaration Syntax

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

What this code does: A function declaration defines a reusable block of code with the function keyword. Calling greet() runs the body and prints the greeting. Nothing runs until the function is called.

function greet() {
    console.log("Hello, Michael!");
}
greet();

Defining a function does not run its code. The function only runs when it is called, using its name followed by parentheses.

Function Parameters

Parameters let you pass values into a function so it can use them while it runs. The values you provide when calling the function are called arguments.

What this code does: Parameters let you pass different values into the same function. name receives “Michael” on the first call and “Emily” on the second, producing two different greetings.

function greet(name) {
    console.log("Hello, " + name + "!");
}
greet("Michael");
greet("Emily");

A function can accept multiple parameters, separated by commas.

What this code does: Multiple parameters are separated by commas. addNumbers(5, 10) adds the two arguments and logs the sum. The function itself does not return a value.

function addNumbers(a, b) {
    console.log(a + b);
}
addNumbers(5, 10);

The return Statement

Instead of just printing a value, a function can send a value back to the code that called it using return.

What this code does: return sends a value back to the caller so it can be stored or reused. The sum is returned, stored in result, and then printed.

function addNumbers(a, b) {
    return a + b;
}
let result = addNumbers(5, 10);
console.log(result);

A return statement immediately exits the function, so any code written after it inside the same block never runs.

What this code does: A function can return different values based on conditions. Ages 20 and 15 produce “Adult” and “Minor” respectively via early returns.

function checkAge(age) {
    if (age >= 18) {
        return "Adult";
    }
    return "Minor";
}
console.log(checkAge(20));
console.log(checkAge(15));

Functions Without a return Statement

If a function doesn’t include a return statement, it automatically returns undefined.

What this code does: Without a return, a function returns undefined. logMessage only prints; assigning its result to result gives undefined.

function logMessage(message) {
    console.log(message);
}
let result = logMessage("Hello!");
console.log(result);

Default Parameters

You can give a parameter a default value, which is used automatically if no argument (or undefined) is passed for that parameter.

What this code does: Default parameters provide a fallback when an argument is omitted. The first call uses “Michael”; the second uses the default “Guest”.

function greet(name = "Guest") {
    console.log("Hello, " + name + "!");
}
greet("Michael");
greet();

Missing or Extra Arguments

JavaScript does not require the number of arguments to match the number of parameters. Missing arguments become undefined, and extra arguments are simply ignored (unless you use the arguments object or rest parameters to access them).

What this code does: JavaScript does not enforce argument count. Missing arguments are undefined; extra arguments are ignored. One call gets undefined for b; the other ignores the third value.

function addNumbers(a, b) {
    console.log(a, b);
    return a + b;
}
console.log(addNumbers(5));
console.log(addNumbers(5, 10, 20));

Since b is undefined in the first call, a + b results in NaN.

Function Declarations Are Hoisted

Function declarations are fully hoisted, meaning you can call the function before it appears in the code, and it will still work correctly.

What this code does: Function declarations are hoisted—you can call them before they appear in the code. square(5) works even though the function is defined later in the file.

console.log(square(5));
function square(number) {
    return number * number;
}

This works because JavaScript moves the entire function declaration (name and body) to the top of its scope before the code runs. This behavior is unique to function declarations — function expressions and arrow functions are not hoisted the same way.

Naming Functions

Function names follow the same rules as variable names: they can contain letters, numbers, underscores, and dollar signs, but cannot start with a number. Function names are typically written in camelCase and describe what the function does.

What this code does: A practical function that multiplies price by quantity and returns the total. Clear names make the purpose obvious without reading the body.

function calculateTotalPrice(price, quantity) {
    return price * quantity;
}
console.log(calculateTotalPrice(20, 3));

Calling a Function Multiple Times

One of the main benefits of functions is reusability. Once defined, a function can be called as many times as needed with different arguments.

What this code does: The same function can be called many times with different arguments. Each call returns a new result; the function body is written once and reused.

function square(number) {
    return number * number;
}
console.log(square(2));
console.log(square(5));
console.log(square(10));

Practical Example

Let’s declare a function that calculates the final price of an item after applying a discount.

What this code does: Combining parameters, a default, and return. A 25% discount reduces 200 to 150; omitting the discount leaves the price unchanged.

function applyDiscount(price, discountPercent = 0) {
    const multiplier = 1 - (discountPercent / 100);
    return price * multiplier;
}
console.log(applyDiscount(200, 25));
console.log(applyDiscount(150));

Common Mistakes With Function Declarations

• Forgetting to call the function, and expecting the code inside it to run automatically.
• Confusing parameters (the names in the function definition) with arguments (the actual values passed in).
• Forgetting return, and expecting a value even though the function only logs something to the console.
• Assuming code after a return statement in the same block still runs.
• Declaring two functions with the same name, where the second declaration silently overwrites the first.

Best Practices for Function Declarations

• Give functions clear, descriptive names that explain what they do, such as calculateTotal instead of doStuff.
• Keep each function focused on doing one specific task.
• Use default parameters instead of manually checking for undefined inside the function body.
• Avoid relying on hoisting for readability — define important functions near the top of your file when practical.
• Prefer returning values over logging directly inside a function, so the function’s result can be reused elsewhere.

Quick Summary

• A function declaration starts with the function keyword, followed by a name, parameters, and a body.
• Parameters are placeholders; arguments are the actual values passed when calling the function.
• return sends a value back and immediately exits the function.
• A function without return returns undefined by default.
• Parameters can have default values used when no argument is provided.
• Function declarations are hoisted, so they can be called before they appear in the code.

Try It Yourself

Modify the function below. Try adding a new parameter, changing the default value, or calling the function with different arguments.

What this code does: Practice example: change the default age or the returned string, then click Test My Code to see how parameters and defaults work together.

function introduce(name, age = 18) {
    return name + " is " + age + " years old.";
}
console.log(introduce("Michael", 28));
console.log(introduce("Alex"));

Tip: A good function name should let someone understand what it does without needing to read its code. If you’re struggling to name a function clearly, it might be doing too many things at once.

Understanding function declarations is essential before moving on to function expressions, arrow functions, scope, and more advanced JavaScript concepts.