Functions in JavaScript

JavaScript functions are fundamental building blocks of the JavaScript language. In this tutorial, we will learn what is a JavaScript function, how to create a function in JavaScript, and how to invoke it and return values from it.

What is Javascript Function 

A JavaScript function is a block of JavaScript code that performs a specific task or calculates the value. We may pass values to the function and it may return a value. We define the function only once in our program, but execute or invoke it many times i.e. we reuse it at other parts of the program. Functions also make code readable & maintainable.

Creating a function

We can create a function in JavaScript in four ways

  1. Function Declaration or Function Statement
  2. Function Expression
  3. Arrow Function
  4. Function constructor

Function Declaration

The simple way to declare a function is to use the function declaration or function statement

A function declaration starts with a function keyword. It is followed by a list of parameters and then followed by JavaScript statements inside curly braces {…}

Function Syntax

The Syntax for creating a function is as follows

Name: The function name. It uniquely identifies the function and is required. We use the name to refer to the function elsewhere in the application. The JavaScript behind the scene creates a variable and assigns the function to it. A function name must follow all the rules of variable naming. Hence we can use only letters, digits, underscores, and dollar signs.

param contains the list of parameters (comma-separated) inside parentheses. They are optional. Functions can have multiple parameters or no parameters at all.

statements comprise the body of the function. It will contain zero or more JavaScript statements inside curly braces {…}. These statements are executed when the function is invoked. The function body must be always enclosed in curly braces even if it consists of a single statement or no statement at all

Function example

The following is an example of a Javascript function. 

Here we name the function as calcArea. It takes two parameters width & height

Inside the function body, we declare the result variable and assign the multiplication of width & height to it.

The return statement specifies the value that the function returns. In the example, we return the result, which contains the multiplication of width & height

Javascript Functions

You can also return the result of an expression directly.

Executing or invoking Function

Functions are useful only if it executes the statements present in its body. Defining a function does not execute it. We need to invoke or call or execute it.

We invoke the function, by using the function name followed by value for each parameter inside parentheses

In the following example, we invoke the calcArea function. We pass values to the width & height parameters inside the parenthesis. We store the return value in a variable area and print it in console.

Calling or invoking a Javascript Function

Return values

A return statement determines the value the function returns.

A function may or may not produce a value. When it does, we use the return statement to return the value to the calling program. Return statement also terminates the function and control is returned to the calling program.

We use the assignment operator to capture the returned value and assign it to a variable.

The following example calculates the power of a number. We capture the returned value in a variable result and print it to the console.

A function without a return statement returns null

Function with a return statement, but without an expression after it will also return undefined

You can include any complex expressions in the return statement.

Function are objects in Javascript

Everything in Javascript is an Object. So are the functions. Functions are a special type of object in Javascript that also has a code. We can execute that code whenever we want

We can attach property to functions

Since functions are objects, we can attach properties and methods to them. In the following example, we are adding a property c to the function addNum. You can refer to that property using the addNum.c

We can store functions in a variable

We can store functions in a variable, object, and array. The following example creates an addNum function and stores it in test variable. Now we can invoke the function using test() also.

We can read the function just like any other variable. The following code uses the alert function to display the contents of the addNum. You will see the code of the function displayed on your screen.

Since alert is also a function, just check to see if you can see its code.

You will see the message native code. That is because the alert is part of the JavaScript code and is included as binary. Since there is no point in showing the binary code, it will display the message native code.

Pass functions as arguments to another function

Since functions are variable, we can pass them as an argument to another function. You can also return a function from a function.

In the following example, we create two functions addNum & multiplyNum. The third function operate takes func as the first argument, where it expects us to pass a function.

Passing a function to another function is known as callback functions.

Functions as object methods

A function is a free-floating object that exists independently. For example, the following code declares the Person object. It contains a addNum method. We expect that the addNum belongs to the person object. But in reality, you can take it out and assign it some other variables outside the Person object

In the example, we assign the addNum to addNum1 variable. Since the functions are objects, they are copied by reference. Hence both addNum & addNum1 points to the same function.

We free up the Person object by assigning null to it. Here we usually expect addNum also released from Memory. But it stays and you can invoke it using its reference addNum1()

But JavaScript goes one step further. It not only keeps the function irrespective object that is attached is no longer exists, But it also keeps its enclosing scope. This behavior is called Closure.

Variable Scope and functions

A function can define a variable within its body. We can access that variable only within that function and not outside of it.

While we can access the variable defined outside the function.

In this example, we create the variable message inside the function. It will override the variable present outside the function.

Hoisting

Now, look at the following code. We have invoked the calcArea function before its declaration. But this code works without any error. This is because of Hoisting.

Hoisting is JavaScript behavior where it moves all the declaration statements to the top. Hence even if we declare the calcArea at the end of the file, JavaScript moves it to the top.

References

  1. Functions

Read More

Leave a Comment

Your email address will not be published.

Scroll to Top