Understanding Objects in Javascript

What objects are and why they are needed?

Objects are used to store keyed collections of various data and more complex entities. An object can be created with curly braces {...} with an optimal list of properties. A property is a "key:value" pair, where key is a string and value can be anything.

An empty object can be created using one of two syntaxes:

let user = new Object(); // "object constructor" syntax
let user = {}; // "Object literal" syntax

A property has a key before the colon and value to the right of it.

let user = {
   name : "John",
   age : 30,
};

Accessing properties

Property values are accessible using the dot notation. The dot requires the key to be a valid variable identifier. That implies: contains no spaces, doesn’t start with a digit and doesn’t include special characters ($ and _ are allowed).

console.log(user.name);
console.log(user.age);

For multiword properties , dot notation does not work. Use square bracket notation that works with any string.

user["likes birds"] = true;
console.log(user["likes birds"]);

We can use square brackets in an object literal , when creating an object. That is called computed properties.

let value = prompt("Write any friend's name?" , "ram");
let bag = {
   [value]: 45
};
console.log(bag.value);

Square brackets are much more powerful than dot notation. They allow any property names and variables.

Adding and deleting properties

To delete a property , use delete obj.property

delete user.age;

To add and update any property , we use

let user = {};
user.name = "John";
user.surname = "Smith";
user.name = "Pete";

Looping through object keys

To iterate over an object -

let codes = {
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  "+1": "USA"
};

for (let code in codes) {
  console.log( code ); // 49, 41, 44, 1
}

Cloning and merging , Object.assign

A variable stores not the object value ,but a reference for the value. So, Copying an object variables creates one more reference to the same object. We can create a new object and replicate the structure of existing one , by iterating over its properties and copying them on the primitive level.

let user = {
  name : "John",
  age : 30
}
let clone = {};
for (let key in user){
  clone[key] = user[key];
}

We can also use the method Object.assign.

The syntax is:

Object.assign(dest, ...sources)

• The first argument dest is a target object.

• Further arguments is a list of source objects.

It copies the properties of all source objects into the target dest, and then returns it as the result.

The call structuredClone(object) clones the object with all nested properties. The structuredClone method can clone most data types, such as objects, arrays, primitive values.

It also supports circular references, when an object property references the object itself (directly or via a chain or references).

let user = {};
// let's create a circular reference:
// user.me references the user itself
user.me = user;

let clone = structuredClone(user);
console.log(clone.me === clone); // true