Fascinating stuff! I’m amazed at how many subtleties are involved in JS but it is fun trying to master them. Thanks for all the time you spent with this detailed summary of how to access properties. I’ll definitely save the notes for reference. I had a couple of questions to clear up a few points but I now have a much better understanding of accessing properties.
It can be a little confusing but I think the easiest way to look at it is that the dot syntax version (.color) is shorthand for the bracket syntax version ([“color”]).
Properties in JavaScript are defined by strings (and symbols but we’re going to ignore them for now). A string defines a property name and when you look up a property by that name you get it’s value. There’s a couple of ways to look up properties by their name. One way includes using a function:
Reflect. get (greenCircle, “color”)
—————————————————————————————————————————————-
The way I have been taught - a function looks like
var ______ = function() {
};
which leaves me wondering whether your line of code -
Reflect. get (greenCircle, “color”) -
could be expressed in the above terms that I am familiar with - I’m going to take a stab at it just to see if I can do the translation so here goes -
var Reflect = function(greenCircle, “color”) {
greenCircle.color;
};
is that the equivalent of your single line?
———————————————————————————————————————————————-
Another way is using bracket syntax
greenCircle[“color”]
And yet another way, which is also the most popular, the way that doesn’t use a string at all, is through dot syntax.
greenCircle.color
Dot syntax uses an identifier which when parsed by JavaScript is read as a string to identify the property name being accessed. So even though you’re not using quotation marks, JavaScript will see it much the same way as though you used a string with bracket syntax. This is nice because it only means using one dot character to get a property rather than two brackets and two quotes. However it also does impose some limitations.
The basic rules for identifiers are that they must contain alpha numeric characters (or $ and _ and unicode) and they cannot start with a number. So while the following is a valid identifier
abc123$
This is not
123abc$
—————————————————————————————————————————————
so the only 2 special characters are - the $ and the _ - ?
any other special characters like - ! @ # % - would render the property name unreadable? What is unicode anyway?
—————————————————————————————————————————————
These restrictions are what allow the JavaScript parser to recognize identifiers in code as property names and not actual code. For example you CAN have a property named first-name in your object but if you try to use for syntax to reference it like so:
myObject.first-name
The parser will look at that code and think you are trying to subtract name from myObject.first. To get that property correctly you’d need to use a string, most likely using bracket syntax (you’ll rarely if ever use the get function).
myObject[“first-name”] // works!
—————————————————————————————————————————————
but if the object had a property name of - firstname - in that case using
myObject.firstname
should work just fine - yes ?
Since people like using dot syntax, properties are usually always going to be named as valid identifiers. But sometimes you might have properties that are not, for example properties from some arbitrary JSON file at which point you’d need to use bracket syntax.
One additional advantage with bracket syntax is that you can use it with variables. So if you have a property name in a variable as a string, you can put that variable in brackets without quotes to get the property with that name
var prop = “color”;
greenCircle[prop] // gets color property
This doesn’t work with dot syntax because the name of the property is always the identifier. Trying to put a variable there will try to get the property named after the name of the variable.
var prop = “color”;
greenCircle.prop // gets prop property
To look up properties dynamically by name like this you need to use bracket syntax. Otherwise if you know the name as you’re writing code, you can use either approach. Dot syntax is usually preferred because it’s simpler
