Dot vs Bracket Notation | JavaScript 🔥 | Lecture 040

Summary

The video explains how to retrieve and modify data from JavaScript objects using dot and bracket notation. It covers using variables and expressions with bracket notation to access properties dynamically. Challenges viewers to compose a sentence pulling data from an object. Also explains operator precedence for dot and bracket notation, executing left-to-right. Key concepts are accessing properties, dot vs bracket notation, computed expressions, and chaining operators.

Takeaways

• 😀 There are two ways to retrieve/change data from objects: dot notation (obj.key) and bracket notation (obj['key'])
• 📝 Bracket notation allows computing property names, dot does not
• 💡 Use brackets when property names are dynamic, else use dot notation - it's cleaner
• 🔎 The 'this' dot goes to the object and gets the property with the specified name
• 📋 Can add new properties to objects simply by assigning values using dot/bracket notation
• ⏩ Dot and bracket notation have high operator precedence, executed left-to-right
• 📚 'undefined' means accessing a non-existent property; it's a falsy value
• ✅ Can use 'undefined' check to handle invalid user requests for properties
• 🤝 The 'length' property on arrays returns number of elements
• 💪 Challenge is to dynamically print 'Jonas has 3 friends, best is Michael' from data

Q & A

What are the two ways to retrieve data from objects in JavaScript?

The two ways are: 1) Using the dot notation (object.property), and 2) Using bracket notation (object['property']).

When should you use bracket notation over dot notation?

Use bracket notation when you need to compute the property name dynamically, such as when getting the property name from a variable.

What does the 'this' keyword refer to in dot notation?

The 'this' keyword refers to the object itself. So 'object.property' means get the property on this object.

What happens if you try to access a property that does not exist on an object?

You get undefined when trying to access a non-existent property on an object.

How can you iterate over the properties of an object?

You can use a for-in loop to iterate over the properties of an object.

What is the difference between arrays and objects in JavaScript?

Arrays contain ordered data indexed by numbers. Objects contain unordered data indexed by key names.

How do you add a new property to an existing object?

Use either dot notation or bracket notation. For example: object.newProperty = 'value' or object['newProperty'] = 'value'.

What is the purpose of the length property on arrays?

The length property returns the number of elements in an array.

What data types can properties hold in a JavaScript object?

Properties can hold any valid JavaScript data type - strings, numbers, booleans, arrays, other objects, etc.

Can you nest objects and arrays inside each other in JavaScript?

Yes, JavaScript allows arbitrarily complex nesting of objects and arrays.

Outlines

00:00

😊 Using Dot and Bracket Notation to Access Object Properties

This paragraph explains the dot and bracket notation for accessing properties on a JavaScript object. It shows how to use dot notation (object.property) and bracket notation (object['property']) to retrieve data from an object. It also demonstrates that bracket notation allows dynamic property names computed at runtime, while dot notation requires the actual property name.

05:02

😃 When to Use Dot vs Bracket Notation

This paragraph summarizes when to use dot notation vs bracket notation. Use bracket notation when you need to compute the property name dynamically. Use dot notation in all other cases when you know the exact property name, as it looks cleaner.

10:03

😎 Interactive Example with Prompt() and Accessing Properties

This paragraph shows an interactive example using the prompt() function to get user input on which property to access. It demonstrates using bracket notation to access the chosen property dynamically. It also handles the case when the user chooses a non-existent property by checking for undefined.

15:08

😊 Adding New Properties and the this Keyword Challenge

This paragraph shows how to use dot and bracket notation to add new properties to an object. It then sets a challenge to write a dynamic sentence accessing multiple properties using dot and bracket notation, explaining the need for this.keyword to refer to the current object.

Keywords

💡dot notation

The dot notation is used to access properties of an object. For example, to access the lastName property of the Jonas object, we can write 'Jonas.lastName'. This is a clean and easy way to retrieve data from objects.

💡bracket notation

The bracket notation allows us to access properties dynamically by putting an expression inside the brackets. For example, 'Jonas["last" + "Name"]' will evaluate to 'Jonas.lastName'. We need this when we want to access properties based on a dynamic computation.

💡undefined

Undefined is the value we get when trying to access a non-existent property on an object. For example, Jonas does not have a 'location' property, so Jonas.location would yield undefined. We can use this to handle invalid user input.

