JavaScript Functions

JavaScript Functions

The primary goal of a function in javascript is to help programmers from duplicating the same code. JavaScript functions are used to write code in one single function which we can use the same code in other places of the application without rewriting everywhere. We just need to call the function wherever we the same code to executed

A function is a code snippet that can be called by other code or by itself, or a variable that refers to the function. When a function is called, arguments are passed to the function as input, and the function can optionally return an output. A function in JavaScript is also an object.

A function name is an identifier declared as part of a function declaration or function expression. The function name's scope depends on whether the function name is a declaration or expression.

Syntax
new Function ([arg1[, arg2[, ...argN]],] functionBody)
Parameters

arg1, arg2, ... argN Arguments are the values we pass to the function. You can pass list of arguments starting from 1 ..N

functionBody

A string containing the JavaScript statements comprising the function definition

Functions can be constructed in three main ways. We begin with three "Welcome to SnoopCode " examples:

Way 1
function hello() { alert("Welcome to SnoopCode"); } hello();
Try It Now

Way 2
var hello = function() { alert("Welcome to SnoopCode"); };
Try It Now

Way 3
var hello = new Function( 'alert("Welcome to SnoopCode");' );
Try It Now

Each function called with Hello() does not expect any arguments, and it performs an action to alert the user with a message it also returns undefined when execution finished

Function Invocation

As we know that function will be called when calls it within the program. The function Invocation will be done in the following ways.

Function Return

Function in JavaScript will stop execution once the “return” statement executes. When you write a return statement in the function, the next set of lines in the code will not be considered to execution.

Function can return a computed value back to the caller once the execution process done.

Example

Simple example with passing 2 values to perform operation in function and return back a value.

var sum = addNumbers(12, 33); // Function is called, return value in sum function addNumbers(x, y) { return x + y; // Function returns the addition of a and b }
Try It Now

Functions Used as Variables

Functions are also like variables like definining and using them in other places of the program.

document.getElementById("area").innerHTML = "The area of Circle is " + area(43); function area(r) { return (3.14) * (r * r); }
Try It Now

Different types of JavaScript functions

JavaScript Anonymous Function

An anonymous function is a function without a function name:

An anonymous function is a function that is not stored in a program file, but is associated with a variable whose data type is function_handle. Anonymous functions can accept inputs and return outputs, just as standard functions do. However, they can contain only a single executable statement

Anonymous function declaration function () {}
Example (function(message) { alert(message); }('I am called by Anonymous function which has no name'));
Try It Now

Another Way to Declare the Anonymous

var anon = function() { alert('I am called by Anonymous function that has no name'); }; anon();
Try It Now

The most common use for anonymous function is using them as arguments to other functions, or as a closure.

JavaScript named function

A named function is a function with a function name:

Named functions can be either declared in a statement or used in an expression. Named function expressions create readable stack traces. The name of the function is bound inside its body, and that can be useful. And we can use the name to have a function invoke itself, or to access its properties like any other object.

Declararion function hello() {}
Example function hello() { alert("Hello, World"); } hello();
Try It Now

Declaring a named function binds the function to the name in its surrounding environment

We can declare a named function anywhere, and its binding can be used everywhere.

JavaScript Inner Functions

An inner function is a function inside another function (square in this case). An outer function is a function containing a function (addSquares in this case):

Example function outer(){ var a = "Outerfunction"; document.write(a + " called " + "<br>") var innerFct = function () { var c = "Inner function "; document.write(c + " called " ) } innerFct(); } outer();
Try It Now

JavaScript Recursive function

A recursive function is a function that calls itself.

Recursion is one of the most deceptively simple programming concepts. It sounds straightforward, but once you start working with it and try to understand really how it works, you may find yourself dizzy and confused.

Recursion is used to solve problems that contain smaller sub-problems. A recursive function can receive two inputs: a base case (ends recursion) or a recursive case (continues recursion).

Example
function loop(x) { if (x >= 5) // "x >= 5" is the exit condition (equivalent to "!(x < 5)") return; // do stuff loop(x + 2); // the recursive call } loop(0)
Try It Now

Why is Recursion Good For?

Recursion is a technique for iterating over an operation by having a function call itself repeatedly until it arrives at a result. Most loops can be rewritten in a recursive style, and in some functional languages this approach to looping is the default.

Function parameters

In JavaScript, parameters of functions default to undefined. However, in some situations it might be useful to set a different default value. This is where default parameters can help.

Note:

• JavaScript function definitions do not specify data types for parameters.
• JavaScript functions do not perform type checking on the passed arguments.
• JavaScript functions do not check the number of arguments received.

Declaration functionName(parameter1, parameter2, parameter3 .... parameterN) { // code goes here } Example function totalSum() { var i, sum = 0; for(i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } document.getElementById("demo").innerHTML = totalSum(500, 53, 400, 555, 454, 68);
Try It Now

Practice with our Interactive Live code editor and take your JavaScript Skills to the next level

Pass number to a function

Pass value to a function

Pass Form value to a function

Pass an array to a function



Sources and Credits

The source of the content has been referred and updated with Mozilla Developer Network and W3C Organization

Last Updated Jul 29, 2015, 07:00:14 PM

Browser compatibility

Feature
Basic support	Yes	Yes	Yes	Yes	Yes	Yes	Yes