What is Dot vs Bracket Notation in Accessing JavaScript Object

What is Dot vs Bracket Notation in Accessing JavaScript Object

Learn when to use dot and bracket notation in JavaScript.

Dot vs Bracket Notation in Accessing JavaScript Object. Learn when to use dot and bracket notation in JavaScript.

Dot Notation

This is the most popular and most used way of accessing the property of an object. This makes code more readable. Dot notation is used most frequently.

Syntax: **obj.property_name**

var user = {name : "Mark"};

user.name ; // "Mark"

When not to use dot notation

Consider that we are having a property name as 123

var obj = {
 '123' : 123
};

In the above case if we cannot access using

obj.123; 

So, If the property name is not a valid **identifier** , then we cannot access its value using . notation.

What is an Identifier?

An identifier is a sequence of characters in the code that identifies a variable, function, or property. Generally name of function or variable or property name of Object

What is a valid Identifier?

  • In JavaScript, identifiers are case-sensitive and
  • can contain Unicode letters, $, _, and digits (0-9),
  • but may not start with a digit.

In this case, we can use bracket notation

var obj = {
 '123' : 123
};
obj['123']; // 123

Note: In JavaScript $ , and _ are valid identifiers. so we can access those properties using . notation.

var obj = {
   $ : 10,
   _ : 20
}

obj.$; // 10

obj._; // 20

Bracket Notation

The bracket notation is used when the property name is an invalid identifier(starts with a number, contains symbols).

var obj = {
 test-123 : "test"
}

// in this case we cannot use dot notation

obj['test-123']; // "test"

If the property name is **number** then we donโ€™t need to wrap the property name inside single /double quotes in object creation. But in bracket notation, if the property name is whole number , then we donโ€™t need to wrap the name inside single /double quotes . But if the property name is double , then need to warp the property name inside single /double quotes .

Example 1: whole number

var obj = {
 123456 : 10
}

obj[123456];

Example 2: Double

var obj = {
 123.456 : 10
}

obj[123.456]; // undefined

obj['123.456']; // 10

Example 3: Using an invalid number

var obj = {
   123.123.123 : 10 // throws invalid number error
}

For this case use single/double quotes

var obj = {
   '123.123.123' : 10
}

Example 4: Using special symbols

var obj = {
  '123-test' : "test" 
}

obj[123-test]; // error(test is not defined)

obj['123-test']; // "test"

Using variable as the property name

Example 1:

var test = "test";

var obj = {
 test : "Test success"
}

obj[test] // "Test success"

Example 2 :

var obj = {
  name : "Mark"
  age : 20
}

var name = "age";

obj["name"]; // Mark
obj[name]; // 20

Example 3: Real-world Example of using bracket notation

function getFood(user) {

let foods ={
      veg :      ["๐Ÿ", "๐ŸŒฝ", "๐Ÿ•", "๐Ÿ…"],

      'non-veg': ["๐Ÿ“", "๐Ÿฃ", "๐Ÿฅฉ", "๐Ÿ–"] 
   }

   let {foodPreference} = user;

   return foods[foodPreference];

}

let user = {name: "Mark", foodPreference : "veg"};

getFood(user); // ["๐Ÿ", "๐ŸŒฝ", "๐Ÿ•", "๐Ÿ…"]

We can also use object as the property name, but that will be converted into **[object Object]**

var a = {};

var b = {};

var c = {};

c[a] = 10;

c ; {[object Object]: 10}

c[b] = 20; // this will replace old [object Object]

c; {[object Object]: 20}

We can also have empty string as property name

var obj= {};

var emptyString = "";

obj[emptyString] = "10";

obj[emptyString]; // 10

Thank you for reading ! Hope this tutorial will surely help and you!

JavaScript Programming Coding Development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

13 Useful JavaScript Developer Tools for Writing High-Quality Code

Today Iโ€™m going to show you 13 well-know and popular tools to write better and cleaner JavaScript code. These are tools that Iโ€™m using right now on my JavaScript developer journey. So if you want to improve the quality of your projects, this list is for you.

Who Else Wants to Write Clean JavaScript Code?

Who Else Wants to Write Clean JavaScript Code? 7 Tips to Make Your Coworkers Fall in Love With Your Code.

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, Iโ€™m going to describe a few of these environments and show you the environment Iโ€™ll be using in this series of articles.

The Code that Runs Your JavaScript Code

How often do you think about the environment that your code runs in, and the resources that are available to it when it runs? Understanding the โ€˜runtimeโ€™ environment can help us make better choices as JavaScript developers when writing code.

How to start writing less error-prone code in JavaScript

How to start writing less error-prone code in JavaScript - Everything in JavaScript is an object!โ€™. We said that this assertion is false. Many things in JavaScript can behave like an object, but that doesnโ€™t mean itโ€™s the object. We can say we have three types of objects (objects, functions and arrays) in JavaScript.