JavaScript Functions: Declaration vs. Expression

Let me introduce you to function.

What are Functions?

In JavaScript, a function is a reusable block of code.

Why use them?

To avoid repetition and improve organization and efficiency.

For example, if we need to add two numbers, writing it manually every time like:

10 + 20 = 30
20 + 30 = 50
...

is not efficient. Instead, it is better to create a function that performs the addition and returns the result whenever needed.

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

console.log(addTwoNumbers(10, 20)); // Output: 30

In JavaScript there are different way to write function.

Function Declaration

This is the traditional way. It starts with the function keyword and has a name, like an ancient family name (The Starks).

function greetKing() {
  return "The King in the North!";
}

Function Expression

Here, you create a function and assign it to a variable. The function is the "mercenary," and the variable is the "contract."

const greetMercenary = function() {
  return "I fight for gold.";
};

Alright, let’s get into the Magic of JavaScript. To understand why we have two ways to write functions, we have to look at how the JavaScript engine reads your code before it actually runs it.

This is where Hoisting comes in.

Hoisting

The Secret of how JavaScript Reads Your Code

Imagine you give a book to a friend. Most people read page by page, top to bottom. But the JavaScript engine is like a speed-reader who scans the whole book first to see who the "Main Characters" are before actually reading the story.

Hoisting is JavaScript's behavior of moving declarations to the top of the current scope during that first scan.

Function Declarations:

When you use a Function Declaration, JavaScript sees that function keyword and says, "I know this guy!" It moves the entire function to the top of the memory.

So, You can call the function before you even write it in your file.

// This works perfectly!
greetKing(); 

function greetKing() {
  console.log("The King in the North!");
}

Why this work? Because during the scan, JavaScript "hoisted" the greetKing function to the very top. By the time it starts executing the code, it already knows exactly what that function does.

Function Expressions:

With a Function Expression, you are assigning a function to a variable (using const or let). JavaScript handles variables differently. It sees the variable name, but it doesn't look at what’s inside it until it actually reaches that line of code.

So, If you try to call it before the line where it’s defined, the code will crash.

// This will throw an ERROR!
// greetMercenary(); 

const greetMercenary = function() {
  console.log("I fight for gold.");
};

// This works fine.
greetMercenary();

Why it will throw error? JavaScript knows there is a variable called greetMercenary, but it’s empty (uninitialized) until the engine physically lands on that line. It's like a contract that hasn't been signed yet.

Aspect	Function Declaration	Function Expression
Hoisting	Fully Hoisted.	Not Hoisted.
Calling	Can be called anywhere	Can only be called after the definition line.
Goal	Best for global, always-available tools.	Best for on-the-fly logic or passing into other functions.

So now you know,

• Declarations are Hoisted: Like a Stark’s reputation, the kingdom knows they exist before they even arrive.

• Expressions are Not: Like a sellsword, they don't exist in the eyes of the law until the contract is signed.

"The only way to learn a new programming language is by writing programs in it."

— Dennis Ritchie

Let's Connect! 🚀

I’m currently deep-diving into the JavaScript, building projects and exploring the internals of the web. If you're on a similar journey or just love talking about JavaScript, let’s stay in touch!

• Connect on LinkedIn: Satpalsinh's Profile

• Follow my Blog: blogs.satpal.cloud

Keep coding and keep building.