Functions in JavaScript

A function is a mini-program that performs a task. In general, a program consists of multiple small functions. These functions are just small pieces of a big program that have input, processing, and output.

Sometimes we want a particular program or task to execute repeatedly with different inputs each time. Here comes the role of a function that executes the processing logic with different input and output.

Now you have a basic understanding about function, let's discuss how to create a function.

Function Declaration

"Declare a function" is just a rephrase of "Create a function"

You need three things to create a simple function:

• function keyword
• name of the function
• statement or logic

Let's create a function -

function add(){
    //statement
    console.log(2+3);
};

Above we start with the function keyword, then name of the function add and statements of this function are defined between the curly braces.

Function Call

Once we've declared the function, we will call it to see the output.

add();

This is all you need to do to invoke a function - name of the function followed by parentheses.

"Call a function" sometimes also rephrase as "Invoke a function"

Once invoked, we'll see the output in the console.

Parameters & Arguments

In the above function, we directly put the input value 2 and 3 in the statement. But what if we want to pass the input values while calling the function.

Let's take an example.

First, we'll provide dynamic variables to the function which are called parameters. These variables are just a placeholder that holds the input values pass-through function call.

function add(firstNum, secondNum){
   // statement
   console.log(firstNum + secondNum);
};

Above we declared two parameters firstNum & secondNum inside the parentheses. We'll use these parameters as variables inside the function definition.

Now we'll pass the input values to the function for processing.

add(2,3);

Above we pass the input values 2 & 3 while invoking the function. Here 2 & 3 are arguments. These values will be passed to the parameters which are then used to process the output in the statement.

Once the function is invoked, we'll see the output in the console.

Default Parameters

Sometimes we might forget to declare the function arguments. In that case, our program might give an error and we'll not get the expected output.

To avoid this situation, Default parameters are included in the ES6, so if a value is not provided for the argument, the default value will be used.

function add (firstNum = 1, secondNum = 6){
      // statement
      console.log(firstNum + secondNum);
};

// Invoke the function
add();

If we do not pass arguments to the add function, then it'll process the output using the default values.

// Output
1 + 6 = 7

Return Statement

In the introduction section, we discussed that generally a function contains processing logic. Upto this point, our function contains both processing logic and output.

function add (firstNum, secondNum){
    // statement
    console.log(firstNum + secondNum);
};

Processing part - firstNum + secondNum
Ouput part - console.log()

Now we'll use the function to return a value and then we'll output the value outside the function. Let's add a return statement.

function add (firstNum, secondNum){
    // statement
    return firstNum + secondNum;
};

A return statement specifies the value returned by the function. Let's invoke this function.

add(2,3);

Now we want to see the expected output.

console.log(add(2,3));

Just wrap the function call in a console.log().

Function Expressions

We can also use function expression to create a function. We just need to create the function as a variable.

const language = function(){
    console.log("JavaScript");
};

language();

The output is the same. JavaScript is logged in the console.

Hoisting

Function declarations are hoisted. Till now, we are invoking the function after the declaration but we can also invoke a function before we declare a function.

// Invoking the function
message();

// Function Declaration
function message(){
    console.log("Good Morning");
};

But we cannot do the same thing in function expressions.

// Invoking the function
message();

// Function Declaration
const message = function(){
    console.log("Good Morning");
};

This program will cause an error.

TypeError: message is not a function

Arrow Functions

Arrow function is an ES6 feature that allows us to create a function without using the function keyword. We also often don't need to use a return statement.

Let's take an example -

// Normal function declaration
function greeting(name){
    return `Good morning, ${name}`;
};

Now we simplify the above function using an arrow function.

// Arrow function
const greeting = name => `Good morning, ${name}`;

We now have the entire function declaration in one line. We remove the function and return keyword. And also if there is one argument, we can remove the parentheses around the arguments.

When a function takes more than one argument, arguments should be surrounded by parentheses.

function greeting(message, name){
    return `${message}, ${name}`;
};

// Arrow function
const greeting = (message, name) => `${message}, ${name}`;

We have one line function because it returns only one statement. If there are multiple lines of statements then we'll use curly braces.

const add = (a, b) => {
    let sum = a + b;
    return sum;
}

console.log(add(1,2));

Conclusion

I hope after reading this blog you will understand the basics of function in JavaScript. If you find this blog as helpful, don't forget to share it.

Thank you 🙂

Connect with me on - Twitter Instagram