Objects in JavaScript

JavaScript primitive data types contain only a single value, but Non-primitive or User defined data types like object is used to store collection of values in the form of key-value pair.

Object is created using new keyword or curly brackets {...}. Syntax:

let student = new Object(); //student is object, new is keyword, Object is use to create object.
let student = {};
//Both above syntax are used to create empty object

We can store a list of properties in object. A property is a 'Key:value' pair, where key is a string (also called a 'property name'), and value can be of any data type. Syntax:

let student = {     // an object
    name: "Ankit",  // key "name", value "Ankit"
    age: 30         // key "age", value 30
};

To Get/display values, use object.propertyName: After creating above object write the following syntax:

console.log( student.name ); // Ankit
console.log( student.age );  // 30

To add property in object, after object is created. Example: add property result whose value can be true (if pass) or false (if fail) in the above student object.

student.result = true; // boolean value

To delete property from object, use delete keyword. Example: delete student's age property.

delete student.age; // delete age property

We can also use multiword to define property names, but it must be in quoted.

let student = {
    name: "Ankit",
    age: 30,
    'grade point': 4.5
};

To add multiword property after object is created, use square bracket instead of .(dot)

student['grade point'] = 4.5; //add property: instead of .(dot) use square bracket

console.log( student.name ); // Ankit
console.log( student.age ); // 30
console.log( student['grade point'] ); // display: 4.5

delete student['grade point']; //delete: multiword property
console.log( student['grade point'] ); // undefined, after deleting property

We can also input property name from user via variable.

let subject = prompt("Enter subject: ", 'computer');
let student = {
    name: "Ankit",
    [subject]: 99, //variable subject
};
console.log( student.name ); // Ankit
console.log( student.computer ); // 99, if user entered computer

We can use variable name for property value. In the below example we will assign values using function.

function assignValue(name, marks){
  return {
    name: name,
    marks: marks,
  };
}
let student = assignValue('Ankit',99)
console.log( student.name ); // Ankit
console.log( student.marks ); // 99

In the above code, property and its value (which is a variable name) having same name i.e. name: name, marks: marks, that is valid syntax and works fine, we can also write it in a shorter way:

function assignValue(name, marks){
  return {
    name, // same as name: name
    marks, // same as marks: marks
  };
}
let student = assignValue('Ankit',99)
console.log( student.name ); // Ankit
console.log( student.marks ); // 99

Example: check for property value exists or not.

let student = {
    name: "Ankit",
    marks: 99,
};
console.log( student.name==='Ankit' ) //true
console.log( student.name==='Someone' ) //false
console.log( student.age > 30 ) //false , no error if no such property

There is a special operator 'in' to check the existence of a property:

let student = {
    name: "Ankit",
    marks: 99,
};
console.log( "marks" in student ) //true
console.log( "age" in student ) //false

To display all keys & values from an object use 'for...in' loop. Syntax:

for (key in object) { //key is variable name
    // executes the body for each key
}

Example: Display all keys & values from student object using for...in loop.

let student = {
    name: "Ankit",
    age: 30,
    result: true
};
for (let key in student) {
    console.log('Key = ' + key + ' Value = ' + student[key] + "\n");
}
/* output:
Key = name Value = Ankit
Key = age Value = 30
Key = result Value = true */

console.log(typeof (programming[1])); //string 

If we declare integer key, then it will be displayed in ordered, other then integer keys are stored in created order. Example:

let programming = {
    3: "c",
    4: 'java',
    2: 'python',
    1: 'javascript',
};
for (key in programming) {
    console.log('Key = ' + key + ' Value = ' + programming[key] + "\n");
}
/*
Key = 1 Value = javascript
Key = 2 Value = python
Key = 3 Value = c
Key = 4 Value = java
*/

When we copy value of primitive data type only the value is copied, but in object, when we assign one object into another, it copy the reference.

Example: copy value in primitive data type.

let y = 10
let z = y
z = 20
console.log(y); //10
console.log(z); //20

Example: copy value in non-primitive (object) data type.

let a = {
    3: "c",
    2: 'python',
    1: 'javascript',
};

let b = a;
console.log(a[1]); //javascript
console.log(b[1]); //javascript
b[1] = 'java'
console.log(a[1]); //java
console.log(b[1]); //java

Example: Compare two objects

let a = {
    3: "c",
    2: 'python',
    1: 'javascript',
};

let b = a;
console.log(a==b); //true
console.log(a===b); //true

let c = {
    3: "c",
    2: 'python',
    1: 'javascript',
};
console.log(a==c); //false

To delete object, simply assign null value in the object.

let a = {
    3: "c",
    2: 'python',
    1: 'javascript',
};

let b = a;
a=null
console.log(a); //null
console.log(b); //{1: 'javascript', 2: 'python', 3: 'c'}

We can also define functions inside the object.

let programming = {
    name: "Ankit",
    age: '30',
	display(){ //function defined inside object, without function keyword
		console.log(programming.name); //Ankit
		console.log(programming.age); //Ankit
	}
};
programming.display(); //function call

Above example can also be written using 'this' keyword. 'this' refers to the current object.

let programming = {
    name: "Ankit",
    age: '30',
	display(a){
		console.log(this[a]); //this keyword with variable inside square bracket
	}
};
programming.display('name'); //Ankit
programming.display('age');  //30

If we copy one object into another then 'this' keyword is helpful