JavaScript Objects: Part 2 Dot Vs Bracket

JavaScript Objects properties can be accessed either using dot notation or bracket notation, dot notation is the most used one as it is easy to use, syntax wise.

let myAdmin = {
    fname: "kiran",
    "7":777,
    "-telephone" : 2244,
    "full name" : "kiran raj",
}

The above code is a JavaScript object, lets try to access properties using dot operator.

console.log(myAdmin.fname);        // Output : kiran
console.log(myAdmin.7);            // Output : **error**
console.log(myAdmin.-telephone)    // Output : **error**
console.log(myAdmin."full name");  // Output : **error**

From the above code snippet we can see that dot operator cannot access all the properties of JavaScript object as some are throwing errors. To be precise dot notation cannot access property keys starting with number or hyphen or string with spaces.

To access javascript object properties using dot operator, the key should be

1. Valid identifier.
2. No spaces.
3. Do not start with digit or hyphen.
4. Do not include special characters except $ and _ (underscore).

Lets look at the bracket notation on the same JavaScript object.

console.log(myAdmin['fname']);      // Output : kiran
console.log(myAdmin["7"]);          // Output : 777
console.log(myAdmin['-telephone']); // Output : 2244
console.log(myAdmin["full name"]);  // Output : kiran raj

No errors, bracket notation was able to access all JavaScript object properties.

Lets look at one more example, here we try to make the keys dynamic.

let fs = "fav-", title = "mr", x=4, y=5;

let user = {
    [fs + "sports"] : "Cricket, football",
    [title] : "kiranraj",
    [x + y ] : "Sum is 9"
}

Let access object properties using bracket notations.

console.log(user["fav-sports"]);     // Cricket, football
console.log(user[title]);            // kiranraj
console.log(user["mr"]);             // kiranraj
console.log(user[9]);                // Sum is 9
console.log(user["9"]);              // Sum is 9

Here bracket notation prove that it can be used with dynamic key value.

Look at the object property [x + y ] : "Sum is 9", result of x + y is 9 so we access the property using user[9]. Lets try to access using a string value of 9 ("9") and we got the same result. What happened here is when we use the integer value JavaScript engine convert it into a string.

Remember keys are converted into string format by JavaScript engine and the key should be any type that can be converted into string. Keys can be symbols also.

Dot objects are easy to use but has some limitations. Bracket notation is useful when the keys are dynamic.

Part 1: Object Basics
Part 3: In operator and for in statement
Part 4: Constructors and this
Part 5: Object duplication