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

Bracket notation can also be used to create properties. Functionally, bracket notation is the same as dot notation. However, the syntax looks entirely different. Both notations are interchangeable.

Get Unlimited Access Now

Transcript from the "Bracket Notation" Lesson

[00:00:00]
>> So what's with the bracket stuff? Right? Are you guys familiar with seeing brackets? Yeah, this is more probably what you're thinking of when you think of an array, right? You say person, zero with brackets, and some value, right? In this case it's a string, but it could be an object, it could be a function, it could really be anything.

[00:00:26] If you're storing an array of functions, probably doing something wrong, but it is possible. So, really what's happening here is our 0 is just being stringfied. And there it is, it's just a property. But then, why can't we say person.0? Because it's a syntax error, because it's not a string.

[00:01:04] So, that's why we have to use the brackets. So we use the brackets when we can't use the dot basically, and when can we not use a dot? Pretty much when the value is not supposed to be a string literal, right? So, for example, name, the property name is Name.

[00:01:33] Sorry, guys. And so you say .name it saves as name. Yeah? When you need to coerce it into a string, or it's just invalid, right? There's some invalid characters, you can think of it like, what is a valid variable name? That's a way to think about it. If it's a valid variable name, it probably could be used with a dot notation.

[00:01:59] If it's not, then it gets caught up in your parser. So that's why we use the brackets, simply because it's a number. And that's it. What about this? So we have our person, we have the name, we have a plea, I would never, Mrs. White says. What's gonna happen to our data structure?

[00:02:29] What arrow needs to go where? How about, gray zipper on the very end?
>> [COUGH]
>> Name to I would never.
>> You think name would go to I would never? I'm giving you a second chance. Person to I would never. [LAUGH] Close. What's the problem here?
>> We don't currently have something called plea attached to that.

[00:03:02]
>> Yeah. So when we use the brackets, we don't assume that it's a string. So it could be a variable name, it could be an expression. You could call a function in a bracket if you wanted to, again, probably not a good idea, but it's valid, it won't give you an error.

[00:03:21] So yeah, we need to change that, So we're updating plea to the string wouldShe, and so notice that the property name here is wouldShe and not plea If we wanted it to be plea, how might we go about doing that? How about here in the middle with the black?

[00:03:51]
>> Can you ask that again? Sorry, I was still going through it.
>> Sure, no problem. So, I just said notice that wouldShe is the property name. But some might expect it to be plea. However, it's not, if we did want it to be plea, what might we need to change?

[00:04:12]
>> It would need to be on the other side of the equal sign somehow, person is gonna have to assign that. Cuz right now it's,
>> How do we do it before for this one?
>> Or you could do the person.plea.
>> Mh-hm, Yeah, so you could use the dot notation, absolutely, and assign it.

[00:04:37] So the dot notation coerces it into a string, right? How can we do it with bracket notation?
>> Have quotes around plea?
>> Quotes around it, that's how you manually make a string, right? Instead of coercing it. Awesome. There we go.
>> So now-
>> I have a question.

[00:05:03]
>> Yeah.
>> So could you go back to the other slide? I guess it's kind of in Slide 2 too. But so, in this example, first you set like the variable plea to wouldShe, and then later on you use the bracket thing. If you would skip that first step of setting the var plea to wouldShe, then what would have happened on that last line with person?

[00:05:28]
>> Yeah.
>> Bracket plea.
>> Yeah, so the first thing that would happen is it's gonna evaluate what's in the bracket, we'll actually do that first bit.
>> And it'll evaluate what's in the bracket, it'll say, plea is a variable. So there's no quotes around it or anything like that, it's not a number, it appears to be a variable.

[00:05:51] So it'll first look in the scope for a variable and look in any scopes that it's connected to, which we'll talk about later, and find that there is no plea. And so, let's run it and see what it says to us.
>> Would that kick up an error then if you're trying to sign like that?

[00:06:13]
>> Yeah, plea is not defined, it says. I think it's good to learn the errors. Cool.
>> So, show them how to fix it with quotes in the bracket.
>> Mh-hm, so if you see that, we'll just put our quotes around, and then we're happy. Here's our little special thing about the array, we have our little length, which is zero, which is interesting, right?

[00:06:45] Because we have some stuff in this array. Interesting. Okay, great. So, if we create something with the brackets, can we then look it up with the dot?
>> Yeah.
>> Yeah, seems reasonable. Can you imagine if you had to remember how something was defined? You can imagine how many files and etc, etc.

[00:07:19] You don't need to remember how it's defined, it can go either way, you just need to remember the basic rules. So, I'm gonna point to some people, and we're gonna uncover the rules that we have discovered so far about objects and arrays. Are you ready? Okay, so let's start in the way, way back.

[00:07:40] What's the rule that we learned through this exercise about objects and arrays?
>> Array is a type of object that has some methods already attached to it.
>> Mh-hm, awesome. That's probably the coolest one, I think. Yeah, and then I go here, it's gonna go like this. So, just so you know, you could prepare yourself
>> Property string can be passed with dot notation or brackets in quotes.

[00:08:11]
>> Mh-hm, yeah, absolutely. [LAUGH]
>> Can we come back? [LAUGH]
>> Sure, sure.
>> I'm gonna repeat a little bit, but the using the dot notation coerces to a string where bracket doesn't.
>> Got it, and why can't we use dot number, dot zero? Why does that not work?

[00:08:47] Because it says if we're coercing into a string with a dot, right? If we said person.zero, right? Why can't we do that? The answer is in the next line.
>> There's no variable named zero.
>> Well, for the dot notation it's gonna coerce it to a string.
>> Is it because zero is not a string, it's seen as a number?

[00:09:10]
>> Well, you can coerce a number into a string, right? The reason is that it's just invalid syntax, it starts to evaluate as a number and it gets confused and so it's gonna give you a syntax error. So we can only use dot notation with characters that are not unusual.

[00:09:38] And when I mean unusual, I mean, can you create a variable name starting with that character, that contains that character, right? So you can use an underscore but not a dash. These are things that you just kinda have to learn by trial and error, but just understand that if you're using a dot notation or you're using a character that's a little bit unusual, you might get a syntax error.

[00:09:58] And if you do, the solution is to?
>> Sorry, I was typing notes.
>> Change it to a string.
>> Yeah, put it in a bracket notation and put quotes around it, yeah, awesome. So, I know that we're drilling this in, but this is the most common thing that people get stuck on, that can take a long time.

[00:10:23] But if you learn the rules, it's pretty straightforward. There are, I don't know, a handful of rules, maybe five rules to know, but you guys seem to be picking it up.