JS Functions

JavaScript

Share


In this tutorial we will learn about JavaScript functions.

Function

A function is a block of code that is executed when the function is called.

We use functions in order to reuse a piece of code.

Syntax

In order to create a function in JavaScript we use the function keyword followed by the function name. Then we have parenthesis ( ) which can contain some parameters. And finally we have the braces { } inside which we have some code.

In the following example we have a hello function.

function hello() {
	console.log("Hello World!");
}

Naming functions

Name of JavaScript functions must be unique and can use only the following characters.

  • Letters a-z A-Z
  • Digit 0-9
  • Dollar sign $
  • Underscore _

Following are some of the valid function names.

function name() {
	
}

function age() {
	
}

function school_name() {
	
}

function _temp() {
	
}

Following are invalid function names.

function 1address() { //invalid starts with digit

}

function student-name() { //invalid using the - symbol

}

Invoking Function

We use the () operator after the function name when we want to invoke (call) a function and execute its code.

In the following example we have a function hello and we invoke it to print "Hello World" in the browser console.

//this is function declaration
function hello() {
	console.log("Hello World!");
}

hello();	//this will invoke the function

Function declaration

Function declaration is the creation of a function with zero or more parameters.

Following is an example of a function declaration.

function hello() {
	console.log("Hello World!");
}

We invoke or call a function using the function name and ( ).

Function expression

It is a creation of a function without the use of function name. A function without a name is called an anonymous function.

Following is an example of a function expression.

var hello = function() {
	console.log("Hello World!");
}

We can call a function expression using the name of the variable that is holding it. In the above case the function expression is assigned to hello variable so, to invoke the function we use hello().

Return

By default a function returns undefined when it is invoked or called. In order to return a specific value we use the return statement.

In the following example the function hello() has no return statement. Hence it returns undefined.

//function declaration
function hello() {
	console.log("Hello World!");
}

//invoking function and printing its returned value undefined.
console.log(hello());

The above code will output:
Hello World!
undefined

In the following example the function getMessage() will return "Hello World!" string.

//function declaration
function getMessage() {
	return "Hello World!";
}

//invoking function and printing its returned value "Hello World!".
console.log(getMessage());

The above code will output:
Hello World!

Function Parameters

Function parameters are placeholder for values that we pass to a function. These are names inside the parenthesis ( )

Function parameters are like variables and follow the same naming convention.

The actual value that we pass to the function is called argument.

In the following example we have a function add that has two parameters x and y. This function will return the result equal to x+y. We will pass 3 and 4 as argument to the add function and we will return 7.

//declaration
function add (x, y) {
	return x+y;
}

//call
var sum = add(3, 4);

//output
console.log(sum);	//this will print 7