Optional Parameter in JavaScript Function

Yes you heard it right, C# brought optional parameter in version 4.0 however it is part of JavaScript from beginning of the language design.

JavaScript function,

  1. Does not do any type checking on argument values
  2. Does not do any checking on number of arguments passed

There are three ways you can call a function in JavaScript

  1. With exact number of arguments
  2. With more number of arguments than specified
  3. With less number of arguments than specified


With less numbers of arguments

When you call a function with less numbers of arguments then left arguments are passed as undefined. To understand it more let us consider below example,



When creating function you may want to check for arguments which being not passed and assigned a default value. There are two ways you can assigned a default vale

  1. Using If statement
  2. Using || operator

Let us assume that you want to assign default value for optional parameter as 99. You can do that as following



Or better way to assign default value is using or operator. If first argument is falsy object in OR operator then it will always use second object. So when you don’t pass optional argument its values is undefined (falsy) and default value will get assigned.



Always remember to put optional arguments at end of argument list. You cannot make first argument as optional argument and pass second argument. If you want to do this then you will have to explicitly pass undefined as first parameter. So you can make first argument optional as below,




With more numbers of arguments

Other possibility is that you are calling a function with more number of arguments. So for example you are calling above function as following,



There is no direct way extra arguments can be read inside function. But there is a way using that extra arguments can be read. We can read extra arguments using arguments object. So you can read extra arguments as following



You can check exact number of arguments as following and throw exception


So this is all what I have in this blog to share with you on Optional arguments in JavaScript function. I hope you find this post useful. Thanks for reading.

About these ads

Reflection in JavaScript

While working with JavaScript you may come across a scenario when you need to reflect type of a particular property. Let us say you have an object Student like following,


If you want to find type of students object property like name and marks you can get them as following,


Now go ahead and fetch type of calculateGrades.


You will get expected output as following,


If you slightly modify above code as below you will get undefined as output. We have put braces in finding type of function



While reflecting getting these two values as output may not be good idea

  1. Function
  2. Undefined

You may want to avoid these values in your code or can use other method hasOwnProperty . You can use this method to find that whether object contains that particular property or not. Following code will alert True since name is property of object Student.


Now let us go ahead and pass function name calculateGrades as value to hasOwnProperty. You will find true as output again.


Interestingly in above code you see that when we pass constructor as input output is false. Reason behind this is hasOwnProperty method does not look for the method in whole property chain. It will only look for the input parameter in current object. As clearly we see that Student object does not have constructor property of its own hence hasOwnProperty is giving false for this.

Better way of doing reflection in JavaScript could be as follows,


By using hasOwnProperty method and typeof operator you can work with reflection in JavaScript. I for your reference code discussed in this post is given below,

<script type="text/javascript" >
 function GetData() {

var Student = {
 name: "DJ",
 marks: 100,
 calculateGrades: function () {
 var typeofmarks = typeof (Student.marks);


if (Student.hasOwnProperty('name')) {
 var typeofname = typeof (Student.name);



I hope you find this post useful. Thanks for reading.

Learning Bootstrap Part 3: Working with Image and Icons

Read Part 1 here: Getting started with Bootstrap

Read Part 2 here: Working with Buttons

Working with images are very essential of web application development and Boot strap also realize this. If you want to create rounded image, circled images or Polaroid image then that is as easy as adding a class.

You can create a circled image as following


Circled images will look like following


You can create round corner images as following,


Rounded image will look like following


You can create Polaroid image as following,


Polaroid image will look like following ,


You can create different types of images as following

<!DOCTYPE html>
 <script src="Scripts/jquery-1.7.1.min.js"></script>
 <link href="Content/Site.css" rel="stylesheet" />
 <!-- Bootstrap references -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
 <div class="container">

 <img src="Images/uk.jpg" class="img-polaroid"/>
 <img src="Images/indiaflag.jpg" class="img-circle"/>
 <img src="Images/deepika-paduk.jpg" class="img-polaroid" />


It is very easy to work with Icons also in Bootstrap. Bootstrap supports free icons from http://glyphicons.com/ for developers. There are 140 icons avialble. You need to follow following steps to work with icons

  1. Create a <i> tag
  2. Set class of <i> tag with icon name. For erxample if you want to create calendar icon then that can be created as following


You can add icons to buttons as following . A Search button can be created as following . We are nesting <i> tag inside button taf to create a button with icons.


You can create different size of button with icons as following ,


Above buttons can be created as following

<div class="container">
 <a class="btn btn-large">
 <i class="icon-search"></i>Search
 <br />
 <a class="btn btn-small">
 <i class="icon-search"></i>Search
 <br />
 <a class="btn btn-mini">
 <i class="icon-search"></i>Search

You can create navigation lists with icons as following

<ul class="nav nav-list">
 <li class="active"><a href="#home"><i class="icon-home icon-white"></i>Home</a></li>
 <li><a href="#"><i class="icon-gift"></i>Gift</a></li>
 <li><a href="#"><i class="icon-picture"></i>Images</a></li>
 <li><a href="#"><i class="i"></i>Misc</a></li>

And you will find navigation bar created as following,


In this way you can add icons to any other elements. Bootstrap makes working with icons and images very easy. I hope you find this post useful. Thanks for reading.