DONATE  
MENU
JAVASCRIPT
JSON
HTML
AJAX
PHP
CSS
MYSQL

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

Creating Functions

Creating functions in JavaScript is same thing as defining a function. To create a function, 1. You start with the function keyword. 2. Followed by the name of the function. 3. Then, the parentheses (()). 4. Finally, curly braces ({ }) inside of which you are going to define the statements for your function.
function myFunc(){
//Statements will go here
}
<script>
function greet(){
alert("Good day and welcome to my webpage");
}
</script>

Copy PRACTICE IT

Defining Functions On Variables You can also create and define your functions on variables. In this case, the function don't necessarily need a name as you won't be able to call them with that name but rather the variable name. When we define functions on variables, they are called function expressions while the function without a name assigned to the variable is known as an anonymous function.
//THIS FUNCTION DEFINITION
var myFunc = function greet(){
alert("Hello");
};

//IS SAME THING AS
var myFunc2 = function(){
alert("Hello");
};
Above is how we define functions on variables. The variable name therefore becomes the name by which the anonymous function can be called or invoke. Learn about function invocation in the next page.
NOTE:
  • Since defining a function on a variable simply means we are assigning the function as a value to the variable, this makes the process a statement that should end with a semi - colon(;).
    var myFunc = function(){
    };
Function Definition A function definition is the body of a function starting from the function keyword to the last curly brace (}).
//BELOW IS A FUNCTION DEFINITION
function myFunc(){
alert(45);
}
When you call a function without parentheses(()), its definition is returned instead of the function executing.
<script>
function myFunc(){
alert(45);
}

myFunc;
</script>

Copy PRACTICE IT

The function above will not execute because it wasn't invoked with parentheses. What it returned was the function definition which unfortunately wasn't stored on any variable. Below is the function definition returned,
<script>
function myFunc(){
alert(45);
}

alert(myFunc);
</script>

Copy PRACTICE IT

Implicit Functions Functions are a JavaScript data type and have an object prototype. We can create a function using this prototype which is the Function() prototype. To create the function, you make use of the new keyword. It's arguments should be the various parameters of the function and lastly its definition.
<script>
var myFunc = new Function("x","y","var sum = x + y; alert(sum);");

myFunc(10,10);
</script>

Copy PRACTICE IT

In the above, the x and y are the parameters of the function while the last argument(var sum = x + y; alert(sum);) is the function definition. You will learn about parameters and arguments in subsequent pages. You Can Have A Function Inside A Function You can define and invoke a function(s) or do any of the two inside a function. In fact, you can do practically everything you can do outside a function inside a function. Functions basically allow us to group codes so that we can use them at anytime. SUMMARY
  1. A function is created by first declaring the function keyword, followed by the function name, parentheses (()) and finally, the function code block containing statements to execute when the function is invoked.
  2. Functions can be declared or assigned as values to variables. In this case, the variable name becomes the name by which the function can be invoke.
  3. Declaring functions on variables means we should also have semicolons after the functions' code block.
Take a short quiz on Creating Functions.
Ask a question or tell us if Creating 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