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 a comma.

 

Eg

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

Accessing properties of the object

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

Object property overwrite

 

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

 

Eg,

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 the output as below.

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

Constructor

 

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

function Employee(name, age, type) {
    this.name = name;
    this.age = age;
    this.type = type;
}

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.

var empObj1 = new Employee("Irshad”, 26, "Full Time");
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 the 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:

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. 

function Employee(name, age, type, salary) {
    this.name = name;
    this.age = age;
    this.type = type;
    this.salary = salary;
}

But with the help of a 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’.

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

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

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

Using Object.Create to create the object

function Person() {
    this.name = 'Irshad';
}

function Employee() {
    Person.call(this);
}
Employee.prototype = Object.create(Person.prototype);
const emp = new Employee();
console.log(emp.name); // Irshad

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

1. Using the function keyword for defining a function.

Example 1

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

Example 2

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

2. Declaring a function with a function expression
    
   We are storing the function definition in a variable and using that variable as a function.

Example 1

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

Example 2

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

Function constructor

 

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

 

Eg,

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

is the same as writing the function as below.

var sum = function(n1,n2){
   return n1 + n2;
}

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.