Operations in JavaScript object

In this article, we will learn about how JavaScript object is working and some practical methods we should learn which method to implement in which situation to achieve our goals.

So, let's see how we are creating/defining a new object in JS.

const newObject = new Object({
    prop1: 'medium',
    prop2: 'com'
});
// OR
const newObject = {
    prop1: 'medium',
    prop2: 'com'
}

1. To get all available keys from an object

const keys = Object.keys(newObject);
// ['prop1', 'prop2']

2. To assign a new property or update an existing property

newObject.prop1 = ‘co.in’;
newObject.prop3 = 'website';
Object.keys(newObject); // ['prop1', 'prop2', 'prop3']

3. Copy or Clone one object

a. Directly assign the object to another object

const copyObject = newObject; // assigned new object from old one

in this case, the new object will be a reference to the old object. Any property you change or create in any one of the object will reflect in the other object

console.log(newObject.prop1); // medium
console.log(copyObject.prop1); // medium
copyObject.prop1 = 'another_medium'; // Changed value in copied object
console.log(newObject.prop1); // another_medium
console.log(copyObject.prop1); // another_medium
// Value changed in both objects
newObject.prop1 = 'copy_medium'; // Changed value in original object
console.log(newObject.prop1); // copy_medium
console.log(copyObject.prop1); // copy_medium
//Same as before. value changed in both object

same thing will happen if you create a new object through class

const copyObject = new Object(newObject);

b. use Object.create() method. This method shows inheritance we will discuss later.

const copyObject = Object.assign(newObject);

c. define all attributes manually

const copyObject = {};
copyObject.prop1 = newObject.prop1;
copyObject.prop2 = newObject.prop2;
...
console.log(copyObject); // new copied object

But this method will not be usable if the properties is bigger and also contains more objects within itself.

d. we can stringify one object and parse it to make one more object.

const string = JSON.stringify(newObject);
const copyObject = JSON.parse(string);

This mwthod will only be useful when we have only data in the object. If we have methods and functions, then this is not going to be helpful.

e. there is a spread and get method available to copy one object.

const copyObject = {...newObject};

This method is best for copying one object as it internally spreads all the properties and methods and assigns them to the new object. This is a ES6 syntax and can only be used in ES6 compatible browsers. If needed to run in browsers with ES5 support, you need to use some compilers (babel is a good transpiler) to convert the ES6 codes into ES5 standard.

4. Object inheritance using Object.create() method

const childObject = Object.assign(parentObject);

Here, the copy object will be the extended/inherited version of the original parent object. Any modification in the parent object or extended class will remain in the same object. but when any property is getting accessed from the child object and not available within itself, it will try to access from the parent object.

Object.keys(parentObject); // [‘prop1’, ‘prop2’]
console.log(parentObject.prop1); // medium
Object.keys(childObject); // [‘prop1’, ‘prop2’]
console.log(childObject.prop1); // medium
// value in both object are same as it was present in parent class while copied to child object
parentObject.prop1 = 'broad_medium';
childObject.prop1 = 'narrow_medium';
console.log(parentObject.prop1); // broad_medium
console.log(childObject.prop1); // narrow_medium

As you can check, both the objects have their own prop1 attribute. Now we can try to delete child objects prop1 attribute

delete childObject.prop1; // Deleted prop1 from child object
console.log(parentObject.prop1); // broad_medium
console.log(childObject.prop1); // broad_medium

As you can check, the child object didn’t find the prop1 attribute within itself. So, tried to access the prop1 attribute from the parent object. We can confirm the same by also deleting the same from the parent object.

delete parentObject.prop1; // Deleted prop1 from parent object
console.log(parentObject.prop1); // undefined
console.log(childObject.prop1); // undefined

As we had deleted prop1 from both the objects, they didn’t find any attributes and showed undefined. let’s assign the same in the child object.

childObject.prop1 = 'assigned_medium';
console.log(parentObject.prop1); // undefined
console.log(childObject.prop1); // assigned_medium

As value is assigned only to the child, the parent doesn’t have any scope to access it.

5. Get all available keys and values from the object

const object = {
prop1: 'A',
prop2: 2,
prop3: null
};
const keys = Object.keys(object);
const values = Object.values(object);
console.log(keys); // ['prop1', 'prop2', 'prop3']
console.log(values); // ['A', 2, null]

Also, we can run a loop to get all of these

for(const [key, value] of Object.entries(object1)) {
    // iterable for every properties
}

6. Convert paired valued arrays to object through the map

const array = [
    ['a', '12'],
    ['4', 'four'],
    [11, null]
]
const map = new Map(array); // convert array to map entry
const object = Object.fromEntries(map);
console.log(object);
// {'a': '12', '4': 'four', 11: null}

So, in this article, we have learned a few methods to easily manage our objects effectively in JavaScript. Thank you for reading this article and I am sure that you have understood at least one new stuff from here.

Thanks
Sky Bit
skybit.bbsr@gmail.com