Functions in JavaScript

What would you do if you are given a task in which you have to run a particular block of code multiple times in your program? Don't you think so that being a programmer it would sound very lame to write that particular block of code repetitively? So here comes the concept of functions, to reduce your efforts.

What is a function?

So a function is a block of code that is used to perform a particular task multiple times. It is based on the concept of write once and use many times.

Advantages of functions

It gives us a way to structure larger programs, to reduce repetition, to associate names with subprograms, and to isolate these subprograms from each other.

Syntax for functions

In javascript, a function is defined using the keyword function followed by the function name and parentheses "( )". These parentheses can either be empty or can contain single or multiple parameters based on your program. Then comes the function body which contains the statements that are to be executed when the function is called. The function body must always be written in curly braces.

function functionName(parameter1, parameter2, parameter3){
// program statements
}

Some basic terms regarding functions:

Arguments: These are the real values passed to (and received by) the function while calling the function.
```
functionName(argument1, argument2);
```
Parameter: These are the names listed in the function definition which takes the values of arguments.
```
function functionName(parameter1, parameter2) { 
// function statements
}
```
Return: The return statement specifies the value returned by the function.
```
return x* y;
```

Calling a function

We cannot just expect output by just defining a function, we have to call/invoke the function. When a function is called, arguments are passed to the function as input, and the function can optionally return a value.
calSquare(5);
So here we are calling our function calcSquare with 5 as an argument.

Example of a function

So now let's consider an example for calculating the square of a number:

//calling a function
calSquare(7);

//function definition
function calcSquare(number) {
  return number* number;
}

//output => 7*7=49

So in the above example, we are calling our function calcSquare with 7 as an argument (instead of this 7, we can also use a variable whose value we can take from the user). Now after calling the function, this statement will jump to our function definition and start executing the code inside it. The function calcSquare takes one parameter, called number which will get its value from the argument. The function consists of one statement that returns the parameter of the function (ie, number) multiplied by itself.

Arrow Functions

Arrow functions were introduced in ES6. This gives us a way to write functions in a compact and much simpler way. Instead of the function keyword, it uses an arrow (=>) made up of an equal sign (=) and a greater-than (>) character. The arrow comes after the list of parameters and is followed by the function’s body.

// normal function
function (num1, num2){
  return num1 + num2;
}

// arrow function
(num1, num2) => {
  return num1 + num2;
}

Parentheses and braces in arrow function

When there is only one parameter name, we can omit the parentheses. Also if there is only a single statement inside the function body then we can remove the braces as well as the return keyword and that expression will be automatically returned from the function.

//with parentheses and braces
const calcSquare= (x) => { 
return x * x; 
}; 
//without parentheses and braces
const calcSquare= x => x * x;

Both the above functions will calculate the square of a given number

But, if the function body has multiple lines or multiple parameters then we need to use the braces and the return keyword.

// this is CORRECT way
(a, b) => {
  let num= 2;
  return a * b * num;
}

// this is WRONG
a, b =>
  let num= 2;
  return a * b * num;

Conclusion

Once a function is defined, it can be used over and over and over again. We can invoke the same function many times in our program. I hope this article helped you in understanding functions better :)

Simran Gangwani's Blog