DEV Community

Himanshupal0001
Himanshupal0001

Posted on

Functions in Js and its types!!! (Part 1)

Suppose we want a greeting massage to new users on email.

We can write :

let Username = "Namish";
let Username2 = "Iqbal"
console.log(`Hello ${Username} Have a nice day. Thanks to reaching out. I'll get back to you soon.);

console.log(`Hello ${Username2} Have a nice day. Thanks to reaching out. I'll get back to you soon.);
Enter fullscreen mode Exit fullscreen mode

Output



10Functions.js:231 Hello Namish Have a nice day. Thanks to reaching out. I'll get back to you soon.

10Functions.js:233 Hello Iqbal Have a nice day. Thanks to reaching out. I'll get back to you soon.
Enter fullscreen mode Exit fullscreen mode

As we can see same line of code is repeating itself for each user. What if there are hundreds of users or millions. That will gonna be quite hectic.

Image description

Introduction to functions

To tackle these kind of scenarios functions were introduced.
Functions will reduce the redundancy and make code more readable fast, agile.

Lets see same code with a function.

function greeting ()
{
     let name = "Shashma"
    console.log(`Hello ${name} Have a nice day. Thanks to reaching out. I'll get back to you soon.`);
}

greeting;

Enter fullscreen mode Exit fullscreen mode

Output:

Hello Shashma Have a nice day. Thanks to reaching out. I'll get back to you soon.

Enter fullscreen mode Exit fullscreen mode

As you can see we just need to change the variable's value can function we print the desired output. But wait !!!! can we optimize this function so we I have to make more less effor. Hell Yes.

Introduction to arguments in function

What is arguments ? You may ask quite often. I find it quite confusing in my early coding days.
So arguments are nothing but placeholders. Basically it tells the functions that there will value pass to the functions. Lets see the code first.

function greeting (name)
{
    console.log(`Hello ${name} Have a nice day. Thanks to reaching out. I'll get back to you soon.`)
}

greeting('Shashma');

Enter fullscreen mode Exit fullscreen mode

Output :

Hello Shashma Have a nice day. Thanks to reaching out. I'll get back to you soon.

Enter fullscreen mode Exit fullscreen mode

As you can see above the function is quite different then before. the variable name is now in () of functions. The 'name' in function function greeting(name) is a placeholder for name. It's like fill in the blanks where you have to just put the value.

But What if there are multiple placeholders we need for multiple values?

We can use multiple arguments like :

function greeting(name, regards)
{
console.log(`Hello ${name} Have a nice day. Thanks to reaching out. I'll get back to you soon. ${regards}`)

greeting('Shashma', 'regards');
Enter fullscreen mode Exit fullscreen mode

Output :

Hello Shashma Have a nice day. Thanks to reaching out. I'll get back to you soon regards.
Enter fullscreen mode Exit fullscreen mode

This way we can pass multiple arguments in a function.

But what if we don't pass the value in the function?
It will give undefined in output

function greeting (name, regards)
{
    console.log(`Hello ${name} Have a nice day. Thanks to reaching out. I'll get back to you soon.`)
}

greeting('Shashma');
Enter fullscreen mode Exit fullscreen mode

Output :

Hello Shashma Have a nice day. Thanks to reaching out. I'll get back to you soon undefined.
Enter fullscreen mode Exit fullscreen mode

To resolve this we can give default value to the arguments Like:

function greeting (name, regards='thanks')
{
    console.log(`Hello ${name} Have a nice day. Thanks to reaching out. I'll get back to you soon ${regards}.`)
}

greeting('Shashma');

Enter fullscreen mode Exit fullscreen mode

Output :

Hello Shashma Have a nice day. Thanks to reaching out. I'll get back to you soon thanks.
Enter fullscreen mode Exit fullscreen mode

If we pass the value if will give the output of that value else it will give default value.

function greeting (name, regards='thanks')
{
    console.log(`Hello ${name} Have a nice day. Thanks to reaching out. I'll get back to you soon ${regards}.`)
}

greeting('Shashma' , 'regards');
Enter fullscreen mode Exit fullscreen mode

Output :

Hello Shashma Have a nice day. Thanks to reaching out. I'll get back to you soon regards.
Enter fullscreen mode Exit fullscreen mode

Image description

Discussion (0)