Click here to Skip to main content
14,175,662 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

18.1K views
23 bookmarked
Posted 21 Sep 2016
Licenced CPOL

Understand Functions in JavaScript

, 25 Sep 2016
Rate this:
Please Sign up or sign in to vote.
This article is intended to provide all the basics of JavaScript functions a web developer must know.

Function is not a bizarre word to software developers. If your day to day activities involve even a little bit of coding, you must be ending up creating/modifying one or more functions before logging off for the day.

A function in a nutshell is nothing but a set of statements to perform some action. A function may have some input parameters (to be used in the function body) and may return a value after execution.

While JavaScript functions also have these characteristics, they are much more than just conventional functions. Functions in JavaScript are objects. You can go through my post on JavaScript objects where I mentioned that almost everything in JavaScript is an object.

Being an object, a JavaScript function may have properties and other functions (methods). Let’s have a look at a typical function definition in JavaScript.

function myNotSoGreatFunc(visitor) {
   console.log("Welcome to Code Morning Mr. " + visitor);
}

That’s right. The function above doesn’t do anything great as it just welcomes the visitors on my blog. But it demonstrates what a JavaScript function looks like. A function definition starts with keyword function followed by the function name with zero or more parameters in a parenthesis. Then actual function code (JavaScript statements) is wrapped inside a pair of curly braces { }. A function can have an optional return statement. A JavaScript function always returns a value. When there is no return statement in the function body, then function returns undefined.Function

The code below invokes the function passing visitor name as argument.

myNotSoGreatFunc("Bob Martin");
// Output: 
// Welcome to Code Morning Mr. Bob Martin.

Until now, we have just seen the very basic characteristics of the functions. We will now take a closer look at some of the advanced concepts of JavaScript functions.

Anonymous Functions

A JavaScript function can be anonymous. That means you can omit the function name from a function declaration. However, the function must be stored in a variable.

var addNumbers = function (x, y) { return x + y; }

The above syntax is also referred to as function expression. You can treat the variable addNumbers as function name and call the function as below.

var sum = addNumbers(2, 3);

Function expressions are handy when you want to pass a function as an argument to another function. Let’s try to understand this with a simple example.

var add = function (first, second) { return first + second };
var multiply = function (first, second) { return first * second };

function calculate(fun, a, b) {
    return fun(a, b);
}

I have first created two anonymous functions. The first one returns the sum and the second one returns the multiplication of two numbers. Fairly simple, nothing to be proud of. ?? Then, I have defined a function calculate which accepts a function as first parameter followed by two more parameters to accept two numbers.
I can invoke the function calculate by passing any function as first parameter.

var sum = calculate(add, 2, 3); // sum = 5
var multiplication = calculate(multiply, 2, 3); // multiplication = 6

You can see how easy it is to pass functions as arguments. This pattern is heavily used in AJAX when you pass callback functions to handle success or failure scenarios after completion of AJAX call.

More on Arguments

JavaScript is very flexible when it comes to passing or accessing function arguments. Let’s look at the ways function arguments can be manipulated.

Missing Arguments

A function can be called with fewer or more number of arguments than required. If you invoke a function with fewer arguments than declared, then missing arguments are set to undefined.

function callMe(a, b, c) {
   console.log("c is " + typeof c);
}

callMe("Code", "Morning"); 
// Output: "c is undefined"
callMe("Learn", "JavaScript", "Functions"); 
// Output: "c is string"

Arguments Object

All JavaScript functions have a special object called arguments which is an array of arguments passed during function invocation. This object can be used to access individual arguments or to get the total number of arguments passed to the function.

function callMe() {
   var i;
   for (i = 0; i < arguments.length; i++) {
      console.log(arguments[i]);
   }
   console.log("Total arguments passed: " + arguments.length);
}

This function assumes no arguments to be passed but as I said, you can pass any number of arguments to a function in JavaScript. I can call this function like this:

callMe("Code", "Morning", "Mr. Programmer");
// Output":
// Code
// Morning
// Mr. Programmer
// Total arguments passed: 3

Each argument can be accessed as an array item from arguments object. The total number of arguments passed to the function can be obtained from arguments.length property.

Default Parameters

Are you a C++ or C# programmer? Have you seen the functions with default parameters? Probably yes! ECMAScript 6 brings this feature in JavaScript and this is how you can define a function with default parameters.

