This article deals with creating a Javascript object and using different functions on the object. We also see how we can loop through the object and get the values.
Create a new Javascript Object
var myObject = {
fruit: 'apple',
flower: 'rose',
vegetable: 'cabbage'
};
console.log(myObject);
// {fruit: "apple", flower: "rose", vegetable: "cabbage"}
Access elements of the array
console.log(myObject.fruit); // apple
console.log(myObject.flower); // rose
console.log(myObject.vegetable); // cabbage
Another way of creating/defining object
var myObject = new Object();
myObject.fruit = 'apple';
myObject.flower = 'rose';
myObject.vegetable = 'cabbage';
console.log(myObject);
// {fruit: "apple", flower: "rose", vegetable: "cabbage"}
Get keys of the object
console.log(Object.keys(myObject)); // ["fruit", "flower", "vegetable"]
Get values of the object
console.log(Object.values(myObject)); // ["apple", "rose", "cabbage"]
Get length/size of the object
console.log(Object.keys(myObject).length); // 3
Change value of any particular key
// change value of 'mango' to 'banana'
myObject.fruit = 'banana';
console.log(myObject.fruit); // banana
console.log(myObject); // {fruit: "banana", flower: "rose", vegetable: "cabbage"}
Add item/property to the object
myObject.drinks = 'juice';
console.log(myObject); // {fruit: "banana", flower: "rose", vegetable: "cabbage", drinks: "juice"}
Remove item/property from the object
delete myObject.drinks;
console.log(myObject); // {fruit: "banana", flower: "rose", vegetable: "cabbage"}
Concatenate or merge multiple objects
// ECMAscript 6 (ES6) introduces Object.assign() method for this
newObject = {drinks: 'coffee'};
var mergedObject = Object.assign(myObject, newObject);
console.log(myObject); // {fruit: "banana", flower: "rose", vegetable: "cabbage", drinks: "coffee"}
console.log(newObject); // {drinks: "coffee"}
console.log(mergedObject); // {fruit: "banana", flower: "rose", vegetable: "cabbage", drinks: "coffee"}
Delete the newly added property
delete myObject.drinks;
console.log(myObject); // // {fruit: "banana", flower: "rose", vegetable: "cabbage"}
Check if the variable is an object
console.log(Object.prototype.toString.call(myObject)); // [object Object]
if (Object.prototype.toString.call(myObject) === '[object Object]') {
console.log('The variable is an object.');
} else {
console.log('The variable is NOT an object.');
}
var myArray = [1, 2, 3];
console.log(Object.prototype.toString.call(myArray)); // [object Array]
Using for…in loop
for (key in myObject) {
console.log(key, myObject[key]);
}
// fruit banana
// flower rose
// vegetable cabbage
Using Object.keys() method to loop through the object
// Object.keys() returns the keys of the object
Object.keys(myObject).forEach(function(key, index) {
console.log(index, key, myObject[key]);
});
// 0 "fruit" "banana"
// 1 "flower" "rose"
// 2 "vegetable" "cabbage"
Using Object.values() method to loop through the object
If you don't need "keys", then you can use the Object.values() method.
// Object.values() returns the values of the object
Object.values(myObject).forEach(function(value, index) {
console.log(index, value);
});
// 0 "banana"
// 1 "rose"
// 2 "cabbage"
Using Object.entries() method to loop through the object
// Object.entries() returns the [key, value] pair of the object
console.log(Object.entries(myObject));
// [ ["fruit", "banana"], ["flower", "rose"], ["vegetable", "cabbage"] ]
// using Object.entries() method to loop through the object
Object.entries(myObject).forEach(function([key, value], index) {
console.log(index, key, value);
});
// 0 "fruit" "banana"
// 1 "flower" "rose"
// 2 "vegetable" "cabbage"
Another way of write the above code
Object.entries(myObject).forEach(([key, value], index) => {
console.log(index, key, value);
});
// 0 "fruit" "banana"
// 1 "flower" "rose"
// 2 "vegetable" "cabbage"
Using for loop with Object.entries() method
for (const [key, value] of Object.entries(myObject)) {
console.log(key, value);
}
// fruit banana
// flower rose
// vegetable cabbage
Nested object or Multi-dimensional object
var myObjectNested = {
fruit: {a: 'apple', b: 'orange', c: 'mango'},
flower: {a: 'rose', b: 'lotus', c: 'lily'},
vegetable: {a: 'cabbage', b: 'carrot', c: 'beans'}
};
console.log(myObjectNested.fruit);
// {a: "apple", b: "orange", c: "mango"}
console.log(myObjectNested.fruit.a); // apple
Nested loop for-each
Object.entries(myObjectNested).forEach(function([key, value], index) {
Object.entries(value).forEach(function([k, v], idx) {
console.log(index, idx, key, k, v);
});
});
// 0 0 "fruit" "a" "apple"
// 0 1 "fruit" "b" "orange"
// 0 2 "fruit" "c" "mango"
// 1 0 "flower" "a" "rose"
// 1 1 "flower" "b" "lotus"
// 1 2 "flower" "c" "lily"
// 2 0 "vegetable" "a" "cabbage"
// 2 1 "vegetable" "b" "carrot"
// 2 2 "vegetable" "c" "beans"
Nested loop for-each using recursive function
function nestedLoop(myObject) {
Object.entries(myObject).forEach(function([key, value], index) {
if (value && typeof value === 'object') {
nestedLoop(value); // recursive call
} else {
console.log(key, value);
}
});
}
nestedLoop(myObject);
nestedLoop(myObjectNested);
// fruit banana
// flower rose
// vegetable cabbage
// a apple
// b orange
// c mango
// a rose
// b lotus
// c lily
// a cabbage
// b carrot
// c beans
Nested loop for-each using recursive function
Here, we use the Arrow function, also called “fat-arrow” function.
It’s a more concise syntax for writing function expressions.
It was introduced in ECMAScript 6 (ES6).
ECMAScript (ES) is a scripting language specification standardized by ECMAScript International.
// ES6 example function code:
// const multiply = (x, y) => { return x * y };
const nestedLoopNew = (myObject) => {
Object.entries(myObject).forEach(function([key, value], index) {
if (value && typeof value === 'object') {
nestedLoopNew(value); // recursive call
} else {
console.log(key, value);
}
});
};
nestedLoopNew(myObject);
nestedLoopNew(myObjectNested);
// fruit banana
// flower rose
// vegetable cabbage
// a apple
// b orange
// c mango
// a rose
// b lotus
// c lily
// a cabbage
// b carrot
// c beans
Hope this helps. Thanks.