Open In App

JavaScript Course Functions in JavaScript

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Javascript functions are code blocks that are mainly used to perform a particular function. We can execute a function as many times as we want by calling it(invoking it).

Function Structure: To create a function, we use function() declaration.

// Anonymous function
function(){
     // function...body
}

// function with a name
function displayMessage(){
     // function..body
}

Functions in JavaScript can be both anonymous and named, it totally depends on who’s writing them. We make use of the name when we want to call(invoke) the function and use the value that the function return.

Example: In this example, we will call the same function 2 times.

JavaScript




function displayMessage() {
    console.log(`How you doin'?`);
}
// Calling the function twice
displayMessage();
displayMessage();


Output:

How you doin'?
How you doin'? 

In the above code we simply wrote a function that creates a simple alert pop-up with a simple message inside it and the way we run it is by calling the function name. Variable declaration with function has a twist there can be a local variable and can a global variable.

Local Variable: A Variable that is declared inside the function body is only available inside the function block.

Example: In this example, we will see the example of a local variable.

javascript




// JS local variable example
function displayMessage() {
    let message = 'This is the message';
    console.log(message);
}
displayMessage();
 
console.log(message); // Gives an error


Output:

JavaScript Local Variable

We declared a function named displayMessage() and then inside it declared a variable and then printed that variable and also tried to print that variable outside the function block. Trying to use of variable outside of its declared block will result in an error.

Outer/Global Variable: Outer variables allow us to use them inside the function code block and also outside it.

Example: In this example, we will see the example of an outer variable.

javascript




// Outer variable
let message = 'This is the message';
function displayMessage() {
    console.log('Listen ' + message);
}
 
displayMessage();
console.log(message);


Output:

Listen This is the message
This is the message

Example: Let’s see another example where we learn about how the function can modify the message as well.

javascript




// Modifying outer variable
let message = 'This is a message';
function displayMessage() {
    message = 'This is the updated message';
    console.log('Listen ' + message);
}
 
console.log(message);
displayMessage();
console.log(message);


Output:

This is a message
Listen This is the updated message
This is the updated message

The outer variable remains unchanged before we invoke the function but after calling the function the value changes and hence even the last alert function prints the changed value to the screen.

Passing Parameter: We can even arbitrary data to functions using parameters.

Example: Let’s see another example where we learn about how the function can modify the message as well.

javascript




// Passing data using parameters
function sayHello(from, via) {
    console.log('You have a message from '
                 + from + ' via ' + via);
}
sayHello('Mom', 'WhatsApp');
sayHello('Dad', 'Telegram');


Output:

You have a message from Mom via WhatsApp
You have a message from Dad via Telegram

In the above example, we simply passed two parameters and used them inside the main function. If somehow, one or all the parameters are not provided then javascript uses default parameters. In that case, it basically prints ‘undefined’ in place of the expected output.

Example: Let’s see another example where we learn about how the function can modify the message as well.

javascript




// No parameter assigned
function sayHello(from, via) {
    console.log('You have a message from '
                 + from + ' via ' + via);
}
sayHello('Mom'); // default 2 parameter


Output:

You have a message from Mom via undefined

Example: We can also make use of the default parameter. We simply assign the value in the argument body itself like.

javascript




// Using default parameter
function sayHello(from, via = 'not mentioned') {
    console.log('You have a message from '
                 + from + ' via ' + via);
}
sayHello('Mom');


Output:

You have a message from Mom via not mentioned

Returning a value: A function can return a value back to the code which is calling it.

Example:  A function can return a value back to the code which is calling it.

javascript




// Simple function
function sum(a, b) {
    return a + b;
}
 
let result = sum(5, 10);
console.log(result); // 15


Output:

15

In the above code, we simply create a function and passed two values in the function arguments and then store the value in a variable result and finally alert it. This is generally the most used scenario in which functions are used.

To know more about the JavaScript Function please follow the attached link.



Last Updated : 13 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads