So far, we have used the dot syntax to access properties within an object. Well, there's another way to do it, you can do it with the square brackets as well. And this is an important concept to understand, because of the dynamic nature of using square brackets to access the properties. It allows for more flexibility, and can be very useful in solving certain programming problems. So let's take a look at this. Let me open the console.
And I'm going to create an object again. Similar to the objects we've been creating in our other exercises has a first name last name has a function, age birthdate. Well, some of the things that are part of this object, go ahead and press return to define that object. Now, as we've done in the past, if I want to access the first name, Use the dot syntax. And that returns the first name, I can assign that to a variable. I can log it out, I can do whatever I need to with that.
Now, the other way of accessing these properties is using the square brackets. So I could do the exact same thing. Using square brackets and inside of the square brackets, I put a string literal, that evaluates to the name in the name value pair or the key value pair. So in this case, I would put first name and quotes that will resolve to first name and it will be like entering you user dot first name. Go ahead and press return. And sure enough, we get the same thing back.
Now why is this useful? Why do we know why do we need to know the second method of accessing properties. Well, what this allows is that now, you can use a variable to access a property. Let's say you're writing some code and you're not sure, because of the nature of the code, you're not sure what property is going to need to be extracted from an object. The result is based upon what some code determines, well, you can use a variable and then that variable can be used with the square brackets to access that property. So for example, let's say I have a variable, name part.
And I'm gonna set that equal to first name. Now, let's say that that data came from a web page. Somebody entered first name in a form to indicate what name they want. To retrieve. And so, me writing the code in the background, I don't know what what name, they're going to enter there. And so I just set the value into a variable.
And then I use the variable to extract that from an object like this square brackets. Then inside the square brackets, I simply put the variable because that variable will evaluate to something. And that something is what will be retrieved from the object press return. And sure enough, we get Sharon. So you can see that adds a lot more flexibility to the accessing of properties within an object. All right, let me show you one more example.
That illustrates the power of this. So I'm going to jump out to sublime. Over here in this JavaScript page, I have the following First, I have a pretty simple object. It's Now, it's assigned to a customer variable. And it simply has three properties, which are each part of an address, the name, the street, the city, state, and zip. Now down here, I want to create that address so I can print it out.
I want to put the whole address together. And so I declare a variable, set it equal to an empty string and then I go through a for loop. I is equal to zero, i less than three, so it'll go until I is two and then I increment i and then I start building the address addr plus equal to so I use that assignment operator, where I add to what is already in addr. This information, which is using the square brackets, and it accesses the address the properties based upon what I is, and so I do address and concatenate I to it, and then that will extract from the object, the portion of the address I'm after. Then here at the end I concatenate. This is called an escape sequence.
And this is an escape character specifically, and I concatenate that to the end. And basically what this escape sequence does is it puts a carriage return so backslash and puts a carriage return. And so it will put the whole address together with a carriage return between each part. And then I simply log it to the console so I can see what it looks like. So let's go ahead and take a look at that. copy the file path, paste that in and open the console.
And we have a nice formatted address and so that for loop able to go through that object using the brackets and access each of the properties within the object. So very powerful concept for accessing properties. Let's move on to the next section.