I used to find this thing really confusing when I started JavaScript. So, I decided to share what I learnt on this topic. Let’s get started.

Usually we see people using . for accessing object and [] for arrays. But if it’s not known to you yet, we can access key/property of an object in JavaScript using both [] and . operator. But there are some cases where . operator doesn’t seem to work. Let’s find out where and why.

Let's create an object

const obj = {
    key1: 100,
    key2: 200
}

Genrally we access the key like this:

obj.key1;

But we can access using [] too:

obj['key1'];

JavaScript has some restriction for valid variable names. For example, a variable having number at the beginning is invalid. Separating a variable name with space is invalid.

const 1dollar = '85BDT' //invalid
let my cat = “Tom” //invalid 

But that’s not the case for keys in object. The name of a key can be started with a number or they can have space in their name.

const newObj = {
    100: "one hundred",
    200: "two hundred",
    'Central Road': "Dhanmondi"
}

That's a valid object. Now try to access the keys. We'll use the usual way or the . operator first.

Umm what happened 😕!

Let’s try another one

😯

Try the next.

What is going on!!!

Here comes the difference between . and []. We mentioned, those were not valid variable name but valid key name. We can’t access a key that has a name which is invalid for a variable using . operator. We must use [] operator in these cases.

newObj[100]; //"one hundred"
newObj[200]; //"two hundred"
newObj["Central Road"] //"Dhanmondi"

In object all keys are converted to String except for Symbols. That means even if the keys are numbers they will be converted to string first. So, we can access like this too:

newObj[“100”]; //"one hundred"

Now let’s try another example:

let language = { 
   "bn": "ধন্যবাদ", 
   "en": "Thank you", 
   "es": "Gracias"
}

Let's access the keys:

language.es; //"Gracias"
language['es']; //"Gracias"

Now instead of accessing directly, let's store the desired key in a variable and then access using that variable. Now you might be wondering why do we even need to store the key in a vaiable! Let's say you wanna store the user preferrence for language. Preferrence for different users will be different so will be the output. So the data needs to be dynamic.

let preferredLang = "bn";

language.preferredLang; //undefined

language[preferredLang]; //"ধন্যবাদ"

This happens because, when we use . to access it looks for the exact name in keys and gives the value. So, using . it looks for a key named preferredLang, obviously which doesn’t exist in the object language. So, it returns undefined.

But [] operator looks for the value of preferredLang which is “bn” and then looks for the value of “bn” which is “ধন্যবাদ” and returns that.

So whenever we store key name in a variable and later try to access the object using that variable, we must use [] operator instead of . .

Recap

So, long story short you can access object properties using both . and [] operators in JavaScript. We use mostly the . operator cause that's eaiser and simpler (at least that's how I feel). But if the special cases mentioned above occur we must use the [] operator.