💡expressions

Expressions produce a value, like 3+4 or a+b. We can put expressions inside brackets to dynamically access a property, like Jonas[userInput]. The expression gets evaluated first before the property lookup happens.

💡arrays

Arrays are data structures that hold ordered, list-like data. The Jonas object has a friends property which contains an array. We can get the number of elements with friends.length and access elements using index, like friends[0].

💡objects

Objects allow us to store data in a structured format with key-value pairs. For example, the Jonas object stores data like firstName, lastName, age etc. Objects help organize and access data.

💡properties

Properties are the key-value pairs in objects. For example, 'firstName' and 'Jonas' are a property in the Jonas object. The key (firstName) maps to the value (Jonas). Properties help add meaning and structure to data in objects.

💡methods

Methods are actions we can perform on objects. For example arrays have built-in methods like push and pop that add/remove elements. length and toString are some other useful methods we used.

💡operators

Operators (like +, -) allow us to perform computations and actions. The . and [] we use to access object properties are also operators with specific rules. Understanding operator precedence helps read complex code.

💡syntax

Syntax refers to the precise Structures and formats we use to write code. Getting the syntax right is key for accessing properties correctly with dot vs bracket notation, calling built-in methods properly etc.

Highlights

There are two ways to retrieve data from objects: dot notation and bracket notation.

Dot notation is more convenient when property name is known, bracket notation allows computing property name.

Bracket notation allows expressions that evaluate to property name, dot notation needs actual property name.

Undefined is returned when trying to access a non-existent property on an object.

Bracket notation evaluates the expression inside the brackets to get the property name.

Prompt function creates a popup to get user input that is returned as a string.

Conditional checks if property access returns undefined to handle invalid requests.

Dot and bracket notation can also be used to add new properties to objects.

Length property returns number of elements for arrays.

Square brackets access array elements, 0 indexes first element.

Dot and bracket notation have high operator precedence, executed left-to-right.

Dot chains apply operations left-to-right, replacing values along the way.

Member access and computed member access are formal terms for dot and bracket notation.

Computed in computed member access refers to ability to compute property names dynamically.

Rules govern everything in JavaScript, with time it will become second nature.

Transcripts

In this video, you're gonna learn

how to retrieve data from objects

and also how to change data in objects,

using both the dot and the bracket notation.

So let's actually get the object here

from the previous lecture,

so that Jonas object.

And I noticed that we actually

didn't even take a look at it and a console,

so let's quickly log it,

but we're actually not gonna see a big surprise.

So all it shows us it's really the same object

that we just wrote in code.

So it looks like this.

So essentially just as it is here in the code,

the only thing that's different is that the properties here

are ordered alphabetically.

And so that's what I mean when I said in the last lecture

that the order of properties does not matter.

And that's because we simply get the properties

from the object using the property name itself.

So that's actually the topic of this video.

And so let me show you the two ways in which we do that.

So the first way of getting a property from an object

is by using the dot notation

and that is very straight forward.

So let's log that to console.

And so let's say that we want to get the last name.

So all we have to do is to write

Jonas dot last name and that's it

you see here is my last name

coming straight from the Jonas object

so Jonas dot last name.

And this dot here is actually an operator

which will go to this object

and then retrieve to property

with the name that we specified here.

Now we can do the exact same thing

using the brackets notation.

So let me show that as well.

So Jonas, and then we use brackets in a similar way

in which we retrieve data from an array,

but here we need to specify a string with the property name.

So with the key, so let's do my name again,

or actually a last name.

And so these results should be exactly the same here.

Now, the big difference between these two here

is that in the bracket notation here,

we can actually put any expression that we'd like,

so we don't have to explicitly write the string here,

but instead we can compute it from some operation

because remember that an operation

is basically an expression.

So something that produces a value

and so we can put that here, inside the brackets.

So let's actually try that and imagine

that we had a variable in which we store the repeating part

in first name and last name.

So we have name here in both

and so let's store just that inside of a variable.

And you will see my point here in a second

this will all make sense, trust me.

So name key, and then just name.

So again, that's the repeating part

in these two property names.

And now we can use that variable

to get both the first and the last name.

