JavaScript Functions

Introduction to JavaScript Functions

A function is a reusable block of code that performs a specific task. Instead of repeating the same statements everywhere, you write them once, give them a name, and run them whenever you need them by calling the function. Functions are one of the core building blocks of JavaScript: they let you organize code, avoid duplication, and build complex programs out of small, testable pieces.

This chapter covers how to define functions, pass data into them with parameters, get data back with return, and the three main forms you'll see in real code: function declarations, function expressions, and arrow functions. It also explains hoisting and scope — two behaviors that surprise newcomers.

Defining a Function

Basic Function Syntax

A function declaration uses the function keyword, followed by a name, a comma-separated list of parameters inside parentheses, and a body of statements inside curly braces. The body runs only when the function is called — written as the function name followed by parentheses.

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

greet(); // call the function → Outputs: Hello, World!

Defining a function does nothing on its own; nothing prints until greet() runs.

Function Hoisting

Function declarations are hoisted: the engine registers them before any code runs, so you can call a declaration even on a line above where it's written.

This does not apply to function expressions or arrow functions (covered below) — those are only available after the line that assigns them runs. Calling them earlier throws a ReferenceError or TypeError. If you want to learn more about why this happens, see variable scope.

Function Parameters and Arguments

A parameter is a name listed in the function definition; an argument is the actual value you pass when calling it. Inside the body, parameters behave like local variables.

Passing Parameters

If you call a function with fewer arguments than parameters, the missing ones are undefined rather than an error:

Default Parameters

To avoid undefined, ES6 lets you give a parameter a default value, used only when no argument (or undefined) is passed.

Rest Parameters

A rest parameter (written ...name) collects any number of remaining arguments into a real array, so a function can accept a variable number of inputs. It must be the last parameter.

Rest parameters share syntax with the spread operator but do the opposite job. See rest parameters and spread syntax for the full picture.

The Return Statement

A function can send a value back to its caller with return. The returned value can be stored in a variable or used directly in an expression.

return also stops the function immediately — any code after it is skipped. A function with no return (or a bare return;) yields undefined.

Anonymous Functions and Expressions

Function Expressions

A function expression stores a function in a variable. Unlike a declaration, the function is created when execution reaches that line, so it is not hoisted — you can only call it afterwards.

Anonymous Functions

The function above had no name — that's an anonymous function. They're common as arguments to other functions, for example callbacks passed to array methods like forEach or to setTimeout. (See introduction to callbacks.)

Arrow Functions in ES6

Syntax of Arrow Functions

ES6 introduced arrow functions, a concise syntax for function expressions. When the body is a single expression, you can drop the braces and the return keyword — the expression's value is returned automatically.

Arrow Functions Have No Own this

Arrow functions do not bind their own this; they inherit it from the surrounding scope. This makes them ideal as callbacks inside object methods, where a regular function would lose the object's this.

For more on how this resolves inside methods, read object methods, this.

Choosing the Right Form

• Function declaration (function foo() {}) — hoisted, good for top-level named utilities you may call from anywhere.
• Function expression (const foo = function() {}) — created in place; useful when you want to assign or pass a function conditionally.
• Arrow function (const foo = () => {}) — shortest syntax, no own this; preferred for short callbacks.

Functions are also the foundation for more advanced patterns such as closures and recursion.

Conclusion

Functions let you package logic once and reuse it everywhere. You've seen how to define them, pass arguments (including defaults and rest parameters), return results, and the differences between declarations, expressions, and arrow functions — plus the hoisting and this behaviors that distinguish them. Mastering these forms is a fundamental step toward writing clean, maintainable JavaScript.

Practice