JavaScript Object initializer

Objects in JavaScript can be compared to real-life objects. They have properties and methods attached to them and properties are in the form of key-value pairs. Let us understand this with an example. In the real world, a motorcycle is an object and it has properties like name, color, price, etc. It has some methods attached to it like start, brake, stop, etc. All motorcycles will have similar properties but the values will be different. This same concept is applied in programming and is known as Object Oriented Programming.

JavaScript objects can be initialized in various ways which are as follows. 

• Using object literals
• Using new Object() method
• Using Object.create() method
• Using constructor functions

Using Object Literals: Properties of JavaScript objects can be accessed using a dot notation or bracket notation. For Example, obj.name or obj[‘name’] will give us the value.

Syntax:

let obj = { name: "value", .... }

Example: This example shows the above-explained approach.

Javascript

let person = {
    name: "Sarah",
    age: 20,
    gender: "female"
};
console.log(person);
console.log(person.name + " is a " + person.age + "
             year old " + person.gender);
  console.log(person.name + " is a " + person.age + "
             year old " + person["gender"]);

Output:

{name: 'Sarah', age: 20, gender: 'female'}
Sarah is a 20 year old female
Sarah is a 20year old female

Using new Object() method: The new Object() method will make a new JavaScript object whose properties can be initialized using dot or bracket notation.

Syntax:

let obj = new Object();
    obj.name = "value";

or

obj["name"] = "value";

Example: This example shows the above-explained approach.

Javascript

let Person = new Object();
Person.name = "Sarah";
Person['age'] = 20;
Person.gender = "female";

console.log(Person);
console.log(Person.name + " is a " + Person.age +
    " year old " + Person.gender);
console.log(Person.name + " is a " + Person.age +
    " year old " + Person["gender"]);

Output:

{name: 'Sarah', age: 20, gender: 'female'}
Sarah is a 20 year old female
Sarah is a 20year old female

Using Object.create() method: The Object.create() method will make a new JavaScript Object whose properties can be initialized using dot or bracket notation.

Syntax:

let Obj = Object.create({});
Obj.name = "value";

or

Obj["name"] = "value";

Example: This example shows the above-explained approach.

Javascript

let Person = Object.create({})
Person.name = "Sarah";
Person["age"] = 20;
Person.gender = "female";

console.log(Person);
console.log(Person.name + " is a " + Person.age +
    " year old " + Person.gender);
console.log(Person.name + " is a " + Person.age +
    " year old " + Person["gender"]);

Output:

{name: 'Sarah', age: 20, gender: 'female'}
Sarah is a 20 year old female
Sarah is a 20year old female

Using Constructor functions: In this method, the constructor function is used to define the object and this is used to assign value to the properties. An instance of the object is created using a new keyword.

Syntax:

function Obj(name) {
   this.name = name;
 }
 let myobj = new Obj("my name");

Example: This example shows the above-explained approach.

Javascript

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let personOne = new Person("Sarah", 20, "gender");

console.log(personOne);
console.log(personOne.name + " is a " + personOne.age +
    " year old " + personOne.gender);
console.log(personOne.name + " is a " + personOne.age +
    " year old " + personOne["gender"]);

Output:

{name: 'Sarah', age: 20, gender: 'female'}
Sarah is a 20 year old female
Sarah is a 20year old female

Supported Browser:

• Chrome 1 and above
• Edge 12 and above
• Firefox 1 and above
• Opera 4 and above
• Safari 1 and above