Objects: the basics

In this article, we are going to cover:

• Object creation
• Literal and properties
• Square brackets
• Computed properties
• "in" operator
• "for...in" loop
• Object reference

As we know that there are 8 types of Data Types in Javascript:

1. number
2. bigint
3. string
4. boolean
5. null
6. undefined
7. object
8. symbol

Out of these 8 data types, 7 are primitive type because their value contains only one thing.

In contrast, objects are used to store keyed collection of various data and some complex entities.

Object creation

An object is created with the {...} brackets with the properties.

Property is a key: value pair, where key is a string and value can be anything.

Objects are created with 2 syntaxes:

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

Usually, we use {} syntax i.e. object literal

Literal and properties

Let's take one object as an example:

let user = {
  name: "sam",
  age: 21
}

In this user object, there are 2 properties:

1. The first property has the key name and value as sam
2. The second property has the key age and value as 21

The property value can be access using dot notation:

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

We can add the new property as:

user.isAdmin = true;
console.log(user);  //user = {name: "sam", age: 21, isAdmin: true}

To remove the property we use the delete operator:

delete user.age;
console.log(user); //user = {name: "sam", isAdmin: true}

We can use multiword property names as well, but they must be quoted.

let user = {
 name: "sam",
 age: 21,
 "likes animes": true //must be quoted
}

Square brackets

We cannot access the multiword property using the dot operator.

//This will give a syntax error
user.likes animes = true

The dot requires a key to be a valid variable identifier.

Valid variable identifiers are those which

• contain no spaces
• doesn't start with the number
• doesn't contain special characters ( except $ and _)

We can use "square brackets notation" that works with any string.

let user = {};

//set
user["likes anime"] = true;

//get
console.log(user["likes anime"]); //true

//delete
delete user["likes anime"];

Computed properties

We can use square brackets inside the object literal to set the dynamic key.

let fruit = prompt("Which fruit to buy?", "apple");

let bag = {
 [fruit] : 5 //the fruit is taken from prompt
}

alert(bag.apple); //5 if we set fruit as apple

That's called computed properties.

"in" operator

To check if a particular property exists in our object or not we can use the in operator.

The syntax is:

"key" in object

For example:

let user = { name: "sam", age: 21};

alert("name" in user) //true, user.name exists
alert("height" in user) //false, user.height not exists

The "for...in" loop

To walk over the keys in an object we use the for...in loop.

The Syntax:

for(key in object){
//walk over all keys in object
}

For example:

let user={
  name: "sam", 
  age: 21, 
  isAdmin: true
}

for(let key in user){
//to get the keys
alert(key); //name, age, isAdmin

//to get values
alert(user[key]); // sam, 21, true
}

Object references

One of the fundamental differences between Object and primitive is that objects are stored and copied "By the reference", whereas the primitive type such as string, number, boolean, etc. are stored and copy "By the value".

What does this mean?🤔 Let's understand by the example.

Let's start with primitive, such as string

let message1 = "Ohayo mina!";
let message2 = message1;

Here we stored the value of message1 into the message2. As this is a primitive type the whole new copy of the variable is created and stored in message2.

As a result, we have 2 independent variables, each one storing the string "Ohayo mina!"

Quite an obvious result, right?

Objects are not like that.

let user={
  name: "sam"
}

Here the user does not store the object itself, but it's "address in memory" - in other words, a "reference" to it.

The object is stored somewhere in the memory, while the user variable has a "reference" to it.

Now here is something important.

When an object variable is copied, the reference is copied, but the object itself is not duplicated.

For example:

let user = {name: "sam"};

let user1 = user; //only copy the reference

Here we have assigned the user object to user1. But just like user, user1 only stores the reference to that object, not the object itself.

To explain this even more. Let's try to modify the content.

let user = {name: "Sank"};

let admin = user;

//changed by admin reference
admin.name = "Sam"; 

alert(user.name); //Sam, changed because of the same reference

As we can see in the example, we have changed the name from the admin reference still if we try to access the user.name the value is changed.

This explains that we don't have copied the object itself but the reference of that object.

Comparision by reference

Two objects are equal only if they are the same object.

Here a and b reference the same object. thus they are equal:

let a = {};
let b = a; //copy reference

console.log(a == b); //true, both have same reference
console.log(a === b); //true

Here a and b reference the different objects. thus they are different:

let a = {};
let b = {};

console.log( a == b); //false
console.log( a === b); //false

That's it for this article!

Thanks for reading🤗