DONATE  
MENU
AJAX
PHP
CSS
JSON
MYSQL
JAVASCRIPT
HTML

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 » Introduction » JavaScript Functions
Share Tweet WhatsApp

JavaScript Functions

A function is a special data type that contains a group of statements in its code block. The statements execute whenever the function is called or invoked. A code block is a statement or group of statements contained in curly braces ({}).
function myFunc(){
alert("This is my function.");
}
The code block in the above is,
{
alert("This is my function.");
}
Importance of Functions Functions are very important data types in JavaScript that allows us group statements which are executed whenever told to do so. For example, a function can be defined to add two numbers together and return the output. It will do just that whenever it is called. Therefore, they allow for re - usability of codes. A good example of a function you should have been familiarized with is the JavaScript predefined alert(). It contains statements that help alert a message on a webpage whenever called upon. Functions & Methods Both a function and a method are same thing. The difference is that a method is a function that is define in an object. Therefore, it can not be invoke without the object name.
myFunc(); //invoking a function
objectName.myFunc(); //invoking a method that belongs to the object "objectName"
console.log("Hello"); //log() is a method of the object "console"
Creating Functions To define a function explicitly, the basic syntax involves, First, the function keyword. Secondly, the function name. Thirdly, parentheses (()). And finally, the function code block.
function addNum(){
alert(3+4);
}
A function can also be define implicitly using the new Function() prototype. Contained in it should be the individual parameters of a function if any and finally the body or statements of the function.
<script>//DEFINING THE FUNCTION
var myFunc = new Function ("x","y","alert(x * y)");
//"x" is a parameter
//"y" is also a parameter
//"alert(x * y)" is the body of the function

//INVOKING FUNCTION
myFunc(4, 5);
</script>

Copy PRACTICE IT

Arrow Functions Yet again, there is the arrow method of creating functions which was introduced in ECMAScript6. Functions created this way are usually known as arrow functions because of the use of this arrow sign, (=>) when creating them. This method is actually a shorthand or alternative method of creating traditional JS functions. For example, below is a traditional method of creating a function,
function addNum(){
alert(3+4);
}
To create the above in an arrow function equivalent goes thus,
<script>
var addNum = () =>{
alert(3 + 4);
}; //Creates the function

addNum(); //Invokes the function
</script>

Copy PRACTICE IT

You can remove the curly braces ({}) if the function contains just one statement just as in the above.
<script>
var addNum = () => alert(3 + 4);; //Creates the function

addNum(); //Invokes the function
</script>

Copy PRACTICE IT

Arrow functions can also have parameters,
var myFunc = (a, b) => return a * b; //Creates the function
myFunc(2, 2); //Invokes the function
You need to remove the return keyword if the function has only one statement just as in the above function.
<script>
var myFunc = (a, b) => a * b; //Creates the function which returns the value of a multiply by b
alert(myFunc(10, 10)); //Invokes the function
</script>

Copy PRACTICE IT

You can remove the parentheses (()) if the function contains just one parameter.
<script>
var teller = amt => "Your amount is $"+amt;
alert(teller(1200));
</script>

Copy PRACTICE IT

The above was just an introduction on arrow functions as you will learn more about them in subsequent tutorials. Nevertheless, you may come across them and should be able to recognize them. For example,
<script>
var amts = [100, 200, 500, 1000];
var amts_naira = amts.map((amt) => "N"+amt);
alert(amts_naira);
</script>

Copy PRACTICE IT

Notice the use of the arrow function '(amt) => "N"+amt' as an argument/callback function to the map method of the array object.
It is best to always define functions explicitly. It enhances the readability of your codes.
A Function Parameter & Argument A function parameter is a variable declared in the parentheses of a function which can be use inside a function while its value (argument) is assigned when invoking the function. An argument is a value assigned to a parameter when invoking a function.
function name(personName){
alert(personName); //using a parameter "personName" inside a function
}//personName is a parameter

//invoking function
name("Omamode"); //Omamode is an argument/value being assigned to the personName parameter
name("Esther"); //Esther is an argument/value being assigned to the personName parameter
//Omamode and Esther are arguments
You can have as many parameters and arguments as you want in a function. Invoking A Function Function invocation is the act of calling on a function to do what it was created for. A function is meaningless to your program if not invoke because functions only execute when invoked. To invoke a function, we write the function name followed by parentheses (()). Inside the parentheses, we can assign arguments to a function if there are supposed to be any.
addNum(); //invoking a function
alert("Hello World"); //invoking a function with a parameter
findMax(4,100,6,8,23);//invoking a function with multiple parameters
When you invoke a function without parentheses (()), it won't execute rather it will return the function definition which can be seen when alerted.
<script>
function callMe(){
alert("Where are you?");
}

alert(callMe);
</script>

Copy PRACTICE IT

Constant Functions In JavaScript, you can redefine a function and erase its previous definition. This is called overriding and even applies to JavaScript pre - defined functions. For example, let's override the popular JavaScript alert function.
<script>
function alert(msg){
document.write(msg)
}
alert("Hello World");
</script>

Copy PRACTICE IT

Above, you can see how we override/altered the pre defined JavaScript alert() function to do something else than what it was previously defined for. This also means that any of your variables irrespective of what value it holds can be override or its value change if it is not a constant. Constant functions achieves same thing as constant variables. That is, functions whose definitions cannot be change. For whatever reason, below is how to define a constant function.
<script>
const myFunc = function (){
alert(1);
}
myFunc();
</script>

Copy PRACTICE IT

It cannot be override. Your codes may not execute in some browsers if any attempt is made to override them. If the codes manage to execute, the first definition will still be active.
<script>
const myFunc = function (){
alert(1);
}

function myFunc(){
alert(2)
}

myFunc();
</script>

Copy PRACTICE IT

Function's typeof() When used on a function, the typeof() operator returns "function". Therefore, to test if a value is a function or not, use the typeof() operator on the value.
<script>
function myFunc(){
}

alert(typeof(myFunc));
</script>

Copy PRACTICE IT

You will learn more on functions in the tutorial chapter dedicated to functions. SUMMARY
  1. A function contains statements that execute whenever called or invoke to do so.
  2. Functions are important because they facilitate the reusability of codes.
  3. A function parameter is a variable declared in the parentheses of a function and can be use inside the function.
  4. The value assigned to a function parameter is known as argument and is assigned when invoking the function.
  5. For whatever reason, you can define functions whose values cannot be override.
  6. The typeof operator when used on a function will return function.
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