Basic JavaScript - Accessing Object Properties with Variables

I’m confused as to why JavaScript properties are sometimes contained in quotes, and other times not. Is there a relative difference? Also, when reading in a value, what is the difference between using dot notation and bracket notation? It seems when I use dot notation, the test processed an error, but accepted bracket notation. I eventually got the solution, but I want to understand the syntax.

  **Your code so far**
// Setup
const testObj = {
12: "Namath",
16: "Montana",
19: "Unitas"
};

// Only change code below this line
const playerNumber = 16;  /* Here, while I see the exercise specifically calls for making this value 16, why doesn't it read in when I use const playerNumber = testObj[16] */

const player = testObj[playerNumber];   /* why can't I use const player = testObj.playerNumber here? */
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 Edg/104.0.1293.63

Challenge: Basic JavaScript - Accessing Object Properties with Variables

Link to the challenge:

Hi, good questions!

First, yes, there’s an important difference. Think of it as being categories of data. When you type, 11, into JavaScript, JavaScript reads it and says, “11. Two digits. And a number.” And it’ll run functions, methods, etc on 11, acting on the data category that it is, indeed, a number.

But, what if someone’s name was ‘Eleven’? Better yet, what if we wanted to categorize that in our data structure as being spelled, 11?

Name: “11”

Now, JavaScript codes 11 not as a clump of numbers to perform operations on, but as a name, a string “”.

To answer the question about dots and brackets, let’s look at some code!

const dogs = {
  Fido: "Mutt",
  Hunter: "Doberman",
  Snoopie: "Beagle"
};

const myDog = "Hunter";
const myBreed = dogs[myDog];
console.log(myBreed);

Okay, so we have a constant, an object, that we’re looking at. In this big category/constant of ‘dogs’, we have a big list of dogs - and that dog list is all one big object.

Then, when we go on to wanting to discuss or use other variables, we define them by referencing/referring back to the object we first defined.

We defined myDog as another constant we want to use. Specifically, that constant is worth the string “Hunter”. Cool. If we look up above, we see that in our list of dogs, the word ‘Hunter’ is there with a colon. So in that list, when we narrow it down to each property (as is denoted by that colon and then something following it) , we identify it by listing the exact string/number/etc.

Let’s keep that in mind and we’ll get to those brackets in a second.

We’ll make a new constant. Today, we just want to get a lot of information about our dog. Const myBreed will be defined as -

const myBreed = dogs[myDog];

This tells JavaScript, because of that bracket notation, to go and locate that object of dogs we made… we made that as a constant… and because we used box brackets, we told JavaScript, “Hey, that’s a property we’re looking for/passing through here.”

Now, onto the last part, the part we see this all come together.

Console.log is a method. It’s awesome. You can ask the console to report back to you the math, calculations, rewrites, functions, anything it’s done for an object or a variable and it will literally write back to you what it has stored in its system.

In this case, let’s ‘console.log(myBreed).’

This means that JavaScript will look back above and locate the constant, myBreed. It does, and it ‘reads’ that myBreed is like a little function on its own. It’s the dogs object with the myDog property run through it… Wait a second…

myDog was an object on its own, it was a constant variable. And that constant variable was worth the string, “Hunter”. So that means that JavaScript will run through the object dogs, find the match we ran through as a stand in property for [myDog] - which was the string “Hunter” - and it’ll report back what it finds there…

And what does it find there?

It finds the string, “Doberman.”

It took me a long time (and I’m sure I’ve got a couple of my terms turned a little around! I’m still learning as well!), but that’s how I’ve come to understand this. I hope this helps you and others who might be stuck!!

3 Likes

All of this information is great! And it makes sense, but in the case of the first part of my inquiry where I was wondering why the object properties are either in quotes or not, I was not talking about the values stored in the property names. I was talking about the property names themselves. In some cases, I see that double quotes are being used to surround the name, and in other cases, there are no quotes? I was wondering what the proper use case is for double quotes as it pertains to naming a property?

These images are taken from two separate exercises!

When it comes to bracket and dot notation, look at the example:

myDog is declared and initialized outside of dogs. I don’t understand how we get a specific value from dogs utilizing myDog. I see where it is assigned to the identifier myBreed and console.log(myBreed) makes sense. But in terms of the code, the way I see it, dogs[myDog] makes no sense. Because again, dogs and myDog are initialized separately of each other, so how is it that either one can be used to access the other through brackets or any other means. I hope that makes sense and apologize but it will only let me insert one image, so please refer to the example code in lindyscodes response.

example2

This is the code the above reply refers to.

1 Like

Ok, on doing another challenge I’ve come to understand that the bracket notation is functioning something like a Python dictionary and using the term in the brackets to “lookup” the corresponding value in the const that was declared separately. So part 2 of this response is understood now. I’m still a little confused on the proper use case of the “” in property names.

I’ve noted that you cannot modify the properties of an object unless you enclose it in quotes when using bracket notation, and without quotes when using dot notation. So that’s one thing.

Hi, so to answer this question, you need to refer to a previous lesson that discussed more about JavaScript syntax…

I am quoting this lesson to better explain why you can choose to use quotes for object properties, the explanation works well for us here!

Lesson: Build JavaScript Objects

const cat = {
  "name": "Whiskers",
  "legs": 4,
  "tails": 1,
  "enemies": ["Water", "Dogs"]
};

" In this example, all the properties are stored as strings, such as name, legs, and tails. However, you can also use numbers as properties. You can even omit the quotes for single-word string properties, as follows:"

const anotherObject = {
  make: "Ford",
  5: "five",
  "model": "focus"
};

“However, if your object has any non-string properties, JavaScript will automatically typecast them as strings.”

I hope this helps you with properties and using string quotation marks!

2 Likes

Hey thanks for your help Lindyscodes! I really appreciate your attention to detail and effort at helping me out!

Not a problem, glad I could help!