Sure, I’ll see what i can do. Both ways, dot and bracket notations, allow us access to the same data, the same properties, on a given object. But you’re right, there are times to use one over the other.
If you’re using dot notation, like this student.major or window.location, you are hard-coding the property name. You know, in advance, this code will only access the major of the given student or the location of the current window. In the case of dot notation, there are very specific rules about what can be in a property name (similar rules to variable names: alphanumeric and underscores are legal).
If you’re using bracket notation, things are a little different. Inside the bracket, we use a string or a variable that contains a string. So we can do this:
student["gpa"]
// or this!
const propertyName="list of friends";
student[propertyName];
So we can pass any string in using brackets, and we can dynamically choose a property by using a variable in those brackets. Note that the property name in that last isn’t propertyName, that’s just the variable containing a string.
So why does that matter? We could dynamically have an array of students, say, and write a function that lets us get any property from any student:
const classRoster=[/*an array of student records*/
function getStudentProperty( studentIndex, propertyName){
// this function doesn't know which student
// or what property!
const student = classRoster[studentIndex];
return student[propertyName];
// or a shorter version that does the same
return classRoster[studentIndex][propertyName];
}
// and here we can use that function...
console.log( getStudentProperty( 31, "homeroom") );
So we can dynamically get any property, without needing to know it in advance, if we use brackets. Also, with brackets, your property names can get funky. Spaces or symbols are allowed in the strings within the brackets, so you can use weird property names (not saying do it, simply that you can). So these are acceptable property names, with angle brackets:
student["list of friends"]
calculatorFunctions["÷"]
record["153792a.cheese"]
Those are legal, but a pain to debug. They’re an anti-pattern. Just saying that this is another difference between dot and bracket.
And as a side note, it isn’t just for properties (in terms of data). You can use bracket notation for accessing object methods too! Check this:
function logger( type, message){
// we might want to console.log, or
// maybe console.warn or console.error
// with this, we can run any or all of them!
// console[type] is the particular method
// we want, and we simply pass it a message!
console[type](message)
}
// this calls console.warn()
logger("warn", "Yah, no - don't do that.")
// and this calls console.info()
logger("info", "I mean you could, but seriously... No.")
But the logger function doesn’t tell you which method you can run, it dynamically takes your argument and accesses that property.
In short 
, use dot notation if you know the property you want in advance. Use dot notation if you are hard coding the property or method name and that won’t change. Use brackets if you don’t know in advance what the property might be.