What are Objects in Javascript

Objects, as the name suggests can be compared to real-life objects. You can define an object as a tangible thing with property and types, for example, a car object has properties like color, doors, tires, etc, it also can be of type Toyota, Nissan, etc. Javascript objects also have properties that define their purpose.

Here is how you can simply represent a car object in javascript:

const car = {
  "make": "Toyota",
  "doors": 4,
  "color": "black",
  "tires": 4 
};

Overview

in this article, we are going to cover the simple steps of:

How to access objects with Dot notation and brackets notation
How to add and update properties to a javascript object
How to delete property from a javascript object
Finally, Test object for the property

Let's get started

via GIPHY

" data-card-controls="0" data-card-theme="light">

via GIPHY

Accessing objects with Dot notation and brackets notation

You can access properties in an object using to ways Dot and brackets notation.

Here is the syntax that you can use to access a property in an object using Dot notation.

objectname.propertyname

For example:

let's use the car object from our earlier example to access the property color.

const car = {
  "make": "Toyota",
  "doors": 4,
  "color": "black",
  "tires": 4 
};

// accessing property color value

let carColor = car.color;
console.log(carColor)
// black

Accessing using brackets notation

const car = {
  "make": "Toyota",
  "doors": 4,
  "color": "black",
  "tires": 4 
};

// accessing property color value

let carColor = car[color];
console.log(carColor)
// black

something to note about brackets notation. it's mostly used when accessing properties with space between them example

const car = {
  "make": "Toyota",
  "numbers of doors": 4,
  "color": "black",
  "tires": 4 
};

// accessing numbers of doors property

let numOfDoors = car["numbers of doors"] //always use quotes
console.log(numOfDoors)
// 4

How to add and update properties to a javascript object

You can update properties the same way you update your variable. this can be done by using dot notation and brackets notation like follow.

let's update the color from our last example.

const car = {
  "make": "Toyota",
  "numbers of doors": 4,
  "color": "black",
  "tires": 4 
};

// using dot notation

 car.color = "blue";

// using brackets notation
 car[color] = "blue"

You can add new property the same way you have updated the property above. using the above example, let's add a new property to it.

const car = {
  "make": "Toyota",
  "numbers of doors": 4,
  "color": "black",
  "tires": 4 
};

// using dot notation

car.mirrors =  4;

// using brackets notation

car[mirrors] = 4;

// expected result
const car = {
  "make": "Toyota",
  "numbers of doors": 4,
  "color": "black",
  "tires": 4,
  "mirrors": 4 
};

How to delete property from a javascript object

Deleting a property in javascript objects is way easier.

This is how you delete property in an object.

const car = {
  "make": "Toyota",
  "numbers of doors": 4,
  "color": "black",
  "tires": 4,
  "mirrors": 4 
};

delete car.mirrors;

// result
const car = {
  "make": "Toyota",
  "numbers of doors": 4,
  "color": "black",
  "tires": 4 
};

Test object for the property

We use .hasOwnProperty(propname) method to check if an object has the given property name. The method returns true or false if the property is found or not.

Here is an example of how to check property existence in an object.

const car = {
  "make": "Toyota",
  "numbers of doors": 4,
  "color": "black",
  "tires": 4,
  "mirrors": 4 
};

car.hasOwnProperty(make);
car.hasOwnProperty(sidemirror)

// result of the above

// true

// false

Conclusion

I hope you have learned something and if you want to learn more about objects visit Mdn.

Thank you for reading. See you next time.

Lets connect: Twitter

Kihuni`s