So console dot log and then Jonas records.

And so now here we can insert the expression.

So let's create a string first

and concatenate it with name key.

And here we could have built this string

using a template literal,

but in this case it's not really necessary.

So let's just copy this and then also last.

So what will happen here

is that as JavaScript sees this line of code,

it will start by executing this plus operation

and so it will create a string first name.

And then it will go to the Jonas object

and retrieve that property

at the same for the last name

here and the second line of code.

And so that's how we get Jonas and Schmedtman.

And doing something like this is more common

than you might think

and so that's why it's important that we understand

that in the square brackets,

we could put any expression here, okay.

Now the same thing would not work

with the dot operator or the dot notation.

So we cannot write Jonas dot and then this here,

for example, this would not work at all,

so and unexpected string.

And so that's the reason why we need

the brackets notation and dot notation.

We have to use the real final property name

and not a computed property name.

So for example this one,

this one is a real property name

as it appears in the object

and so that's why it works here in this case.

So in what situations should we use the dot notation

and when do we have to use deep brackets notation?

And I kind of already replied to that,

but this is just to recap.

So when we need to first compute the property name,

like we did here with the first and last name,

then of course we have to use the bracket notation

in any other case, just use the dot notation,

which looks a lot cleaner and it's also easier to use, okay.

And now to make the need for the bracket notation

even more clear, let me show you another example,

which I think is gonna be really fun.

So let's say that we don't know yet

which property we want to show,

and instead we get this information

from some user interface

so, for that we can use the prompt function.

Remember, so we can use prompt

and prompt is yet another built in function

that is built into JavaScript

and that we can use in any script.

So here we can write a string

and then this will create a popup window

with an input field.

Remember, so here we can write,

what do you want to know about Jonas?

choose between first name, last name, age, job and friends.

And remember that this function will then return a string

and this string, we just need to store into some variable.

So let's call this one 'interested in', alright.

And to start, let's just log this 'interested in' value

to the console here,

just till we see that it actually works.

And so here is the popup

and so now we just write one of these options here.

So let's say job,

and indeed now here we get job.

And so what we want to do now

is to basically display the job here in the console,

because that's what the user chose.

So how will we do that?

Can we use the dot notation?

So basically, can we do this?

Jonas dot interested in,

well, let's find out,

but I hope that you can guess.

And so we get undefined

and this is something new

that I didn't explain yet.

And so let me tell you now that undefined is what we get

when we try to access a property

on an object that does not exist.

So Jonas does not have a property

called 'interested in', right?

And so therefore the result

of trying to access 'interested in' on Jonas is undefined.

Now, what we need to do here

is instead of the dot notation, use the brackets notation,

because then we can put any expression here,

which in this case will be interested in.

And so JavaScript will now come here

and replace 'interested in'

with the actual value of the variable

and then that's the one

that will be looked up on the Jonas object.

So let's try that again

and now when I say job, we get a correct result, great.

And I hope that you did understand

the big difference between using the dot notation

and the bracket notation

and why the bracket notation gave us the correct result.

So again, it's because basically this expression

that we put here between these brackets will get evaluated

then this one here is job.

Now, of course, we can also pass in something else.

So something that is not here, for example,

let's try to access the location

and then again, we get undefined.

And once more, that is because

there is not a property called location on the object.

So let's actually handle that

using some knowledge that we already have.

So we know that undefined is a false value, right?

And so we can use that to our advantage now

and create some logic that we'll print a custom string

whenever the user tries to access

a property that doesn't exist.

So let's do that.

And we can say, if Jonas, brackets, 'interested in',

then log that to the console.

So basically this,

and again, I'm using now the option

and arrow down to move this line.

And so if this value exists,

then it is a truth value because it is not undefined

and so any string that is not empty

or any number that is not zero

will then trigger this code block here to be executed.

Now, if one of these properties was actually empty or zero,

we would then go to the else block,

but let's not account for that here in this case,

let's say that doesn't happen, all right.

So in case that the value does not exist

So for example, with location,

we then get undefined

and so in this case,

Jonas 'interested in' is undefined, which is false

and therefore we would go to the else block.

And so let's say something like wrong request,

and then we can repeat this sentence here.

So let's try that again here.

So location, and now we get wrong request,

