JavaScript: From Fundamentals to Functional JS Bracket Notation

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

[00:00:04]
>> Bianca Gandolfo: We talked about dots now let's talk about brackets. Dots and brackets are pretty similar as far as functionality. The syntax is very different though and the rules are also different. We're here storing material, a property material on our box and it's gonna work exactly the same. Box dot material is more or less equivalent to box bracket quote material.

[00:00:32] You can kind of think of these two syntax as interchangeable to an extent. What is this gonna return? How about you, right here with the green sweatshirt.
>> Speaker 2: Cardboard.
>> Bianca Gandolfo: Yeah, totally cardboard. We can use them interchangeably, it doesn't affect if we store a value using bracket notation.

[00:00:53] It doesn't affect our dot notation at all. And then here, what about, green sweater in the second row?
>> Bianca Gandolfo: What is this gonna return?
>> Speaker 3: Cardboard as a string.
>> Bianca Gandolfo: Totally, cardboard as a string. Here we are, I'm assigning values, so here's us assigning a value. Here's us accessing a value.

[00:01:22] If we then wanted to store a value, we can just put it in cb and then we can reference it later.
>> Bianca Gandolfo: Cool.
>> Speaker 4: Real quick question.
>> Bianca Gandolfo: Mm-hm.
>> Speaker 4: Is that updating the property or the value on the object?
>> Bianca Gandolfo: Which one? The second line?
>> Speaker 4: Just the brackets, is that updating the property name or the value?

[00:01:44]
>> Bianca Gandolfo: It's adding a property and a value, so it's doing both. It's not updating anything, it's just adding it.
>> Speaker 5: Can you use that syntax in the second line there and then reference it with a dot notation later?
>> Bianca Gandolfo: Absolutely.
>> Speaker 5: So they're interchangeable?
>> Bianca Gandolfo: Yeah, they're completely interchangeable, totally.

[00:02:10]
>> Bianca Gandolfo: They're completely interchangeable until they're not and we're gonna talk about when they're not, and so we're gonna talk about variables. When we're gonna store our string value, our property name as a variable, we're gonna then need to use bracket notation but the important difference here is we're not gonna use the quotations.

[00:02:30] We see here in our code that we have our key here is going to be holding the string material and then we then put in our bracket step variable name. What's this going to return? What about grey shirt, last row. I wish you guys had name tags.
>> Speaker 6: Material?

[00:02:55]
>> Bianca Gandolfo: Is there gonna be material? Anyone wanna help him out?
>> Speaker 7: These are keys, right?
>> [INAUDIBLE]
>> Bianca Gandolfo: Yes, this is gonna be the key.
>> Speaker 7: Got it.
>> Bianca Gandolfo: Yeah, so it's gonna be cardboard.
>> Speaker 7: Yeah.
>> Bianca Gandolfo: Key is, so if we just like here said console.log, for example, key, then that would be material.

[00:03:20] That make sense? Do you have a question?
>> Speaker 8: A question in the chat room. The difference between box with the curly braces, and then if you were to do box equals new object.
>> Bianca Gandolfo: Mm, they're different. One is constructor notation, and one is object literal notation. I'm going to recommend that you always use object literal notation.

[00:03:40] The key word new, is something you see a lot on subject oriented languages as well as object oriented Java script when you are doing those patterns. That's a little out of the scope of this class but always just use this one and you'll be fine but they're essentially the same thing.

[00:04:00] Great question.
>> Bianca Gandolfo: Variables, the important thing again about variables is we're not going to put quotations around it because why? Anyone have a hunch on what would happen if we put quotations around key here?
>> Speaker 9: Then it's just a string.
>> Bianca Gandolfo: Absolutely, then it's just a string and it will be interpreted by your browser as a property on box called key, which then would return undefined.

[00:04:33] Because we don't have a property called key on our object. Cool. The cool thing about bracket notation as well is that it's actually evaluating its expressions. With dot notation, you can't put any expressions or any code to be evaluated. You can't say box dot 1 + 1. That just wouldn't work.

[00:05:00] However, with bracket notation, we can do that. Here's an example of us calling a function in our bracket notation. Here's a function creatively named func, we call that function and it returns a string material. Think this is going to work, guys? What's gonna print?
>> [INAUDIBLE]
>> Bianca Gandolfo: I need to start mixing this up because everyone can just guess cardboard and it's always gonna be right, I just realized.

[00:05:33]
>> Speaker 7: Can you back to that previous slide when you did the key thing? Because you used quote. Now if there happened to be a key called key-
>> Bianca Gandolfo: Uh-huh.
>> Speaker 7: Would it then return the value of that quote unquote key or whatever just like-
>> Bianca Gandolfo: Yup.
>> Speaker 7: Okay.

[00:05:46]
>> Bianca Gandolfo: Yeah. Exactly.
>> Speaker 7: All right.
>> Speaker 8: Hey, Bianca, what are the rules around single quote, double quote?
>> Bianca Gandolfo: The rules are that you should do as I say and not as I do because I'm not consistent in these slides with it. But be consistent, they have to match one side or the other.

[00:06:06] Generally, wherever you work, hopefully has a style guide or if you're contributing to open source, there's a style guide that will tell you which one they prefer. You want it to match on your code base but there isn't really a rule.
>> Speaker 8: The interpreter figures that out that single quote and double quote, same thing?

[00:06:23]
>> Bianca Gandolfo: Yeah, but for example, if you did key like this, that wouldn't work. Yeah. But yeah, it's all the same. You had a question in the back?
>> Speaker 8: That was the question in the chat room.
>> Bianca Gandolfo: Okay. Cool. My slides are strategically created with single and double quotes so that it brings up that question.

[00:06:42]
>> Speaker 8: [LAUGH]
>> Bianca Gandolfo: It's all planned.
>> Speaker 8: Another question is can properties be Unicode? If so, how do I quote them?
>> Bianca Gandolfo: Mm, I'm not sure, that's a good question. Email me, bianca@hackwrecker.com and I'll get back to you on that.
>> Speaker 10: It's Escape and then slash u and then the hex code.

[00:07:01]
>> Bianca Gandolfo: Really? Cool. So the answer to that is you Escape it, dash u?
>> Speaker 10: Slash u and the hex code.
>> Bianca Gandolfo: Slash u and the hex code.
>> Speaker 10: There is the Unicode.
>> Bianca Gandolfo: Very cool, thank you.
>> Speaker 8: Could you give an example of Unicode? Is that difficult?
>> Bianca Gandolfo: I don't know, you guys are asking hard questions.

[00:07:21] What would be an example of the Unicode?
>> Speaker 10: I have no idea.
>> Bianca Gandolfo: I don't know, we can look it up.
>> Speaker 8: Maybe like ampersand, or similar thing.
>> Speaker 10: Local is A, which is what, 65?
>> Bianca Gandolfo: I don't know. I don't have an example of Unicode, but that's an easy Google search.

[00:07:46] Cool. So Hermanth is the person I should be upset with who are asking me silly questions. [LAUGH] Okay, cool. Here we go, expressions. Our bracket notation, unlike dot notation, can handle expressions, and that's pretty cool.