Javascript _ 点符号和括号符号

Question

I have two questions as below. Could any one help to explain? If you have any material source, please also help to provide the link. Thank you!

Question 1: Why below 2 outputs are different. One is 37. The other is 40. I thought both ouputs should be 40. Please help to explain why.

let me = {
    firstName: 'Terry',
    gender: 'Male',
    age: 37
};

let selection = 'age';
me.selection = 40;

console.log('Bracket Notation of selection: ', me[selection]);  // output: 37
console.log('Dot Notation of selection: ', me.selection); // out put: 40

Question 2: This time, I change from dot notation (me.selection = 40) to bracket notation (me[selection] = 40). The first output change from 37 to 40. The second output change from 40 to undefined. Please help to explain why.

let me = {
    firstName: 'Terry',
    gender: 'Male',
    age: 37
};

let selection = 'age'
me[selection] = 40; //change from dot notation (me.selection = 40) to bracket notation (me[selection] = 40)

console.log('Bracket Notation of selection: ', me[selection]);  // output: 40
console.log('Dot Notation of selection: ', me.selection); // output: undefined

Answer 1

Answer to question 1:

me[selection] is equivalent to saying me["age"] ...which is 37

me.selection is equivalent to saying me["selection"] ... so answer is 40

Answer to question 2:

me[selection] = 40; is equivalent to saying me["age"] = 40

So when you do me.selection in console.log afterwards, it returns undefined because it can't find a selection key

When you say me[selection] it returns 40 because you're really asking me["age"] ..and this time you're referring to the variable "selection" not the key selection

Answer 2

Since selection is equal to 'age' me[selection] is equivalent to me['age'] (or me.age) which was 37 but was reassigned to 40

me.selection is equivalent to me['selection'] which doesn't exist on that object

Answer 3

When you use the dot notation, you are giving JavaScript the name of the property directly, but when you use a variable inside a bracket notation to access a property value, JavaScript cares about the value of the variable, not the name of it .

the mechanism is simple

dot notation: me.selection =>>>> js directly looks for property name "selection".

bracket notation: me[selection] =>>> js looks for the value of selection, it equals "age", looks for property name age.

Where can this be useful? Sometimes you want to make properties based on some other constant or variable in your code

Here you create properties based on a constant that equals to 10:

let neededProperties=10
for (let i=0;i<neededProperties;i++) {
    neededProperties["prop"+i]=i
}

Answer 4

Property accessors provide access to an object's properties by using the dot notation or the bracket notation. In dot notation we have to give the exact propert for accessing its value and in bracket notation we pass the dyanmic value which have the property name to access the property value for the object.

So, Explanation: you have an object named me with different properties and also a vaiable with selection Thus, will accessing the value Using dot notation ie me.selection you get the value form object property directly which is 40.

Using bracket notation ie me[selection], in ths case the selection variable is used and this varibale will be replaced with its value like me['age']. So, you get the value from object having property name age.

Hope you understand the logic and reason for both, and will find the answers for both of your questions and also see details here