Check out a free preview of the full JavaScript: From Fundamentals to Functional JS course:
The "Object Best Practices" Lesson is part of the full, JavaScript: From Fundamentals to Functional JS course featured in this preview video. Here's what you'd learn in this lesson:

Bianca discusses some Do’s & Dont’s when using objects. She also talks what characters are invalid and the rules around naming object properties.

Get Unlimited Access Now

Transcript from the "Object Best Practices" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Bianca: So we have a couple dos and don'ts for our dot notation, what's this gonna return? Again, the green, these green question marks mean that I want someone, I want a victim to answer.
>> Bianca: Don't yell at all, all out at once. Undefined. Yeah, here we go. Great.

[00:00:35]
>> Bianca: What about this one?
>> Student: I gave you.
>> Bianca: What is it?
>> Student: I gave you
>> Bianca: Material?
>> Student: [INAUDIBLE] no, [INAUDIBLE] different.
>> Bianca: Yeah, undefined, why is this one undefined?
>> Student: Because the [INAUDIBLE] string, and keeping value, so key value is, they us the key value.
>> Bianca: Absolutely, so the reason this is undefined is because the dot notation is equivalent to using the bracket notation with the quotes.

[00:01:08] So the first two lines are looking up the same thing. They're looking up a property called key on the object box which doesn't exist, it's undefined
>> Student 2: So if you wanted cardboard, you would do the brackets without the quotes, key without the quotes and the bracket notation.
>> Bianca: Absolutely.

[00:01:35]
>> Bianca: Where's my thing? So what's this one?
>> Student 3: Cardboard.
>> Bianca: Cardboard.
>> Student 3: [LAUGH]
>> Bianca: Very good. Cool.
>> Bianca: So here's some dos and don'ts. Don't use dot notation with a variable. Don't use quotations around your variable, it's gonna give you some undesired results. Yeah, if you have a variable, just put it in there without the quotes.

[00:02:06] So what about some non valid characters and numbers and things? So, with dot notation, you have to use valid variable names. What I mean valid variable names, I don't mean a variable name, I mean something not, if you type it up in your console here that, can everyone see this?

[00:02:29] If I said like var 0 = 'asdf'', that won't work cuz numbers aren't valid variable names. So that means that for. Not for our object. If we said box.0 equals something, that's also not gonna work. So if you can't say var whatever it is the that's considered it invalid variable name and you cannot use it with dot notation, so some things other than numbers that are invalid are just weird characters.

[00:03:04] And the way that we get around this if you have to use them is by using the bracket notation with quotation marks. Unless it's a number, in which case, quotation marks are optional. But for example, here, we have this really semantic name here, upper carat, ampersand, star. I name most of my properties like this for readability purposes.

[00:03:30]
>> Student 3: [LAUGH]
>> Bianca: And so that's how we deal with non valid characters, numbers, things like that. And then also if we want to access them, it's the same way, we have to keep those quotations around it with the bracket notation. Cool, and here's a picture of what our object kind of looks like.

[00:03:56] And notice that our numbers, even though we pass it in as a number, it's actually stored as a string. Under the hood, whenever you use bracket notation, it's actually string of fine. Once it's evaluate the expression, it's gonna stringify those values even if it's a number. Even if it's array or a function as well because those are objects under the hood.

[00:04:19]
>> Student 2: Are single quotes equivalent to double quotes and all these places.
>> Bianca: Yes, yeah. Quotations are super flexible as long as they match.
>> Bianca: [COUGH] So here are the rules, kinda laid out. So, as we can see, bracket notations a lot more powerful than dot notation, dot notation, you can really only put strings in there, and remember those strings have to be valid variable names, which means they can't be numbers, they can't have weird characters, they can't be expressions like math or a function.

[00:04:56] You can't put quotations around it. For brackets you can do pretty much anything, somethings do need quotes. I have a little key here, so if it has this key here, that means it requires quotes. So, if you want "string, it has to have quotes. If you want to do anything with a "weird character, you need, you require, excuse me.

[00:05:20] You require the quotes as well and then variables, numbers, and expressions without the quotation marks.
>> Bianca: Cool? Mm-hm.
>> Student 2: If you pass in a function in the brackets, does it have to return a string?
>> Bianca: It should return a string.
>> Student 2: Okay.
>> Bianca: Whatever returns is gonna be stringified.

[00:05:39] The danger with, I don't know why you would really, I don't know, maybe you would put a function. I've never put a function in bracket notation, but if you don't call the function, then it's just gonna basically it's like stringified functions. So if you say var x = function It's just gonna say X.toString, and then it's gonna do a property lookup on something that looks like function with quotation marks.

[00:06:06] So make sure that you actually call your function.
>> Bianca: If you must do that, but I wouldn't recommend it. It was more of an example of that you can do that because it evaluates expressions and those brackets.
>> Student 2: Does the stringify in the brackets like if it's a number?

[00:06:27]
>> Bianca: Mm-hm.
>> Student 2: And so anything if it's defined.
>> Bianca: Yep.
>> Student 2: Got it.
>> Bianca: Yep.
>> Student 2: Are there any special string interpolation rules for single versus double quotes? Some languages single just single quotes is just a string of literal-
>> Bianca: No it doesn't matter.
>> Student 2: So you can proper-

[00:06:44]
>> Bianca: Yeah, it could be anything. Yeah, it really doesn't matter. You guys are really in to the quotations today. So many quotes. Cool, all right so those are the rules. Any questions about these rules and really important about these rules, that they don't change. So I go saying before, everything in JavaScripts and Objects.

[00:07:08] And because they're Objects, these Objects rules for the syntax stay the same. So keep that in mind, wherever you see dot notation, wherever you see bracket notation, just remember these rules and they're always gonna be the same.