Let's Learn Functions in Javascript

Suppose there is a task which needs to be done again and again in your program. You will have to write the code again and again. It's a lot of repetitive work. Can this effort be saved? Yes. Functions come to your rescue!

Let us begin!

What is a function?

Basically it is a piece of code which needs to be written once but can be used any number of times. Let's see how to define and use them in our programs.

Syntax for Function Declaration-

It is same as we declare variables and assign value to it.

var age = 50;

In function declaration we are assigning a program statements as a value to it.

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

A function can have multiple or no parameters. Parameters are the variables that are used in the program statements inside the function declaration.

Syntax for using the declared function(calling Function):

Defining a function does not execute it. Defining it simply names the function and specifies what to do when the function is called.

Earlier we declared a variable age and now we can use it in our program.

age=age+1;
console.log("my age next year will be "+age)

In the same way, we have to call function to use it.

functionName(argument1, argument2, andSoOn);

Arguments are the the actual values passed to the function parameters. Here argument1 is an actual value which is assigned to the parameter1 to use in the program statements inside function.
It will look like below on calling the function.

functionName(parameter1=argument1,.....){
//program statements
}

Consider below example:

//function declaration
function ageNextYear(age){
console.log(age+1);
}
//function call
ageNextYear(50);

The above statements will get executed as below-

ageNextYear(50) searches the function ageNextYear definition in our program, then saves 50 in parameter 'age' and then uses that 50 in place of age in program.
like-

ageNextYear(50){
console.log(50+1);
}

Hence gives the output as printing 51 on console.

Understanding return( ):

Some functions produces output and some functions don't. For example above function is just printing age next year in the console. But sometimes functions while execution of the program statements evaluate some values and returns it.

In short function takes the input, process it in program statements and returns the output. So this output is returned in a special statement called as return statement.

When control comes across return statement, it immediately jumps out of the function program and gives the output(value written next to return) to the code that called the function.

//function declaration
function square(x){
return x*x ;
}
//function call
var squareOfNumber = square(4);
console.log(squareOfNumber);
//→16

When the function reached return (4x4=16), it puts 16 value in place of function call (square(4)) and that value gets assigned to variable squareOfNumber.

More about Parameters and Arguments

What if we do not pass any value to parameters in function call, can we give a default value to execute the function's program?

The answer is yes, we can. We can assign default values to parameters in function declaration.

//function declaration
function square(x=3){
console.log(x*x);
}
//function call
square();
//→9
square(5);
//→25

When square is called with no value passed, square function's parameter is defined with value 3 and that gets used in program statements execution.

function square(3){
console.log(3*3);
}

And if we pass any value like 5, then x gets re-assigned with new value 5.

function square(5){
console.log(5*5);
}

What if we pass more values in function call, which one of them will be taken by parameter? And answer is extra arguments gets ignored.

//function declaration
function multiply(x,y){
console.log(x*y);
}
//function call
multiply(5,6);
//→30
multiply(5,6,7);
//→30

x saves 5, y saves 6 and extra values passed(7) will be ignored.

function multiply(5,6){
console.log(5*6);
}

Arrow Functions

What if we want our function to look compact and not bulky.
In such cases we use arrow functions. Arrow function is just a syntax/notation to declare a function. Instead of the function keyword, it uses an arrow (=>) made up of an equal sign and a greater-than character.

var functionName = (parameter1, parameter2, andSoOn) => {
//program statements
//return statement
}

Now how do we use this function. It is same as earlier:

functionName(argument1, argument2, andSoOn)

Let's see an example-

var square = (x)=>{
return x*x;
}
console.log(square(2))
//→4

If we have only one statement in our program inside function we can exclude the { } braces.
In such case, statement written after the arrow will be considered as return statement.

var square = (x) => x*x;
console.log(square(2))
//→4

We can exclude ( ) bracket if we have only one parameter.

var square = x => x*x;
console.log(square(2))
//→4

If we do not have any parameter, we have to write empty () brackets as part of syntax.

var printWelcome = () => console.log("Welcome");
printWelcome();
//→Welcome

Functions are one of the fundamental building blocks in JavaScript. I hope this article helped you in understanding Functions better and to use them in your programs.