Hey! readers in this blog we are going to go throught with the functions in javaScript, basic syntax , declaration , expression etc.
First question that comes in our mind is - what exactly is function?
- In simpler terms it is something which to maintain dry (don't repeat yourself) principal , means it is that block of code which we have to use again and again in our codebase
still not clear? just look at this example:
Suppose we want to add two numbers a & b then how we are going to write the code it will be something like this :
but what if i told you again i have to add two numbers whose value is 70 and 80 , and i want to add these two numbers then it will be like this :
Have you observed something? ain't we repeating the same block of code again to get the desired output? Yes, we are now what will happens if i told to to again add two numbers whose value is 90 and 100 , then again you have to create 2 variables and again strore the result into another variable and then print the required output. So yes, we are repeating same code again and again , hence to overcome this problem concept of functions came into the existance.
Same problem using functions :
Now look at the above example, how function made our task very easy we just have to call that function and pass the arguments in it and done, we got out ans. So this is why we required functions.
Function Declaration
- it has a function name right there , we simply have to call that bame
function add(x, y){
return x + y;
}
let ans1 = add(4,5);
console.log(ans1); // output : 9
Function Expression
it basically means we are creating a function but storing that function in a seprate variable
const add = function(x,y){
return x + y;
}
let ans = add(10,20);
console.log(ans); // output 30
// here add becomes the function's name which is used for calling
// that function
Difference between the Declaration and Expression
| Feature |
Function Declaration |
Function Expression |
| Definition |
A function defined with the function keyword and a name. |
A function stored inside a variable. |
| Syntax |
function add(a, b) { return a + b; } |
const add = function(a, b) { return a + b; }; |
| Hoisting |
Fully hoisted — can be called before it is defined. |
Not hoisted in the same way — cannot be called before definition. |
| Name Requirement |
Must have a function name. |
Can be anonymous (no name). |
Basic Idea of hoisting :
Hoisting refers to the behavior where JavaScript moves the declarations of the variables and functions to the top of their scope during the compilation phase.
Key point -
Function declaration can generally be used before they apper in the code
const ans = addNums(2,3,4);
console.log(ans); // output : 9
function addNums(x,y,z){
return x + y + z;
}
Function expression usually can't be used before they are defined
const ans = addNums(2,3,4);
console.log(ans); // error
const addNums = function (x,y,z){
return x + y + z;
}
When to use each type ?
Function declaration : when we want a simple named function, or when we want to call it anywhere, even above the definition of the function or when we are writing normal "utility" functions like add subtract multiply etc.
function addNums(x,y,z){
return x + y + z;
}
Function Expression : when we want to store the function in a variable or when we want to pass it somewhere.
const addNums = function(x,y,z){
return x + y + z;
}
Try it yourself :
here are some simple tasks that you can perform :
Write a function declaration that multiplies two numbers
Write the same logic using function expression
Call both functions and print results
Try calling them before defining and observe behavior
Conclusion
Functions are the building blocks of reusable, maintainable JavaScript. They let you follow the DRY principle by encapsulating logic you need to run multiple times.
Hope you enjoyed reading❤️
