JS Functions Demystified: Declarations vs. Expressions

You are writing a JavaScript code, and want to implement a functionality repeatedly in your code. To do that, you would have to copy paste the code multiple times to make it work. This process would eventually become taxing, and it would violate the DRY principle, Don't Repeat Yourself ! Functions are the solution to this problem.
Functions are named container for a logic that can be written in two ways. Lets demistify the ways the functions can be declared and how it can be used.

What is a Function?

Functions can be compared to a recipe card in a kitchen. It doesn't do anything unless someone picks it up, follows the instructions on the card, and creates the actual dish. In writing code, you are writing the recipe card by writing a function. Calling a function is the same as cooking from a recipe.Let's understand this through a simple example to greet user whenever a user enters a website:

// Doing this manually for every user is painful
console.log("Hello, User1");
console.log("Hello, User2");
console.log("Hello, User3");

This will be a painful process when the number of user keeps on increasing. Hence, we use functions:

function greet(name) {
  console.log(`Hello, ${name}`);
}

greet("User1");
greet("User2");
greet("User3");

// Output
// Hello User1
// Hello User2
// Hello User3

The parameter gets filled with the argument whenever the function is called.

Functions can also give back a value using the return keyword which can be stored and used it elsewhere:

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

const total = add(5, 3);
console.log(total); // 8

When the return is encountered, the execution stops and send the value. If a value is returned, the line of code written after the return statement will not be executed.

Function Declaration Syntax

The function declaration starts with a keyword function, followed by a function name, along with parameters enclosed in parentheses if the function returns.

function multiply(a, b) {
  return a * b;
}

console.log(multiply(4, 6));   // 24
console.log(multiply(10, 3));  // 30

The function multiply is the block of code that can be called repeatedly and each function call is independent.

Another practical example can be:

function addTax(price, taxRate) {
  const tax = price * (taxRate / 100);
  return price + tax;
}

console.log(addTax(100, 18));   // price: 100, tax: 18%
console.log(addTax(250, 8));    // price: 250, tax: 8%
Function Expression Syntax

Function Expression Syntax

Function Expression is another way to create functions where a function is assigned to a variable. There is no function name as the variable name suffices.

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 6));   // 24
console.log(multiply(10, 3));  // 30

The output is identical which means both fucntion works the same. The difference lies in how JavaScript handles the function.

Declaration vs Expression

Feature	Declaration	Expression
Syntax starts with	function name() {}	const name = function() {}
Can be called before it appears in file	Yes (hoisted)	No (not hoisted)
Stored in a variable	No	Yes
Can be passed as an argument to another function	Technically yes, but uncommon	Yes, very common
Can be anonymous (no name)	No, name is required	Yes
Common use case	Utility functions, top-level logic	Callbacks, conditionally defined logic

Hoisting

When you execute a code, JavaScript doesn't run it line by line on the first read. Instead it scans the entire code on the first read to find all function declaration and variables and register them. This is called hoisting, where the declarations are placed at the top of the scope before the code runs. This means you can call a function declaration even if the call appears above the function definition in your file:

// Calling the function BEFORE it is defined in the file
console.log(square(5));  // This works fine

function square(n) {
  return n * n;    // 25
}

Function expression on the other hand, does not get hoisted. The variable is hoisted instead, but not the function. When the JavaScript runs the code line by line, and finally encounters the function to assign to that hoisted variable, the variable remains undefined or throws an error if declared with const or let.

// Calling before the expression is defined
console.log(square(5));  // ReferenceError: Cannot access 'square' before initialization

const square = function(n) {
  return n * n;
};

JavaScript know that square exist, but the function is not yet assigned to it. The variable lives in the temporal dead zone until the function is assigned to it in the case of const and let.

When to Use Each One

Both function definition works, the use case depends on the readability and intent.

Use Function declaration when: a named reuable utility is required that will not be reassigned which should be available across the file.

// A reusable utility - declaration makes sense here
function formatCurrency(amount) {
  return "$" + amount.toFixed(2);
}

console.log(formatCurrency(9.5));   // $9.50
console.log(formatCurrency(100));   // $100.00

Use a function expression when: a function is passed to another function, assign different fucntions in different conditions, or treating the fucntion as data. Callbacks, event handlers, and configuration options are all common situations where expressions feel natural.

const numbers = [3, 1, 8, 2, 5];

// Passing a function expression directly as an argument
const sorted = numbers.sort(function(a, b) {
  return a - b;
});

console.log(sorted);    // [1, 2, 3, 5, 8]

Another case:

const isLoggedIn = true;

const getWelcome = isLoggedIn
  ? function() { return "Welcome back!"; }
  : function() { return "Please log in."; };

console.log(getWelcome()); // Welcome back!

Function Scope

Function is JavaScript creates private space for variables declared with const or let inside the functions. Code outside the function will not be able to access the variable declared inside the function. This is known as local scope.

function makeGreeting() {
  // local variable
  const message = "Hello from inside!";  // Hello from inside!
  console.log(message);
}

makeGreeting();
// trying to access from outside
console.log(message);  // ReferenceError: message is not defined

The function did not encounter an error, but the moment an attempt was made to access the variable from outside of the function, the variable does not exist in the outer space.

Although, a function can access variables that are declared outside. They are known as global variables. The function looks for the variable outside if it cannot find variable in the outer scope.

const siteName = "MyShop";  // defined in outer scope

function showBanner() {
  // siteName is not declared here, so JS looks outward
  console.log("Welcome to " + siteName);
}

showBanner();  // Welcome to MyShop

The visual model is:

This scoping behaviour makes the function stay independent. Two functions can use variables with the same name inside its own scope without throwing an error.

---

Almost all of the JavaScript code that you will create will have functions at its core. In addition to knowing what a function is, how to create one using the two primary syntaxes, how to distinguish between a function declaration and function expression based on hoisting, and the scope, return values, default parameters, and passing functions as parameters.

To summarize the above: function declarations get hoisted while function expressions do not. Functions create their unique scope. Use return to get back a value whenever you need to return a value from a function, and since functions in JavaScript are also values, you can pass them around as if they were any other data type; this is what provides so much power and flexibility to JavaScript as a programming language.

---

REFERENCES:

• MDN: function declaration

• MDN: function expression

• MDN: Hoisting

• JavaScript.info: Function basics

• JavaScript.info: Function expressions