-
It is very important to understand Objects in depth in order to understand Javascript as almost everything can be considered as Objects in Javscript.
-
All Javascript values except primitives(string, number, bigInt, boolean, null, undefined) are Objects like Arrays, Regular expressions, Functions, Dates, Maths etc.
-
Even strings, numbers and booleans can be considered as Objects if they are defined with new keyword.
-
As discussed before, Object datatype represents complex entities which consists of key-value pairs. Objects can be created using curly brackets({ }) with an optional list of properties.
-
A property is a “key: value” pair, where key is a string, and value can be anything. Keys are also called property names.
let employee = { // object
"name" : "foo", // key is name and value is foo
"id" : 123 //key is id and value is 123
};In the above example, employee is an object and it has two properties:
- Property name / key is "name" and it's value is "foo"
- Property name / key is "id" and it's value is "123".
Property values can be added using the dot notation like below, if the key name is a multi-word then use [""].
employee.isTrainee = true;
employee.businessUnit = "IT";
employee["last name"] = "bar"; // [] are used if the property name is a multi-word.Property values can be accessed using the dot notation like below:
console.log(employee.name);
console.log(employee["last name"]); // [] are used if the property name is a multi-word.delete employee.businessUnit;Try yourself here.
The better way to loop over Objects in Javascript is by converting them to arrays and use normal Array looping techniques.
You can convert an object to an array by using the following methods
This creates an array which contains the properties or keys of an object.
This creates an array which contains the values of the properties or keys of an object.
This creates an array which contains the both keys and values of an object.
let info = {
name: "foo",
id: 123
}
const keys = Object.keys(info);
console.log(keys) ; // [ 'name', 'id' ]
const values = Object.values(info);
console.log(values) ; // [ 'foo', 123 ]
const arr = Object.entries(info);
console.log(arr) ; // [ [ 'name', 'foo' ], [ 'id', 123 ] ]Run here
The above example helps you to understand how you can convert objects to arrays. If you are using Object.entries then you need to destructure it like const [name,id] of arr.
Once the objects are converted to arrays, then you can use the normal iteration techniques for an array as discussed here.