# Function Declaration vs Function Expression: What’s the Difference? ## Introduction: Imagine you are cooking in a kitchen. If you need to chop vegetables multiple times, you wouldn’t explain the steps again and again. Instead, you create a recipe that you can reuse anytime. In programming, functions work like reusable recipes. Instead of repeating the same code many times, we place it inside a function and call it whenever needed. In this blog, we’re going to break down: * **The "Why"**: Why we use functions to keep our code DRY (Don't Repeat Yourself). * **The "How"**: The structural differences between `Function Declarations` and `Function Expressions`. * **The "When"**: A high-level look at `Hoisting` and how to choose the right tool for the job. ## What are Functions & Why We Need Them? A function is a **reusable block of code** designed to perform a particular task. You define it once and "invoke" (call) it as many times as you need. * **Dry Principle**: "Don't Repeat Yourself." Instead of writing 10 lines of math everywhere, you put them in one function. * **Organization**: They break complex problems into smaller, manageable chunks. ![](https://cdn.hashnode.com/uploads/covers/67f6938ae40bfe8436125463/0408c16a-1592-4850-80b1-9daedfdf657b.png align="center") **Simple Example: Add Two Numbers** ```javascript function add(a, b) { return a + b; } console.log(add(2, 3)); // 5 ``` **Here:** ```plaintext add → function name a, b → parameters return → sends result back ``` **Idea of Function Reuse** ```plaintext Program | |----> add(2,3) ----> 5 | |----> add(5,7) ----> 12 | |----> add(10,20) ---> 30 ``` One function can be used many times. ## Function Declaration A Function Declaration defines a named function using the function keyword. **Syntax** ```javascript function functionName(parameters) { // code } ``` **Example** ```javascript function greet(name) { return "Hello " + name; } console.log(greet("Prince")); ``` **Output** ```plaintext Hello Prince ``` **Key Idea** The function is declared first, then called later. ## Function Expression A Function Expression stores a function inside a variable. **Syntax** ```javascript const variableName = function(parameters) { // code }; ``` **Example** ```javascript const greet = function(name) { return "Hello " + name; }; console.log(greet("Prince")); ``` Even though it looks similar, this function is **assigned to a variable**. **Output** ```plaintext Hello Prince ``` **Key Idea** The function is defined (stored in a variable) first, then executed when called. ## Declaration vs Expression ### Function Declaration ```javascript function add(a, b) { return a + b; } ``` ### Function Expression ```javascript const add = function(a, b) { return a + b; }; ``` Both do the **same job**, but they behave differently in JavaScript. ### Key Differences

Feature	Function Declaration	Function Expression
Syntax	`function name() {}`	`const name = function() {}`
Definition style	Uses `function name()`	Function stored in variable
Hoisting	Yes, Fully hoisted (can call before definition)	Not fully hoisted (must define before calling)
Call before definition	Works	Error
Usage	General purpose, global logic	Closures, callbacks, or local scope
Flexibility	Rigid structure	More flexible (can be arrow functions)

## Hoisting Hoisting is JavaScript’s default behavior where declarations are moved to the top of their scope during compilation. * **Declarations are hoisted**: You can call the function before you write it in your code. * **Expressions are NOT hoisted**: Since they are stored in variables (like **const**), you cannot use them until the code execution actually reaches that line. ### Function Declaration Hoisting This works: ```javascript sayHello(); function sayHello() { console.log("Hello!"); } ``` **Why?** Because JavaScript knows about the function before executing the program. ### Function Expression Hoisting This does NOT works: ```javascript sayHello(); const sayHello = function() { console.log("Hello!"); }; ``` **Why?** This produces an error because the variable is **not initialized yet**. ### Flow of Hoisting ![](https://cdn.hashnode.com/uploads/covers/67f6938ae40bfe8436125463/f740191e-d127-4f8d-8471-1f07434ffb57.png align="center") ## When to Use Each? * **Use Declarations** when you want a function to be available throughout your entire script and you prefer the traditional, readable structure. * **Use Expressions** when you want to limit the function's scope, pass it as an argument to another function (callbacks), or keep your global namespace clean. ## In closing I hope that you’ve found this blog on “Function Declaration vs Function Expression: What’s the Difference?” helpful...! That's all for today! 😁 You reached the end of the article 😍. ## Want more..? I write articles on [princekumar-engineer.hashnode.dev](https://princekumar-engineer.hashnode.dev/), and also post development-related content on the following platforms: * [Twitter/X](https://x.com/FarshorePrince) * [LinkedIn](http://www.linkedin.com/in/princekumar-engineer) * [GitHub](https://github.com/princekumar-engineer)