DONATE  
MENU
PHP
AJAX
CSS
HTML
MYSQL
JSON
JAVASCRIPT

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Functions » JavaScript Functions
Share Tweet WhatsApp

JavaScript Functions

A function is basically a group of statements contained in a code block that are executed anytime the function is called upon. For example, if a function was created to print a text on the webpage, whenever you call it, it prints that text. A good example of a function is the JavaScript pre defined alert() function we have been working with in our various examples in which whenever we want to output a simple text to a user, we simply call on it and it does just that anytime it is called upon. You can therefore see a function as a servant that will run an errand whenever told to. Functions are very important in programming as they help us to define a group of statements we would be executing at various stages of our program and then, use such statements over and over again by simply calling the function. For example, we can create a calculator in which when a user click on calculate button just anytime, a function will be called upon to calculate the user's values. Without functions, you won't be able to execute a set of statements over and over again without reloading a webpage. In JavaScript, statements not contained in functions start executing immediately the webpage loads and after that, they are deleted until the webpage loads again.
<script>
/*The code below are not in a function.
So, they will execute when the webpage loads
and can thereafter not be used again */

var x = 552;

alert(x); /*When you call a function, it becomes just
like other statements*/
</script>

Copy PRACTICE IT

But functions do not necessarily executed immediately a webpage loads but rather must be called upon. We can thereafter call them over and over again just any time we want.
<script>
function helloWorld (){
alert("Hello World");
}
</script>

Copy PRACTICE IT

In the above, the function will not execute when the webpage loads because it was defined but it was not called.
<script>
//DEFINING A FUNCTION
function helloWorld (){
alert("Hello World");
}

//CALLING THE FUNCTION
helloWorld();
</script>

Copy PRACTICE IT

We can thereafter call the function as many times as we want.
<script>
function helloWorld (){
alert("Hello World");
}

//CALLING THE FUNCTION THREE TIMES
helloWorld();
helloWorld();
helloWorld();
</script>

Copy PRACTICE IT

SUMMARY
  1. A function consists of statements that should be executed whenever the function is told to do so.
  2. Statements not contained in functions are executed immediately a webpage loads and thereafter deleted. Therefore, what such statements does can never be repeated after a webpage is loaded unless the webpage is reloaded.
  3. But functions and their statements are not deleted because they can be called upon just anytime.
  4. A function is useless if not called as its statements would never be executed.
Take a short quiz on JavaScript Functions.
Ask a question or tell us if JavaScript Functions is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode