Sidebar: Dot and bracket notation

- Quick sidebar, so far you've seen me use dot notation to gain access to properties inside objects. First, we mentioned objects, say course. We put a dot in to tell JavaScript we are looking for a property inside course and then we just list out property, title. We can also use bracket notation to do the exact same thing. Again we list out the object first, course.

Then we set up a square bracket and inside the square bracket we quote the title. This gives us the same result, the property inside the object. So why do we have these two different notations to do the same thing? It has a very specific use. In some cases, when you work with objects they come from somewhere else, let's say PHP or they're just generated from a data set. And the property names may be a little odd.

For instance, they may have operators inside them. So an object that I've had to work with previously had this notation for a property, WP:image. Now if I try to use dot notation to get at this property something weird happens. So I say course.WP. And then JavaScript sees the colon and says "that's an operator", image.

And it goes "I don't understand what you're trying to do here but you broke your property so heres an error for you." That means I cannot get at this property. This is where bracket notation comes in. When we use bracket notation, we put the property title in a quote, thereby making it a string and that means that JavaScript will not try to parse this operator into something else so it'll work. We say course, square bracket, "WP:image", and everything works fine.

Dot notation works well for properly named properties. Bracket notation works well for when we might have to convert the property name into a string. You can use these both at any time to do the same thing and you can mix them inside the code. You don't have to choose one over the other. But you have the option and any time you encounter something weird like WP:image remember bracket notation is there to solve your problem.