JavaScript Functions & Spread Syntax

Function might seem difficult to a lot us. Trust me, sometimes I also get confused.Well, today’s strony is all about functions.

Mostly functions are used to make our code more reuseable. Suppose you have to you are class teacher of around 10 students. Now you have to calculate total grades for all the students in your class,seems easy. Now if the say the number of students increased to 1000, quite scary right!

Don’t worry we have function to save you. Let’s start with one of the basic examples:

function  <name> (<param 1>,<param 2>...) {
     body of the function
}

the basic declaration requires function keyword , name of the function, some parameters which is completely optional and body within those curly braces (tasks you want to perform inside the function).

Default parameters

function for adding two numbers

Here, in this example, we are passing 2 values 10 and 5 to the function add and it retuning the sum of these numbers. Very easy !!

Now lets think about what will happen if we pass one value to this function

function will return a NaN value if all the parameters are not provided. Suppose you need this function to work for both single parameter as well as double, what a dilema, right? There a trick to get rid of this NaN is by setting a default value to the function.

function with default parameter

this kind of function are called function with default parameters so that if you don’t pass any value it won’t give you NaN. In this case I have set 1 as a default value for num2. You can provide any number, whatever you set here will be considered as a value of num2 when no value passed to the function.

Arguments

Now imagine a situation that you don’t know how may parameters will be passed to your function. Like, you a teacher to 50 students and every year number of students will be increased. Now just image every time you have to add new parameters to make your function work. What a tough life!!

A simple trick will solve this as well. Arguments is an array like object which holds the values passed to a function as arguments.

But be careful arguments are not like Array . So array functions like push,pop won’t work with arguments except for length.

function with arguments

Rest parameters

Unilke, arguments there is another parameter which is called rest paramenter. It can take all your parameters and keep it as a array instance. You can perform array functions like forEach ,sort, map ,push or pop for rest params.

function with rest parameter

Function scope

For scope, you can think it like a zone. Think you want to share any secret about your love life and you have 3 best friends whom you trust the most.So this is your comfortable zone or you access scope, where you can keep you secrets.

Sometimes functions have its own variables which you declare inside a function, these variables can’t be accessed outside of function. These variables can only be accessed with those curly braces of the function. This is called function scope for those variables.

sum declarled inside add function will get undefined error if used outide

Arrow Functions

shortcut way to write a function. Here, you won’t need to put function keyword or fuction name,. No need to declare variables or return statement as well.

(parameter) => expression

Let’s see the previous example for adding 2 numbers. As easy as it is just remove the function keyword and add an arrow.The total will be set into sum variable .