but if we try something that exists,

then we get that result, great.

So I think this was a fun little experiment here

and now I hope you like that.

And now that you know

how to retrieve elements from an object,

let's also learn how to use both the dots

and the brackets notation

to add new properties to the object.

And so that's pretty straight forward.

So all we have to do is Jonas dot

and now let's actually use location

and set it equal to something.

So to some value.

So I'm located in Portugal

and so that's how we use the dot notation.

And then we can also of course use

the brackets notation just the same.

So let's say my Twitter handle here,

which is @Jonasschmedtman with just one N

and you should definitely check that out.

And now just to see that it worked,

let's log it to the console one final time

and okay, it's asking us for the field name again,

but anyway, now we have the location

and the Twitter here as well in the object.

And of course here

we could put any expression just like before.

So it works in the exact same way, alright.

And that's how we use the brackets and the dot notation.

Now, finally, I have one small challenge for you

that you can just do right now

here at the end of this video.

And so what I want you to do is to write a sentence

like this one, that I'm going to show you now,

but in a dynamic way.

So let's just write challenge here.

And so I want you to write 'Jonas has three friends

and his best friend is called Michael'.

So here, we suppose that the first friend in the array,

so in the friends array is the best friend, okay.

And for the record, I do have more than three friends,

but of course, here, we need to keep it all very simple.

So again, I want you to write this sentence,

but without hard coding, any of these values.

So what you need to get from the object

is this value, this value and this value.

And this is actually a bit hard, I would say.

And so there's absolutely no need for you to nail this,

but you can still try it

and maybe you can do some of the parts.

One hint that I can give you is that you will need to use

multiple dots to get the number of friends, okay.

So that's totally possible.

And so take like five minutes to try this out now.

So pause the video and I'll see you in a second.

All right.

And so this is how we would do this.

So we want to lock this to the console, of course.

And so we're starting with the name

and this one is probably the most straightforward one.

So that's just, Jonas dot first name.

So that is where the name is stored

then has, and then the number of friends.

So the friends are stored in Jonas dot friends.

Now, do you remember how to get

the number of elements in an array?

It is by writing the array dot length, right?

And so let's do that.

So Jonas dot friends.

And so this is our array, right?

And so on this array, we can now ask for the length.

And so basically you can see here that length

is also a property that is available on all race.

So it's a property that we don't define ourselves,

but it's automatically available.

But now that you know about the dot notation,

you can also start to understand that the dot length

is just a property that is available on all a race.

And so that's what we're doing here.

So again, we have an array which is this one,

and on there, we can simply then request dot length.

Okay, let's continue the sentence now.

And his best friend is called

and now we need to simply get

the first element from the array.

And so that's again, Jonas dot friends

and now remember, we get the first element

of an array using square brackets zero, and that's it.

So once more, this here is simply an array

and so we learned that to take the first element

we just use square brackets with zero.

So in a sense on the race,

we also have the brackets notation.

Okay, so that's just test this,

and again, this annoying popup,

but indeed Jonas has three

and we're just missing the friends here.

So friends and his best friend is called Michael.

So just what I had written here as a template.

Now, in terms of operator proceedings,

let's quickly check out why it actually works this way.

So with the dots here.

Because remember, as I said,

the dot operator here is really just that

it's just an operator and the same goes for the brackets.

So I will, again, Google MDN operator proceedings,

but the link to this table

is also on the resources pages on my website.

And the link to that one

is right in the first text lecture of the course.

But anyway, here we have date dot notation,

which here is called member access

and then we have the brackets notation,

which is here called computed member access.

And so the computed,

is because as I mentioned multiple times now,

because we can compute the property names

that we want to access.

Now, what matters here is that they both have a really high

priority and both are left to right.

And so that's why all of this works.

So we have two dots here

so Jonas dot friends dot length

and they are executed left to right.

And therefore the first thing

that JavaScript does is Jonas dot friends.

And so essentially,

this will then be replaced with the array

and then on that array

is where the dot length is then applied

and the same thing here.

So first Jonas dot friends is done.

And then this one is also left to right

and so from there we take element number zero, okay.

So there's no magic involved here

there is rules for everything and everything makes sense.

And again, you don't need to memorize this here,

with time all of this will become second nature to you.