Functions in JavaScript

Functions are one of the fundamental building blocks of any programming language. Functions are block of code enclosed in some brackets that perform a given task. To use a function, we must define it somewhere in the scope from which we can call/invoke it.

Let's start by declaring a function:

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

We just declared a function called hello, in order to execute it, we need to call it.

What do you I mean by call the function?

In all programming languages, whenever you need to execute a function, you have to call it. No matter how many functions you have in your code, it won't be executed until you have called the function.

How to call a function?

It's simple, just add your function name followed by an opening and closing brackets

hello(); //Hello World

Assigning functions to variables:

In JavaScript, you can assign/store a function in a variable.

var someVariable = function(){
console.log("My Function")
}

Notice something, I didn't name the function.
The function is an example of unnamed/anonymous function.

The above function can also be written as:

var justAnotherVariable= function myAnotherFunction(){
console.log("My another named Function");
}

To execute these functions you have to call them.

Let's call myFunction

someVariable(); //My function

Let's call the second function.
But wait how do we call it?
The function has been assigned to a variable.
Should we use the variable name or function name?

In JavaScript, whenever you assign a function to a variable, no matter if it is a named function or anonymous(unnamed) function, to call it, you have to use the variable name followed by an opening and closing brackets.

In the example above someNamed function has been stored in the variable justAnotherVariable, in order to call it, we have to use the variable name followed by parentheses.

justAnotherVariable()  // My another named function

Function Declaration & Function Expression

Functions are declared by using the function keyword.
Every function declaration must begin with the function keyword.

Let's declare a function foo.

function foo() {
console.log("Hello from foo");
}

A declared function gets executed only when it is called.

In order to execute foo, we have to call it.

foo(); // Hello from foo

In JavaScript, functions can also be defined using an expression and function expressions can be stored/assigned to a variable.

Let's declare a variable baz and store a function to it.

var baz = function () {
console.log("Hello from baz")
}

Once a function expression has been assigned to variable, in order to call the function expression we have to use the variable.

baz(); // Hello from baz

The main difference between a function expression and a function declaration is the function name, which can be omitted in function expressions to create anonymous functions.

Argument & Parameters

When we declare a function, we can receive some addition information/values to the function. These additional information will be passed by us when we call the function.

These values when passed while calling the function are called arguments whereas in the function declaration they are called parameters.

Example:

We receive two parameters a and b while declaring the function bar and pass two arguments 5 and 15 when calling it.

function bar(a, b){
return a+b;
}

var add = bar(5, 15); 
console.log(add); //15

First Class Function, High Order Function and Callback

JavaScript has a concept of First class function.

A programming language is said to have First-class functions when functions in that language are treated like any other variable. In such a language, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable.

We have already seen the example of a function being assigned to a variable.

Let's see an example of how a function can be passed as argument to another function and returned from a function.

Example 1:
Function passed to a function

function greet(){
console.log("Hello from greet")
}  

function doSomething(callback){
callback() // calling the passed function
}

doSomething() // Hello from greet

Calling the function doSomething  calls the callback function which is greet in our case

Example 2:

Function returned from a function

function add(num1,num2){
console.log("I'm number 1: "+num1);
console.log("I'm number 2: "+num2);
} 

function adder(){
return add;
}


var x = adder() 
x(10,20) //I'm number 1: 10
         //I'm number 2: 20

In the above example, we called the function adder and stored the returned function add to variable x. Since, x is now storing a function, we call it and pass arguments 10 and 20 respectively.

Callback

A Callback is just an identifier for a function that is passed as argument to another function. In the above examples, the function greet is a callback.

High Order Function

Any function that takes a function as an argument or returns a function is called a high order function. In the examples, both the functions doSomething and adder are high order functions.

Conclusion:

Functions are the building blocks in JavaScript. Functions can perform complex operation, take input values, process and return values. In JavaScript, functions can also return a function from a function, store a function to a variable, pass a function to another function.

If you liked the post then do share your feedback.
I'd love to hear from you. Connect with me @ Twitter

References:

MDN