Functions: Reusable Code

Building Blocks of JavaScript

Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value. However, for a procedure to truly qualify as a function, it should take some input and return an output where there is an obvious relationship between the two. Think of a function as a mini-program within your main program: it has its own logic, it does a specific job, and it saves you from copying and pasting the exact same logic over and over again.

To use a function, you must define it somewhere in the scope from which you wish to call it. The scope determines where variables and functions are visible and accessible.

Function Declarations

A function definition (also called a function declaration) consists of the function keyword, followed by the name of the function, a list of parameters enclosed in parentheses (), and the body enclosed in curly braces {}.

The code inside the curly braces is not executed immediately when the function is declared. Instead, JavaScript simply registers the function in memory. The code only actually runs when the function is explicitly invoked (called).

function greet() {
  console.log('Hello');
}
greet();

Hello

Parameters and Arguments

Functions become truly powerful when they accept inputs, known as parameters. By accepting parameters, a function becomes a flexible template rather than a rigid set of commands. When you call a function, you pass concrete values called arguments that are bound to these parameters during that specific execution.

function printDouble(n) {
  console.log(n * 2);
}
printDouble(5);

10

Pass-by-Value

Parameters are essentially passed to functions by value — so if the code within the body of a function assigns a completely new value to a parameter that was passed to the function, the change is not reflected globally or in the calling function.

This happens because JavaScript creates a separate copy of the primitive value (like a number or string) and assigns it to the local parameter variable. The original variable outside the function remains entirely untouched. This design prevents functions from accidentally destroying your data, making your code much more predictable.

function modify(x) {
  x = 10;
}
let y = 5;
modify(y);
console.log(y);

5

Edge Cases: Missing and Extra Arguments

Unlike stricter languages (like Java or C++), JavaScript is very forgiving when it comes to arguments. If you don’t pass enough arguments to match the defined parameters, JavaScript doesn’t crash or throw an error. Instead, the missing ones simply default to the value undefined.

function sayHi(name) {
  console.log('Hi, ' + name);
}
sayHi();

Hi, undefined

If you pass too many arguments, the extra ones are simply ignored by the named parameters. (They are still technically accessible via a hidden object called arguments, but they won’t map to any named parameter).

function noArgs() {
  console.log('Called');
}
noArgs(1, 2, 3);

Called

Hoisting

One interesting feature of JavaScript function declarations is that they can be hoisted. This means the function declaration can appear below the call in the code, but it still executes correctly.

JavaScript scans your entire file and lifts (“hoists”) all function declarations to the top of their enclosing scope before it runs any code. This allows you to organize your files by putting your main logic at the top and tucking the helper functions safely at the bottom.

hoisted();
function hoisted() {
  console.log('I am hoisted!');
}

I am hoisted!

The Function Machine

Here is a visual representation of how a function receives inputs and produces a result.

Visualizing Execution

Let’s visualize how parameter binding and hoisting work together using an interactive tracer.

function multiply(a, b) {
  let result = a * b;
  console.log(result);
}

let first = 3;
let second = 4;
multiply(first, second);