Functions in JavaScript

Hi Folks, In this article we will be learning about functions in JavaScript. Functions are the heart of JavaScript. Everything in the JavaScript is based on functions.

Functions:-

Functions are building block in any programming language, Functions makes our job easy by defining a task or logic in it.

Before understanding about importance of functions, Let us see an example. Suppose we want to add two no's then the procedure will be:-

var a = 10;
var b = 20;

var sum = a+b;
console.log(sum); // Print 30

If I want to add two no's again which is 50 and 20 then we will follow the same procedure, we'll declare another two variables and add them and print them.

Here functions came into picture, We will define the logic of adding two no's in function then we don't need to write the same logic again and again and we can add multiple no. of pairs without writing much line of code.

Functions has it's own syntax which is written below:-

function function_name(arguments){  
   // Write the piece of code we want to execute
     return output;
}

To declare a function we need to write function and it's name and pass some arguments in parenthesis() and it will return some output. and To run a function we need to call it in it's scope.

Now we will declare a function which will add two no’s:-

function sum(a , b){

    var output = a + b;  // Calculating sum
    return output;
}

var result = sum(10,20); // Function calling
console.log(result); // Print 30

Working of Function

1. Now to run a function we need to call it somewhere in scope.

2. As we can see in above example where I called sum() function and passed two arguments 10 and 20.

3. Now my a and b variable in sum(a, b) function will point towards and 10 and 20 respectively (a=10, b = 20). Sum function will use these arguments(a = 10, b = 20) and calculate their sum and return the output where the function is being called.

4. As we called sum() function in result variable then return value of sum function will be stored in result variable. And we are printing the result.

As we can see, we can add multiple no. of pairs just by calling my function, like sum(10,10) , sum(50,60) etc. we don't need to write the same logic again and again.

Note:-

It is not necessary that function always takes arguments and have some return value. There are functions without arguments and without return value.

Let us see an example:-

function greet(){  
   console.log("Good Morning"); // Print Good Morning
}

greet();

As in above example greet function is not taking any argument and has no return statement this is why we are not calling it in some other variable.

Note:-

Nature of function is to return something where it is being called. If we don't define any return statement then by default it returns undefined.

e.g.

function greet(){  
   console.log("Good Morning"); // Print Good Morning
}

let output = greet();
console.log(output);  // Print undefined

As I called greet function in output variable then function will invoke and complete it's task defined in function that is to print "Good Morning" , as it has no return value then by default it will return undefined which will store in output variable.

Default parameterized function

It is the type of function in which we defined some argument in function itself.

e.g.

function sumOfThree(num1 , num2 , num3 = 30){
      console.log(num1 + num2 + num3);
 }
 sumOfThree(10,20);

As in above example we defined third argument in function itself then at the time of calling we passed only two arguments.

Another Example

 function sum(num1 , num2 , num3 = 30){

     console.log(num1 + num2 + num3);

 }

 sum(10,10,50);

As in above example I defined num3 variable in the function but at the time of function calling I passed the value of num3 too. Then my passed value 50 will override the predefined value 30 in the function and all num3 will refer to 50 instead of 30. Therefore the result will be (num1 = 10, num2 = 10, num3 = 50) , 70.

What is NAN ?

NAN means not a number , when we add numbers with some undefined values then we get NAN.

e.g.

function f1(n1 , n2 , n3 , n4){

    console.log(n1);  // Print 10
    console.log(n2);  // Print 20
    console.log(n3);  // Print 30
    console.log(n4);  // Print undefined

    let ans = n1 + n2 + n3 + n4; // 10 + 20 + 30 + undefined  
    console.log(ans);  // Print NAN

}

f1(10,20,30);

As in above example, I passed only three values in arguments at the time of function calling, therefore (n1 = 10 , n2 = 20 , n3 = 30 , n4 = undefined), when we added these values then we got NAN which means not a number.

Type of NAN

First thing first typeof is an operator in JavaScript which return the data type of variable. e.g.

console.log(typeof "Hello World"); // Print String
console.log(typeof 100);   // Print Number

Similarly we'll find the typeof NAN.

function f1(n1 , n2 , n3 , n4){

    let ans = n1 + n2 + n3 + n4; // 10 + 20 + 30 + undefined  
    console.log(ans);  // Print NAN
    console.log(typeof ans); // Print Number
}

f1(10,20,30);

As NAN means not a number but if we find the type of NAN then it returns number because NAN holds the potential to be a number that's why the typeof NAN is number.

TypeCasting

Typecasting means converting data type of a variable into another data type.

It is two types.

1. Implicit Typecasting

2. Explicit Typecasting

Implicit Typecasting

In Implicit typecasting, conversion takes places by the compiler or the interpreter as per requirement.

e.g.

function fun(num1 , num2 , num3){

     console.log(num1 + num2 + num3);  // "sam" + "10" + "undefined"

 }

 fun("sam" , 10); // sam10undefined

As we can see, num1 , num2 , num3 (“Sam” + 10 + undefined ), all three values are of different data type.

“Sam” —> String, 10 —> number, undefined —> Undefined.

10 and undefined can be use as a string. Hence our compiler will convert the data type of 10 and undefined to string and our output will be (sam10undefined).

e.g. 2

 function fun(a, b){

    console.log(a+b); // 10 + true
    // 10 + 1 --->  11
 }

 fun(10, true)

As we can see, a and b cannot be added because of different data type but ‘true’ can be converted into number. Hence compiler will convert the true into number which is 1. Therefore a + b (10 + 1) \= 11.

Explicit Typecasting

In Explicit Typecasting, Conversion is done by user by predefined methods.

e.g.

let a = Number(true) // This will convert in no.
console.log(a);  // 1

let b = (false).toString();  // This will convert in String
console.log(b);

Note:-

Thank you so much for reading it completely, Go and get your hands dirty on it and try all the code by yourself. If you liked it do like, comment, share and follow for more content. Comment for any feedback.