Exploring the Differences between Dot Notation and Bracket Notation in JavaScript Objects: A Guide


In JavaScript, objects can be accessed using either dot notation or bracket notation.

Dot notation is used to access object properties using a dot followed by the property name. For example, if an object has a property called "name", it can be accessed using the following syntax:

object.name

Bracket notation is used to access object properties using the object name inside a set of square brackets [] followed by the property name. For example, if an object has a property called "name", it can also be accessed using the following syntax:

object["name"]

One key difference between the two is that dot notation can only be used to access properties that have valid identifier names, while bracket notation can be used to access properties using any string, including variables and expressions. Additionally, bracket notation is useful when the property name is not known until runtime.

In general, dot notation is more readable and easier to understand, but bracket notation can be more flexible.

Here is an example of using dot notation and bracket notation in JavaScript objects:

const user = {
    name: "Tutor Joes",
    age: 30,
    job: "Developer"
};

// Dot notation
console.log(user.name); // Output: "Tutor Joes"
user.name = "Joes";
console.log(user.name); // Output: "Joes"

// Bracket notation
console.log(user["age"]); // Output: 30
user["age"] = 25;
console.log(user["age"]); // Output: 25

In the above example, we first create an object called "user" with properties "name", "age", and "job". We then use dot notation to access the "name" property and change its value to "Joes". We also use bracket notation to access the "age" property and change its value to 25.

The main difference between dot notation and bracket notation in JavaScript object is the way you access and modify the properties of the object.

Dot notation is used to access and modify the properties of an object using the "." operator. For example, in the example above, we use user.name to access the "name" property of the object and user.name = "Joes" to change the value of the "name" property.

Bracket notation is used to access and modify the properties of an object using the "[]" operator. For example, in the example above, we use user["age"] to access the "age" property of the object and user["age"] = 25 to change the value of the "age" property.

One of the main advantages of using bracket notation is that it allows you to access properties using variables. For example, you can use a variable to store the property name and then use that variable in the bracket notation to access the property.

const prop = "name";
console.log(user[prop]); // Output: "Joes"

Another advantage of using bracket notation is that it allows you to use property names that are not valid JavaScript identifiers.

In contrast, dot notation can only be used with property names that are valid JavaScript identifiers.

Both dot notation and bracket notation have their own advantages and disadvantages. It's depended on your requirement and use case which one you want to use.

Keys with Space

In JavaScript, keys in object cannot have spaces when using either dot notation or bracket notation to access them. If a key has a space in it, you will need to use bracket notation and put the key in quotes to access it. For example, if you have an object like this:

let user = {
"first name": "Tutor",
"last name": "Joes"
};

You would use bracket notation to access the values like this:

console.log(user["first name"]); // "Tutor"
console.log(user["last name"]); // "Joes"

If you try to use dot notation, it will not work and throw a syntax error, as the key contains spaces.

console.log(user.first name); // This will throw a SyntaxError

You can use a variable to store the key and use it in bracket notation, like this:

let key = 'first name';
console.log(user[key]); // "Tutor"

In general, it's better to avoid keys with spaces in them, it's more readable and less error-prone.

In conclusion, both dot notation and bracket notation are used to access properties of JavaScript objects. However, they have some key differences. Dot notation is simpler and easier to read, but it can only be used with valid identifiers, whereas bracket notation allows the use of any string as a property name. Additionally, bracket notation can be used to access properties using variables, whereas dot notation cannot. Therefore, depending on your use case, one notation may be more suitable than the other.

List of Programs


JS Practical Questions & Answers


JS Practical Project