Javascript Basic – How to define Object in Javascript

Javascript Object

 An object is a data type rather than a primitive data type. The object is a data structure like an Array to store multiple properties against data. Objects can be created using the object() constructor or object initializer / literal syntax. An object has no complexity, like an index number in an array.

Object Declaration

An object can be declared in two ways such that the literal way and another one is the object constructor.

Here we are discussing the literal way. A JavaScript object is literally a comma-separated list of key-value pairs wrapped in curly braces.

var player = {
   name: 'Matts',
   foot: 'right',
   age: 23,
   country: 'Ireland'
};

Object literal property values ​​can be of any data type, including array literal, function, and nested object literal. Here is a literal example of another object with this property type:

var machine = {
   brand: 'Hatts',
   established_in: 1978,
   owner: ['China', 'India', 'Chille', 'Qatar'],
   status: function(){
       return this.brand + ' established in: ' + this.established_in + ' and own by ' + this.owner[3];
   }
};

Object literals are defined using the following syntax:

• Key-value pairs will be assigned to a variable through a pair of curly brackets.
• A colon-separated property of key and value.
• A comma-separated each key-value pair.

Declaring object by Constructor

An object is a built-in constructor of Javascript. “Object” constructor is usually used for object-oriented programming.

Example:

var machine = Object();
machine.name = 'Toyota'
machine.Model = 'TM-3098'

Output:

{ name: 'Toyota', Model: 'TM-3098' }

Accessing object properties

There are two ways to access an object. One is dot notation and the other is array notation.

Example:

var score = {
   x: 10,
   y: 20,
   z: 55
};
console.log(score.x); // Dot notation
console.log(score['x']); // Array notation; Property name should     be in string type.

Output:

10
10

Update value of Object

If you are trying to access an object property that is not present in the object then a property will create that you are trying to access. Otherwise, the value will be updated.

Example:

var score = {
   x: 10,
   y: 20
};
>>> { x: 10, y: 20 }
 
score.y = 33;
>>> { x: 10, y: 33 }
 
score.p = 36;
>>> { x: 10, y: 33, p: 36 }
 
var prop = 'z';
score[prop] = 44;
>>> { x: 10, y: 33, p: 36, z: 44 }

Remove properties from the Object

If we want to remove any unwanted properties then we will use delete operators.

Example:

var score = {
   x: 10,
   y: 20,
   z: 36
};
>>> { x: 10, y: 33, z: 36 }
 
delete score.y;
>>> { x: 10, z: 36 }

Comparing two objects

When two objects are compared, it is basically a comparison of their memory locations. So if we want to compare two objects we have to compare their properties one by one.

Example:

var score1 = {
   x: 10,
   y: 20
};
var score2 = {
   x: 10,
   y: 20
};
 
console.log(score1 == score2);
console.log(score1.x == score2.x && score1.y == score2.y);

Output:

false
true

Note: If we can convert the object into a string then we don’t have to worry about comparing one by one anymore.

Example:

var score1 = {
   x: 10,
   y: 20
};
var score2 = {
   x: 10,
   y: 20
};
 
console.log(score1.x == score2.x && score1.y == score2.y);
console.log(JSON.stringify(score1) == JSON.stringify(score2));

Output:

true
true

Iterate an Object

If we want to know if any properties belong to that object like an array iteration then we have to use “ in operator “. Actually, it’s a for in loop.

Example:

var score = {
   x: 10,
   y: 20
};
console.log('y' in score);

console.log('p' in score);

Output:

true
false

Object Methods

Here we are discussing some basic object methods.

Example:

var score = {
   x: 10,
   y: 20
};
Object.keys(score);

Object.values(score);

Object.entries(score);

var score2 = Object.assign({}, score);
score2.x = 100;

Output:

[ 'x', 'y' ]
[ 10, 20 ]
[ [ 'x', 10 ], [ 'y', 20 ] ]
{ x: 100, y: 20 }