Function Declaration vs Function Expression: What’s the Difference?

Topics to Cover

1. What functions are and why we need them

2. Function declaration syntax

3. Function expression syntax

4. Key differences between declaration and expression

5. Basic idea of hoisting (very high level)

6. When to use each type

What functions are and why we need them

Functions are reusable blocks of code, that we use to avoid writing repetitive code.

It is like having a worker who does the job automatically, when asked with certain input.

For example, in an Array of numbers, for every element you need to calculate the binary number, then instead of writing the code of converting number to binary again and again, we can just make a function that does this exact work, and return the value. In, this way, functions are like our go to buddies for any repetitive code.

1. Reusability: Write once, use everywhere.

2. Organization: Break complex logic into small, manageable chunks.

3. DRY (Don't Repeat Yourself): If you're copy-pasting code, you probably need a function.

Function declaration syntax

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

Functions are declared using function keyword. It may or may not accept a arguments, and it may or may not return a value.

Here, in this example, add is the name of function, we are just taking two parameters, a and b, and returning a+b.

Function expression syntax

const addNumbers = function(a,b){
    return a+b;
}

In JS, functions, are "First-Class Citizens", meaning, they can be treated as any other value, and can be assigned to a variable. This is Function Expression.

Function expressions can be used as a argument for another function

Declaration vs Expression

Aspect	Declaration	Expression
Definition	Defined using function name()	Function stored in a variable
Hoisting	Declarations are hoisted	Expressions are not hoisted
Execution	Processed before normal code execution (depending on type)	Evaluated when the code runs
Function form	function greet(){}	const greet = function(){}

Hoisting

Hoisting means, before code execution, JS moves functions and variables, on top of code.

This allows us to use functions, even before they are reached in a program.

But for expressions, the variables are hoisted but do not take any function body with them, so they are undefined. That's why they can't be used before they are reached.

If using var:

var f = function(){}

var f becomes undefined during hoisting.

If using const or let:

It enters Temporal Dead Zone, so accessing it throws error.

Usage

Use function declarations when:

• you want hoisting

• function is part of main program logic

Use function expressions when:

• assigning function to variables

• passing functions as arguments

• closures

• callbacks

You should try some examples yourself. Do this simple task:

Make function addNum to add 2 numbers, and see the result and check the hoisting property.

Make expression addNumExp to do the same thing, and compare both.

That's all for this article, see you next time.