function greetMyVisitors(name, profession = "The cool programmer") {
    alert("Welcome Mr. " + name + ", " + profession);
}

The function greets my blog visitors politely. It takes two parameters as name and profession and shows a welcome message in a message box. The second parameter takes a default value if no argument (or ‘undefined’) is passed during invocation. See the illustrations.

greetMyVisitors("Justin Bieber", "The singer"); 
// Shows the message "Welcome Mr. Justin Bieber, The singer"

greetMyVisitors("Bob Martin"); 
// Shows the message "Welcome Mr. Bob Martin, The cool programmer"

greetMyVisitors("John Papa", undefined); 
// Shows the message "Welcome Mr. John Papa, The cool programmer"

Nested Functions

A function may contain one or more functions inside of it. The inner functions may again contain functions inside and so on. Let’s see this in action.

function wakeUpAndCode() {
   function wakeUp() {
      console.log("I just woke up");
   }

   function code() {
      console.log("I am ready to code now");
   }

   wakeUp();
   code();
}

wakeUpAndCode();

// Output:
// I just woke up
// I am ready to code now

The function wakeUpAndCode contains two inner functions wakeUp and code. When wakeUpAndCode is called, it starts executing the function body. There are only two executable statements in the outer function, the call to wakeUp and code methods. Call to wakeUp will execute inner wakeUp function which will write the stringI just woke up” to console. Call to code will write “I am ready to code nowstring to console.

Inner functions have access to variables and parameters of all outer functions. Inner functions are kind of private implementation within a function and can’t be invoked from outside of the outer function. Use of inner functions gives birth to closures in JavaScript which I will discuss in a separate post.

Immediately Invoked Function Expression (IIFE, pronounced iffy)

An IIFE is an anonymous function expression which is invoked immediately. An IIFE looks like this:

(function() {
   // Your awesome code here
}());

All you have to do is create an anonymous function, put a pair of parentheses immediately after function definition to invoke the function and finally wrap all the code in another pair of parentheses. The outermost pair of parenthesis turns everything inside of it to an expression because parentheses can’t contain JavaScript statements. The pair of parentheses after function definition invokes the function immediately.

Any variables or functions defined within IIFE block are local to the block and it’s not possible for any code outside this scope to change them.

Have a look at this example of IIFE. The function will execute automatically without being called.

(function() {
   console.log("I run on my own.");
}());

Just copy and paste the code in plunker and see the output in browser console. If you don’t know where to find browser console, then just press F12 in your browser window to bring the developer tools. Hop over to console tab to see all the outputs of console.log statements.

IIFE are a nice way to create a local scope around your code. They help you protect your variables and functions from being changed or overridden by some other part of the application. What are the other advantages of IIFE in JavaScript? How they solve the problem of global scope pollution? Don’t forget to check my post on Immediately Invoked Function Expressions.

Constructor Functions

A function may act as a constructor and new objects can be created using the constructor function. This is one of the features that makes JavaScript object oriented. The advantage of using constructor function is that you will be able to create as many objects as you want with predefined properties and methods. If you are correlating this with classes and objects in other languages, then you are right.

Let’s create a constructor function Programmer with some properties and methods. You can assume it as a class in your favorite language.

function Programmer(name, company, expertise) {
   this.name = name;
   this.company = company;
   this.expertise = expertise;

   this.writeCode = function() {
      console.log("Writing some public static thing..");
   }

   this.makeSkypeCall = function() {
      console.log("Making skype call..");
   }

   this.doSalsa = function() {
      console.log("I'm a programmer, I can only do Gangnam style..");
   }

   this.canWriteJavaScript = function() {
      return expertise === "JavaScript";
   }
}

The function expects three arguments and creates an object with three properties and four methods. I don’t think the code above needs any explanation. I can create any number of programmer objects out of this.

var javaProgrammer = new Programmer("Mohit Srivastava", "Infosys", "Java");
var dotnetProgrammer = new Programmer("Atul Mishra", "Prowareness", ".NET");

While it’s also possible to create objects using object literal syntax with the same set of properties and methods, we need to write the same code multiple times which is not a great practice at all. If you know DRY principle of programming, you won’t deny agreeing with me. Constructor function makes it possible to define your object once and create real instances anytime you want.

Caution!

