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

Functions are an integral part of a language, unlike you in your friend group.

It makes code reusability possible so you don't have to write same / similar code / logic again and again.

So let's see Functions in JS.

What is a Function

Function is a reusable block of code. With this you just write the logic once and use it as many times as you want.

If there is some changes in the logic, you only have to make changes at one place and it will reflect across all the places you have used that function.

Function declaration syntax

This is the normal way of declaring a function which is similar in many languages.

Here's a classic example of adding two numbers, though not as classic as your rejections.

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

console.log(add(3, 6)); // 9

Here function is a key word which is used to declare a function, add is the name of the function, a & b are parameters that this function accepts and expects, and lastly the body of the function enclosed in curly braces, where the main logic lays.

return is a key word which returns back a value to the function caller.

To execute a function you must call a function by writing it's name and passing expected arguments with it inside parenthesis, like it is in the given example.

These arguments will be assigned to the corresponding parameters in the function definition.

Function expression syntax

This way of creating a function is unique to JS. You can make a name less function and assign it to a variable as an expression.

Now the variable acts as the function name, you can call the function by the variable name.

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

console.log(add(3, 6)); // 9

Although you can give a function name, so that you can refer it inside it self for recursion.

You can also use this function expression as callback function or as function arguments / parameters.

Hoisting in Functions

JS first loads all the variables and function definitions into memory and then starts to execute the program, this process is called housing.

Because of that you can access variables and functions before they are declared in the program.

But the variables which are declared with const or let goes into Temporal Dead Zone, means it is hoisted but you can't access them before they are declared.

And since you assign a function expression to a variable, if the valuable is declared with const or let you can't access it before the declaration.

Key Differences

Feature	Function Declaration	Function Expression
Syntax	function name(){}	const name = function(){}
Hoisting	Fully hoisted	Not callable before definition
Name required	Yes	Optional
Usage	Standalone	Stored in variable

Final Thoughts

Use declaration when:

• defining main functions

• utility functions

• functions used throughout the file

Use expression when:

• assigning functions to variables

• passing functions as arguments

• creating callbacks

• using closures

Explore and play with these for better understanding.

Don't forget to enjoy coding.