The following explanation is from an old friend of the show, Will (also known as @beiju). Unbeknownst to us, he’s been following along with Programming By Stealth all this time and just popped his head up for the first time in quite a few years. <\/p>\n
Will wrote the following in an email to Bart and me:<\/p>\n
In recent episodes Allison has been audibly frustrated about objects. I noticed a disconnect in Allison’s understanding of objects that I think is causing all of this. I wrote up a short explanation (at least, it was short when I started) that I think will close the gap. I attached it as an HTML document, complete with imperfect syntax highlighting and tiny font to make you feel at home. It’s written in a conversational style talking directly to Allison. I start with restating things that I think you (Allison) are already comfortable with and take a series of small steps, each with some code examples that you can use to prove that I’m telling the truth, until I arrive at the link that Allison’s missing. <\/p><\/blockquote>\n
I liked it enough I wanted to make sure it was shared with the entire Programming By Stealth family. So here is Will’s fantastic explanation of objects.<\/p>\n
<\/p>\n
\nI\u2019m going to attempt to reconcile the two correct<\/i> definitions of a JavaScript object that we\u2019ve heard: \u201ca collection of name-value pairs\u201d and \u201canything that isn\u2019t a boolean, a number, or a string\u201d. I\u2019ll start with the one I think you\u2019re more comfortable with — name-value pairs — and take small steps until we get to the other one.<\/p>\n
<\/p>\n
So, an object is a collection of key-value pairs. The first thing to look at is, how do we make one? There are a few ways (you may not believe that yet, but I will convince you), but let\u2019s start with the one we are more familiar with: the object literal<\/b>. \u201cObject literal\u201d is just the official name for this syntax:<\/p>\n
<\/p>\n
const<\/span> myObj =<\/span> {\r\n\t\"some key\"<\/span>: \"some value\"<\/span>,\r\n\t\"some other key!\"<\/span>: true<\/span>,\r\n\t\"3rd key\"<\/span>: 42<\/span>\r\n}<\/code><\/pre>\n<\/p>\n
The keys are always strings (always, for any object), and the values can be anything. JavaScript also gives us a shortcut: if the keys follow all the rules for a valid variable name, we can leave out the quotes. Here\u2019s almost the same object with the keys modified so they\u2019re valid variable names.<\/p>\n
<\/p>\n
const<\/span> myObj =<\/span> {\r\n\tsomeKey<\/span>: \"some value\"<\/span>,\r\n\tsomeOtherKey<\/span>: true<\/span>,\r\n\tkey3<\/span>: 42<\/span>\r\n}<\/code><\/pre>\n<\/p>\n
I had to get rid of all the spaces and the exclamation mark, because they\u2019re not allowed in variable names. I also had to move the digit 3 to the end of the third key, because variable names can\u2019t start<\/i> with numbers.<\/p>\n
<\/p>\n
So now we have an object. An object made this way, by specifically listing out its names and values inside squiggly brackets, is often called a plain object<\/b>. I\u2019ll show you what\u2019s plain about it when I talk about other objects. <\/p>\n
<\/p>\n
Now, what are the things we can do with an object? First, we can get the value associated with a particular name. We do that with the square bracket operator, like this:<\/p>\n
const<\/span> theValue =<\/span> myObject[\"some name\"<\/span>]\r\n<\/code><\/pre>\nThis might be the first sticking point, because you\u2019re used to using the square brackets with arrays, to ask the question \u201cwhat value is at this position in the array?\u201d. Your understanding is correct<\/i>, but not complete<\/i>. Square brackets immediately after a variable name will get a specific value out of any collection of values.<\/b> With arrays, the way we identify a specific value is by its position, so we put the position inside the square brackets. But with objects, we identify a specific value by its name, so we put the name inside the square brackets. Same concept, but applied in a different context.<\/p>\n
<\/p>\n
As an aside, you don\u2019t need to put a literal string (a string inside quote marks) in the brackets. You can put anything there that Javascript can turn into a string.
myObject[\"some name\"]<\/code> gets the value associated with the name \u201csome name\u201d, just likemyArray[0]<\/code> gets the value at position 0. But you can put a variable in there, too:myObject[someVariable]<\/code> gets the value associated with whatever name is stored in the variablesomeVariable<\/code>, just likemyArray[i]<\/code> gets the value at whatever position is stored in the variablei<\/code>. AndmyObject[stringOne + stringTwo]<\/code> will first figure out whatstringOne + stringTwo<\/code> means, then get the value associated with whatever name that turns out to be, just likemyArray[i + 1]<\/code> first figures out what the value ofi + 1<\/code> and then gets the value at whatever position that turns out to be. That\u2019s not really necessary to explain objects but it is something that I noticed Bart didn\u2019t call attention to, so I thought it was worth saying.<\/p>\n<\/p>\n
Anyway, back to accessing name-value pairs within objects. Javascript once again gives you a shortcut. If you know the actual name you want, and<\/i> it follows the rules for variable names, you can use the dot syntax instead of square brackets:<\/p>\n
const<\/span> theValue =<\/span> myObject.someName\r\n<\/code><\/pre>\nThat is exactly<\/i> equivalent to this:<\/p>\n
const<\/span> theValue =<\/span> myObject[\"someName\"<\/span>]\r\n<\/code><\/pre>\nThe only advantage is that at looks prettier and it\u2019s less typing. The disadvantage is that you can\u2019t use it with a name that doesn\u2019t follow those rules, or a name that\u2019s stored in a variable.<\/p>\n
<\/p>\n
You can do other things with an object too, which I don’t remember whether Bart has introduced yet. You can modify it, and the way you do that is very similar to getting values out of it. You just put the object name and attached square brackets on the other side of the equals sign:<\/p>\n
myObject[\"someName\"<\/span>] =<\/span> \"a new value\"<\/span>\r\n<\/code><\/pre>\nIf there\u2019s already a value associated with the name \u201csomeName\u201d in the object, this will overwrite that value with the string \u201ca new value\u201d. If there isn\u2019t, it adds a new pair with name \u201csomeName\u201d and value \u201ca new value\u201d.<\/p>\n
<\/p>\n
I went over all that because I\u2019m about to show you some other ways to make objects. I expect that you might not believe me at first, but I will prove that those are also objects by showing that you that everything I just talked about works with them, too.<\/p>\n
<\/p>\n
Here is a second way to create an object:<\/p>\n
const<\/span> myCow =<\/span> new<\/span> Cow<\/span>()\r\n<\/code><\/pre>\nFor this example, I\u2019m using the Cow class that was part of PBS 47 and its associated challenge, the one where we made a farm. I claim that this line of code creates a new object, using the same definition of an object as before: \u201ca collection of key-value pairs\u201d.<\/p>\n
<\/p>\n
Here\u2019s where I prove it. Open the PBS 47 challenge solution in your favorite web browser (the zip file is in PBS 48<\/a>). Open the console and make yourself a new animal using the code snippet above. With
myCow<\/code>, you can:<\/p>\n\n
- Get the value associated with a name.
Cow<\/code>s (and allAnimal<\/code>s) all have a value associated with the name_icon<\/code> (with underscore), so trymyCow[\"_icon\"]<\/code>. You get a value — it\u2019s an emoji cow. That name also follows the rules for Javascript variable names, so we can equivalently saymyCow._icon<\/code>. And, lo and behold, we get the same thing.\n<\/li>\n- Change the value associated with a name. Try
myCow._icon = 12<\/code>, then runmyCow._icon<\/code> again. You just changed it to 12. You could do the exact same thing withmyCow[\"_icon\"] = 12<\/code>.\n<\/li>\n- Add a new name-value pair. First, run
myCow.newName<\/code> to demonstrate that it\u2019s not there (which Javascript indicates with the valueundefined<\/code>). Then domyCow.newName = \"boogers\"<\/code>, and then get the value again. NowmyCow.newName<\/code> should give back\"boogers\"<\/code>. Once again, you could do all that with the square bracket syntax, too. You can even mix and match dots and square brackets!\n<\/li>\n<\/ol>\n<\/p>\n