Always use new keyword to create new objects from constructor. Forgetting new and trying to create an instance like this->

var jsProgrammer = Programmer("Douglas Crockford", "Yahoo", "JavaScript")

will end up adding all the properties and methods to global window object which will be just horrible. The reason for this behavior is ‘this’ points to global window object unless specified explicitly. Using new sets ‘this’ context to the current object being created.

However, there is a workaround to overcome this problem. You may change your constructor implementation to make it scope-safe and then while creating new objects, you can happily ignore the new keyword. See the modified constructor code below. I have removed some methods to make the illustration shorter.

function Programmer(name, company, expertise) {
   if(!(this instanceof Programmer)) {
      return new Programmer(name, company, expertise);
   }

   this.name = name;
   this.company = company;
   this.expertise = expertise;

   this.writeCode = function() {
      console.log("Writing some public static thing..");
   }
}

The if condition checks whether the this object is an instance of Programmer. If not, it creates a new Programmer object and returns the same by calling the constructor again.

Note: You will not be able to create a new object from constructor in strict mode without using ‘new keyword. Strict mode enforces some coding guidelines and throws error in case you are writing something unsafe. To enable strict mode, you just have to add the stringuse strict’ in the beginning of your code. It’s a good practice to run your code in strict mode.

'use strict'
 function doSomething() { ... }
 ....
 ....

I have covered pretty much everything about functions in this comprehensive post. Functions are said to be the first class citizens in JavaScript. Understanding functions is probably the most important thing if you want to master JavaScript.

I hope I haven’t made you scratch your head reading this essay-ish post ?? and believe you got to know about functions in details. Please share the post if you liked it. If not, leave a comment to help me improve next time. See you sometime soon.

You might also be interested in:

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Dheeraj Kumar Kesri
Software Developer Apttus
India India
I'm a software developer in Bangalore, India. I have special interest in web development and I blog at www.code-morning.com

You may also be interested in...

Pro

Comments and Discussions

 
Questionprototypes Pin
Member 1206160012-Nov-16 8:00
memberMember 1206160012-Nov-16 8:00 
AnswerRe: prototypes Pin
Dheeraj Kumar Kesri13-Nov-16 19:43
professionalDheeraj Kumar Kesri13-Nov-16 19:43 
Questionwell written Pin
Member 120616003-Oct-16 7:33
memberMember 120616003-Oct-16 7:33 
AnswerRe: well written Pin
Dheeraj Kumar Kesri3-Oct-16 8:05
professionalDheeraj Kumar Kesri3-Oct-16 8:05 
GeneralRe: well written Pin
Member 120616003-Oct-16 8:40
memberMember 120616003-Oct-16 8:40 
GeneralRe: well written Pin
Dheeraj Kumar Kesri3-Oct-16 19:49
professionalDheeraj Kumar Kesri3-Oct-16 19:49 
Question"However, the function must be stored in a variable." Pin
ZevSpitz28-Sep-16 9:15
professionalZevSpitz28-Sep-16 9:15 
AnswerRe: "However, the function must be stored in a variable." Pin
Dheeraj Kumar Kesri28-Sep-16 20:03
professionalDheeraj Kumar Kesri28-Sep-16 20:03 
PraiseIt's pretty simple, informative and concise Pin
Manish Ray28-Sep-16 1:01
memberManish Ray28-Sep-16 1:01 
GeneralRe: It's pretty simple, informative and concise Pin
Dheeraj Kumar Kesri28-Sep-16 19:36
professionalDheeraj Kumar Kesri28-Sep-16 19:36 
Questionshort neat and clean Pin
zpaulo_carraca23-Sep-16 5:10
memberzpaulo_carraca23-Sep-16 5:10 
PraiseBasics of Functions Pin
Member 1268997122-Sep-16 4:15
memberMember 1268997122-Sep-16 4:15 
GeneralRe: Basics of Functions Pin
Dheeraj Kumar Kesri22-Sep-16 19:46
professionalDheeraj Kumar Kesri22-Sep-16 19:46 
GeneralRe: Basics of Functions Pin
Dheeraj Kumar Kesri22-Sep-16 19:46
professionalDheeraj Kumar Kesri22-Sep-16 19:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.190525.1 | Last Updated 25 Sep 2016
Article Copyright 2016 by Dheeraj Kumar Kesri
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid