Object In JavaScript With Function, Constructor, Function Constructor And Function Hoisting

Introduction to Object

In Javascript everything is Object, except for primitive values.

In Javascript we can create an Object Wrapper through Object constructor. Whatever value we give or assign to a variable the Object constructor creates an Object wrapper for that.

For ‘undefined’ or ‘null’ value the Object constructor will return an empty object.

Object Initialization

Can be created via Object.create() or new Object() or initializer notation. It is defined as enclosed curly braces {} with zero or more properties and corresponding values delimited with comma.

Eg

  1. var obj = {};
  2. // or we can also declare object as below
  3. var obj = {a:1, b:"myStr"};

Accessing properties of object.

  1. Obj.a        // 1  
  2. Obj[‘a’]   // 1  
  3. Obj.b   // myStr  

Object property overwrite.

If we define the same name property again then the second one will overwrite the first one.

Eg,

  1. var obj = {a:1, a:2}  

If we access the property ‘a’ of obj then it will display 2 as output.

Also it will only define the single property inside obj. If we try to print via console we can see output as below.

  1. Console.log(obj); // output: {a:2}  

Constructor.

In javascript constructor can be defined by simply creating the function.

  1. function Employee(name, age, type) {  
  2.     this.name = name;  
  3.     this.age = age;  
  4.     this.type = type;  
  5. }  

In the example above, function Employee() is an object constructor and we can create the objects with the help of ‘new’ keyword with the object constructor.

  1. var empObj1 = new Employee("Irshad”, 26, "Full Time");  
  2. var empObj2 = new Employee("Imran""27""Part Time");  

you can access the value of objects as empObj1.name etc.

Objects Prototypes in javascript.

All the objects inherit the properties and methods from prototype.

Note

You are not allowed to add the properties to the object constructor.

Eg: Employee.salary = 20000 . This is not allowed.

And when you access the value like below then:

  1. Console.log(empObj1.salary) // undefined  

It will return undefined because it is not allowed.

If you want to add a new property to the constructor function then you have to define inside it.

Eg. 

  1. function Employee(name, age, type, salary) {  
  2.     this.name = name;  
  3.     this.age = age;  
  4.     this.type = type;  
  5.     this.salary = salary;  
  6. }  

But with the help of prototype it is allowed to add new properties and methods.

Eg. Employee.prototype.address = “xyz address”.

Now you can access the address via any object ‘empObj1’ or with ‘empObj2’.

  1. console.log(empObj1.address)  // xyz address. 

In the same way you can add new methods to the object constructor.

  1. Employee.prototype.getEmployeeDetails = function() {  
  2.     // some definition here  

Using Object.Create to create the object.

  1. function Person() {  
  2.     this.name = 'Irshad';  
  3. }  
  4.   
  5. function Employee() {  
  6.     Person.call(this);  
  7. }  
  8. Employee.prototype = Object.create(Person.prototype);  
  9. const emp = new Employee();  
  10. console.log(emp.name); // Irshad 

Defining a function with function keyword VS declaring the function with function expression.

  1. Using function keyword for defining function.

Example 1

  1. function sum(n1, n2) {  
  2.     return n1 + n2;  
  3. }  
  4. Console.log(sum(2, 3)); // 5 

Example 2

  1. Console.log(sum(2, 3)); // 5  
  2. function sum(n1, n2) {  
  3.     return n1 + n2;  
  4. }  
  1. Declaring function with function expression
    We are storing the function definition in a variable and using that variable as a function.

Example 1

  1. var sum = function(n1, n2) {  
  2.     return n1 + n2;  
  3. }  
  4. Console.log(sum(2, 3)); // 5 

Example 2

  1. Console.log(sum(2,3)); //  Type error will be generated  
  2. var sum = function(n1, n2){  
  3.    return n1+n2;  

Function constructor

We can create a function with the built-in javascript function constructor called Function().

Eg,

  1. var sum = new Function("n1""n2""return n1 + n2");  
  2. var total = sum(4, 3);  

is the same as writing the function as below.

  1. var sum = function(n1,n2){  
  2.    return n1 + n2;  
  3. }  

Function Hoisting

Hoisting in javascript is moving the declarations to the top of the current scope. Applicable on variable and function declaration. With the help of this the functions they can be called before they are declared.