Dot notation VS Bracket notation

What is even the difference between dot notation and bracket notation? This was the first question I asked myself the first time I came across the two. In this article I will be explaining what dot and bracket notation is. Just before you start reading, it is a expected that you already have a knowledge of what HTML , CSS is and probably on your JS journey.

Table of content

• What is dot notation.
• Example of of notation.
• What is bracket notation.
• Example of bracket natation.

Dot notation is one of the way of accessing object properties in javascript. It can be accessed with the syntax: object.property .This property name must be a valid identifier. When is identifier said to be valid? When working with dot notation, property identifier can only be alphanumeric ,$ and _. Dot notation can not work for multiword properties , because of this limitation(so I think) came bracket notation.

Example

let writer = {
name :"mercy"
};
console.log(writer.name);


var user ={
$ : age,
_ : 2
};
console.log(user._);

Bracket notation

It is another way of accessing object properties in JS .Bracket notation is more powerful than dot notation as it works with any string and allows property names and variable. Unlike dot notation, bracket notation is not easy to write.

Example

let user = "developer"
let lastLetterOfUser = user[8];

var obj = {
kids = "studies",
parents = "works"
};
let duty= obj["parent"];
alert(duty);

In conclusion dot notation can only use alphanumeric properties as it's identifiers but it should not start with numbers .While bracket notation are used when property identifier are string, character and space might be included etc.