What are all the differences between function and constructor function in JavaScript?

A constructor function is a normal function.

What makes the difference here is the use of the new operator which makes the context (this) in the function the new instance, thus letting it take the two properties, and returns this new instance.

Without the new operator, the context would have been the external one (window if your code is in the global scope in loose mode, undefined if in strict mode).

That is, if you omit the new

var catC = Cat("Fluffy", "White");

the function "works" (if you're not in strict mode) but you have two different results :

• catC is undefined as your function returns nothing
• name and color are now properties of the external scope

The whole magic, thus, is in the new operator :

When the code new foo(...) is executed, the following things happen:

A new object is created, inheriting from foo.prototype.

The constructor function foo is called with the specified arguments and this bound to the newly created object. new foo is equivalent to new foo(), i.e. if no argument list is specified, foo is called without arguments.

The object returned by the constructor function becomes the result of the whole new expression. If the constructor function doesn't explicitly return an object, the object created in step 1 is used instead. (Normally constructors don't return a value, but they can choose to do so if they want to override the normal object creation process.)

When I said it's a normal function I, I omitted one thing : the intent of the developer. You usually define functions to be either called as constructors (i.e. with new) or not. In the first case you most often use the arguments to initialize the fields of the instance (using this.name = ...) and you often follow by adding functions to the prototype (as you did) so that they become available for all instances. And to make your intent clear, it's customary to name your constructor starting with an uppercase letter.

Let’s take an example to understand the birth of constructors in Javascript. Suppose, you are asked to create an object of employee and it should have 4 properties firstName, lastName, gender , and designation. Well! you said no problem.

var employee1={};
employee1.firstName="Anoop";
employee1.lastName="Rai";
employee1.gender="M";
employee1.designation="Software Engineer";

Above is the simplest way, first you created empty object and then you associated all the 4 properties to the object (of course, you could have also created the same via inline). What if you are asked again to create another employee object with the same properties.

var employee2={};
employee1.firstName="Ram";
employee1.lastName="Kumar";
employee1.gender="M";
employee1.designation="Associate Software Engineer";

Seems no problem at all. Now what if you are asked that there are total 100 employees and you just created 2 of them, common you need to create another 98 employee objects. Now you won’t be creating objects like above as it seems tedious. Gotcha! let’s create a factory method that will be called any number of times and it will create objects and then return it to us. Yeah! write once and will be used many times.

function createEmployeeObject(firstName, lastName, gender, designation){
  var employee={};
  employee.firstName=firstName;
  employee.lastName=lastName;
  employee.gender=gender;
  employee.designation=designation;
  return employee;
} 

var employee3=createEmployeeObject("Harry", "Dsouza", "M", "Project Manager");

Much convenient way, and without any duplicate codes. Just call createEmployeeObject function with your arguments and in return you get your object. What if we have several types of objects say department. Then also we will have a function that will create a department object and returns it.

So, what is common in these kinds of functions. It is:-

1. creating empty object

   var myObj={};

2. returning object after populating it

   return myObj;

Creating empty object and returning object is common across all functions that create objects. Javascript has created a shortcut that lets you not to write these lines when you are using function that creates objects. So, these 2 lines can be skipped. Way to do this is by using Constructors.

Using functions for creating objects is fairly common in Javascript, so Javascript provides shortcut that lets you write functions for creating objects. These special functions are called Constructor functions. Constructors are functions that lets you populate the object which you need to create.

function createEmployeeObject(firstName, lastName, gender, designation){
  this.firstName=firstName;
  this.lastName=lastName;
  this.gender=gender;
  this.designation=designation;
}
var employee4=new createEmployeeObject("Alan", "Marks", "F", "Business Analyst");

You must know about this keyword It points to the current object.Remember that in Constructor functions Javascript creates empty object for us, so this actually points to that object only. Javscript Construtor functions automatically returns the object after it is populated. Now how to tell Javascript that a function is called in Constructor mode, it’s the new keyword that tells Javascript to treats a function as Constructor function. Everytime you need an object, use new keyword and then call a function, and then that function prepares an object for us and returns it.

Even though Javascript is not class based, you must take care of the Constructor function name. it’s not good to use camel case, use regular one.

function Employee(firstName, lastName, gender, designation){
  this.firstName=firstName;
  this.lastName=lastName;
  this.gender=gender;
  this.designation=designation;
}
var employee5=new Employee("Mark", "Watson", "M", "DBA");

http://jkoder.com/javascript-constructors-why-it-should-be-used-object-oriented-programming-in-javascript/

Dystroy has it.

Another way of saying it, is that a function becomes a 'constructor' when it is being called with the new Operator, constructing a new class instance.

This is also the reason for the Capitalisation convention in the function name that is mentioned, so that other devs can see that it is a constructor, and that is falls in with the current convention of naming classes