JavaScript Course | Functions in JavaScript

Previous Topic: JavaScript Course | Loops in JavaScript
Javascript functions are code blocks that are mainly used to perform a particular function. We can execute a function as many times we want by calling it(invoking it).
To create a function, we use function() declaration, like:

// 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 functions return.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
function displayMessage(){
 alert('How you doin'?');
}
// calling the function twice
displayMessage();
displayMessage();
</script>

chevron_right


In the above code we simply wrote a function which creates a simple alert pop-up with a simple message inside it and the way we run it is by calling the function name.



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

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// local variable example
function displayMessage(){
  let message = 'This is the message';
  alert(message);
}
displayMessage();
  
alert(message); // gives an error
</script>                    

chevron_right


In the above code, 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 Variable
Outer variables allows us to use them inside the function code block and also outside it.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// Outer variable
let message = 'This is the message';
function displayMessage(){
  alert('Listen '+message);
}
  
displayMessage();
alert(message);
</script>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// modiying outer variable
let message = 'This is a message';
function displayMessage(){
  message = 'This is the updated message';
  alert('Listen '+message);
}
  
alert(message);
displayMessage();
alert(message);
</script>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// passing data using parameters
function sayHello(from, via){
  alert('You have a message from ' + from + ' via '+ via);
}
sayHello('Mom', 'WhatsApp');
sayHello('Dad', 'Telegram');
</script>

chevron_right


In the above 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// no parameter assigned
function sayHello(from, via){
alert('You have a message from ' + from + ' via '+ via);
}
sayHello('Mom'); // default 2 parameter
</script>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// using default parameter
function sayHello(from, via='not mentioned'){
alert('You have a message from ' + from + ' via '+ via);
}
sayHello('Mom');
</script>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// simple function
function sum(a, b) {
  return a + b;
}
  
let result = sum(5, 10);
alert( result ); // 15
</script>

chevron_right


In the above code, we simply create a function and passed two values in the function arguments and then stores the value in a variable result and finally alerts it. This is generally the most used scenario in which functions are used.
Next topic: JavaScript Course | Objects in JavaScript



My Personal Notes arrow_drop_up

Executive Software Developer at Cavisson Systems

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.