Why we should prefer square operator over the dot operator to access the value from the object ?

The square notation should be used as much as possible as compared to the dot notation to access the value from the object in JavaScript. Let’s first understand how to obtain the value by using the square notation and dot notation from the object.

Square notation: In the square notation the keyName that is passed is treated as a variable and searches the value for that key stored in that variable.

Syntax:

objectName[keyName]

Dot notation: In the dot notation the keyName that is passed is not treated as a variable instead of that it searches the value for the keyName that is written after the dot.

Syntax:

objectName.keyName

Let’s take an object named obj = { platform: “GFG” }
let’s take a variable that hold the keyName of obj as store
store = “platform”
Accessing the value using the Square notation
obj[store]
Output:  GFG
Expected Output: GFG

Explanation: In the square notation the store is treated as a variable and is replaced by its value “platform” and searches for it which is present in the obj so, the output is GFG.
Accessing the value using the Dot notation
obj.platform
Output: GFG
Expected Output: GFG
Explanation: The platform which is written after the dot is present in the obj that’s why the output is GFG

obj.store 
Output: Undefined
Expected Output: GFG
Note: It is giving undefined because value written after the dot notation doesn’t treated as variable instead of that it is treated itself as a key and searches that key into the obj which is not present in the obj.

Example 1: First we will access the value using the square notation by taking an object named obj in which we will be having the key variable that will be storing the key of the obj and passing that key in the square notation to access the value.

Javascript

<script>
    // In the square Operator the keyName
    // that is passed treated as variable

    const obj = {  // object is the key value pair(or dictionary)
        platform: "GeeksforGeeks",
        platformLink: 'https://www.geeksforgeeks.org/',
        contentQuality: 'Excellent',
        emailAddress: 'feedback@geeksforgeeks.org'
    }
    for(let key in obj){
        let store = obj[key];
        console.log(store);
    }
</script>

Output:

"GeeksforGeeks"
"https://www.geeksforgeeks.org/"
"Excellent"
"feedback@geeksforgeeks.org"

Explanation:  We have an object named obj and accessing the value from the obj in which key is a variable that is holding the key of the obj and we are passing that key into the square notation that is giving us the value for that key which was stored the by that key variable.

Example2: Now we will be using the same object named obj as above for accessing the value from the obj using the dot notation in which the key is a variable but the dot notation doesn’t treat the key as a variable instead of that it treats the key variable as the key itself of the object and tries to find the value for the key which is not present in the defined obj.

Javascript

<script>
    // In the dot Operator the keyName is not treated as a variable
    const obj = {
        platform: "GeeksforGeeks",
        platformLink: 'https://www.geeksforgeeks.org/',
        contentQuality: 'Excellent',
        emailAddress: 'feedback@geeksforgeeks.org'
    }
    for(let key in obj){
        let store = obj.key;
        console.log(store);
    }
</script>

Output:

undefined
undefined
undefined
undefined

Explanation: Key variable is itself treated as a key of the obj in the dot method and tries to find in the defined object and is not found that’s why it is giving undefined as output means the key is not defined in the object. If you know the keyName from the object then you may use the dot(.) notation instead of that always try to use the square notation for accessing the key value.