How to Declare and Call a JavaScript Function

Declaring a function is like writing a recipe. Calling a function is like cooking from that recipe. You need both -- the definition and the invocation -- for anything to happen.

JavaScript gives you three main syntaxes for declaring functions. Each looks slightly different and behaves slightly differently, but they all create the same thing: a reusable, callable block of code.

Function Declarations

A function declaration is the classic, most readable way to create a named function. It starts with the function keyword, followed by a name, a parameter list, and a body wrapped in curly braces:

javascript

function functionName(parameter1, parameter2) {
  // code to run
  return value;
}

Here is a real example built from that shape. It takes one parameter, a name, and returns a greeting string built around it, so calling it with different names produces different results:

javascript

function greetUser(name) {
  return `Hello, ${name}!`;
}

The name parameter is a placeholder here, it only becomes a real value once you call the function. To call it, write the function name followed by parentheses containing the arguments:

javascript

console.log(greetUser("Sara")); // "Hello, Sara!"
console.log(greetUser("Alex")); // "Hello, Alex!"

Every call runs the function body fresh with the new argument.

Function declarations have one special behavior: hoisting. JavaScript moves all function declarations to the top of their scope before any code runs. This means you can call a function declaration before the line where it appears:

javascript

console.log(square(5)); // 25 -- works fine
 
function square(n) {
  return n * n;
}

Hoisting is convenient, but it is specific to function declarations. Expressions and arrow functions do not hoist.

Function Expressions

A function expression assigns an anonymous function to a variable:

javascript

const functionName = function(parameter1, parameter2) {
  // code to run
  return value;
};

Here the function has no name of its own. It exists only because it is assigned to the calculateTax variable, and that variable is what you call:

javascript

const calculateTax = function(amount, rate) {
  return amount * rate;
};
 
console.log(calculateTax(100, 0.08)); // 8

The key difference from declarations: function expressions are not hoisted. The variable exists from the top of the scope, but the function is not assigned to it until that line executes.

javascript

console.log(double(5)); // ReferenceError: Cannot access 'double' before initialization
 
const double = function(n) {
  return n * 2;
};

Use a function expression when you need to assign a function conditionally, pass it as an argument, or when the function only makes sense in one place.

Arrow Functions

Arrow functions are a shorter syntax introduced in ES6:

javascript

const functionName = (parameter1, parameter2) => {
  // code to run
  return value;
};

If the body is a single expression, you can drop the curly braces and the return keyword. JavaScript treats the expression after the arrow as the return value automatically:

javascript

const add = (a, b) => a + b;
const greet = (name) => `Hello, ${name}!`;

If there is exactly one parameter, you can even drop the parentheses around it, which shortens the syntax further for short callbacks:

javascript

const double = n => n * 2;

Arrow functions are ideal for short callbacks and functional array methods, where a compact inline function reads more clearly than a full declaration:

javascript

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]

Arrow functions do not have their own this, arguments, or super. For a full comparison of all three declaration styles, see JavaScript Function Expressions vs Declarations and JavaScript Arrow Functions: A Complete ES6 Guide.

How to Call a Function

Calling a function is straightforward: write the name, then parentheses with arguments separated by commas.

javascript

function displayInfo(name, age, city) {
  console.log(`${name} is ${age} and lives in ${city}.`);
}
 
displayInfo("Maya", 28, "Berlin");
// "Maya is 28 and lives in Berlin."

You can call a function as many times as you want. Each call is independent.

Calling with Fewer Arguments

If you pass fewer arguments than parameters, the missing ones become undefined:

javascript

function showThree(a, b, c) {
  console.log(a, b, c);
}
 
showThree(1, 2);
// 1 2 undefined

No error is thrown. JavaScript is lenient about argument counts.

Calling with Extra Arguments

Extra arguments are silently ignored by the named parameters, but they still exist in the arguments object:

javascript

function showFirst(a) {
  console.log(a);
  console.log(arguments);
}
 
showFirst(10, 20, 30);
// 10
// [Arguments] { '0': 10, '1': 20, '2': 30 }

Storing the Return Value

A function call is an expression that evaluates to its return value, so you can assign that result directly to a variable the same way you would assign any other value:

javascript

function multiply(a, b) {
  return a * b;
}
 
const result = multiply(6, 7);
console.log(result); // 42

If there is no return statement, the call still evaluates to something, it just evaluates to undefined instead of a useful value:

javascript

function logMessage(msg) {
  console.log(msg);
}
 
const val = logMessage("test"); // prints "test"
console.log(val);              // undefined

Calling a Function Inside Another Function

Functions can call other functions. This is how you compose logic: each small function handles one job, and a larger function combines their results into one final answer.

javascript

function addTax(price) {
  return price * 1.08;
}
 
function formatPrice(price) {
  return `$${price.toFixed(2)}`;
}
 
function displayTotal(basePrice) {
  const total = addTax(basePrice);
  console.log(formatPrice(total));
}
 
displayTotal(100); // "$108.00"

Each function does one thing. displayTotal calls addTax and formatPrice to combine their results. This pattern is the backbone of clean code.

When to Use Each Declaration Style

There is no single right answer. Many codebases use all three. The important thing is to understand how each one behaves so you can choose intentionally.

Common Mistake: Confusing Declaration with Call

A function reference without parentheses is not a call:

javascript

function getTime() {
  return new Date().toLocaleTimeString();
}
 
console.log(getTime);   // [Function: getTime] -- the function object
console.log(getTime()); // "2:30:45 PM"               -- the return value

Accidentally omitting parentheses is one of the most common beginner bugs. If a function that should return a value instead prints something like [Function: ...], check for missing ().

Where to Go Next

Declaring a function writes the recipe, and calling it cooks the meal. Once declaring and calling feel natural, learn the difference between parameters and arguments to understand exactly what happens at call time.