Different ways to declare and define function in javascript

What is the function

Functions are one of the fundamental building blocks in JavaScript. A function is a block of code that we want to reuse for calculating values from multiple statements and processes. A function is like any type of body procedure like breathing or doing some task with a hand and any type of scenario is the same we can think about function in programming, functions can have some input(or no input) with those inputs(function parameters(like body parts)) we can define function life(process) and calculate those inputs to reach to end result(like the functioning of our body parts). In Javascript, functions are first-class citizens and can have names, parameters, and return values.

There are three ways to write a function in js

• Function declaration
• Function expression
• Arrow function

Function declaration: This is the traditional way to write a function in javascript as well as in other programming languages. we can start with the 'function' keyword then the function name then parenthesis(for input(function parameters)) then curly braces for the function body. here I use the sum function example to add two values.

1. function sum(value1,value2){  // value1 = 6 and value2 = 6
2. let sumofbothvalues = value1+value2;  // sumofbothvalues = 12
3. return sumofbothvalues;  // sumofbothvalues = 12
4. }
5. sum(6,6)

so start with line 1 we use the function keyword and then the function name(sum) after that in parenthesis(value1 and value2) are function parameters(inputs) at the end of line 1 is the start of the function body with curly braces. In line 2 I declare the variable name 'sumofbothvalues' with the let keyword and assign those input value sum to that variable. In line 3 I return that variable as function output (the sum of values). In line 4 function body is closed. In line 5 I Invoke(call the sum function(like we tell ourselves in mind to pick up the glass of water and drink it(same as we tell the function sum to take these values and calculate a sum for me))).

Function expression: From this type of function writing we can write a named function or an anonyms function. these types of functions can be used in other functions for calculation and procedure purposes. here we use the same function sum for example

1. const sum = function (value1,value2){   // anonyms function with named(sum) expression
2. let sumofbothvalues = value1 + value2;
3. return sumofbothvalues;
4. }

5. function callSum(){
6. let value1 = 5;
7. let value2 = 9;
8. let sumofthesevalue = sum(value1,value2);  // here we call our sum expression
9. return sumofthesevalue;
}

start with line 1 first we declare the sum variable with 'const' keyword and bind(assign) anonyms function with two parameters. in line 2 we assign the sum of both values to sumofbothvalues keyword then in line 3 we return the sumofbothvalues. In line 5 we define a function name callSum with no parameters after that in lines 6 and 7 we declare two variables' names (value1, value2) and assign values to them. in line 8 we call the sum function expression and assign value to sumofthesevalue variable at the end of the code in line 9 we return the sumofthesevalue.

Arrow function: This type of function was introduced in ECMAScript 6, which allows the user to write functions in a shorter syntax. an arrow function doesn't have its own binding like 'this' and super. this is a one-liner declaration of functions. we use the same sum function here to understand the writing arrow function.

1. const sum = (value1, value2) => {
2. return value1 + value2;
3. }
// we can even write this
4. const sum = (value1, value2) => value1 + value2;

start with line 1 we declare the sum variable with the const keyword and assign an arrow function to the sum variable. after the assignment, we declare the parameter in parenthesis and after that, we use arrow syntax for the function. in 2 lines we return the sum of those values. in line 3 we remove the return and curly braces also for writing in an even shorter syntax. that's all.

Conclusion

In this blog post, we write and talk about what is a function in javascript and how anyone can write different types of function in javascript with their use cases.