Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Object-Oriented JavaScript

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Dot Notation & Bracket Notation

5:45 with Ashley Boucher

Learn how to access properties and methods using dot and bracket notation.

Object Literals Referring to Themselves

Many times, when writing methods for objects, you might want to refer to one of that object's properties. For example, consider the following code:

const teacher = {
   firstName : "Ashley",
   lastName : "Boucher"
}

I may want to add a method to this object literal called printName() that will log both the first and last name properties of the teacher variable to the console. To access the value of these properties inside the method, I'll use the this keyword instead of the variable name. This way, you'll always be able to access the property values attached to that particular object:

const teacher = {
   firstName : "Ashley",
   lastName : "Boucher",
   printName: function(){
      console.log(this.firstName + this.lastName);
   }
}

Template Literals

We use template literals a lot in this course. They are a feature in ES2015 and make outputting strings much easier. If you're unfamiliar with them, review this workshop from the Treehouse library.

Introducing Template Literals

Installing Node on Your Local Machine

If you'd like to download node.js on your local machine, visit the Node.js website, and follow the instructions there. Windows users can also reference this article from Treehouse's blog.

JSON and Bracket Notation

JSON, short for JavaScript Object Notation, is a data-interchange format. It has a special syntax that looks a lot like the syntax for JavaScript objects. Sometimes, keys in JSON might be more than one word. Take a look at this sample JSON data:

var data = {
   "First Name" : "John",
   "Last Name" : "Doe"
}

To access the first name or last name properties of this JSON data, you would use bracket notation:

var first = data['First Name'];
var last = data['Last Name'];

You can learn more about JSON here.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Encapsulating an object and giving it properties and 0:00
    methods is a great first step, but how do we actually use what we've created? 0:03
    How do we access an object's properties? 0:07
    How do we call its methods? 0:09
    What about changing its property values or 0:11
    giving it more properties after we've created it? 0:13
    These are all great questions, and I'll be answering them throughout this video. 0:16
    There are two ways you can access an object's properties, dot notation and 0:20
    bracket notation. 0:24
    You've probably seen both of these before. 0:25
    Let's study dot notation first using something we're familiar with in 0:28
    JavaScript like arrays. 0:32
    To follow along launch the workspace with this video or 0:34
    download the project files and use your preferred text editor. 0:37
    In the file fruits.js, we have an array called fruits. 0:40
    It contains three items, apple, pear, and strawberry. 0:44
    We know that arrays are JavaScript objects, and 0:48
    we also know that they have a property length. 0:51
    I'll create a variable called fruitsLength, and 0:53
    set it equal to the value of the length property. 0:58
    To do that, I'll use dot notation. 1:01
    I'll type fruits which is the name of our array, then a dot, followed 1:04
    by the word length, which is the name of the property we're trying to access. 1:09
    fruits.length accesses the length property of the array and 1:13
    returns its value which, in this case, is the number of elements inside the array. 1:17
    Using similar syntax, 1:22
    we can access the value of an object's properties using dot notation. 1:24
    Let's open up the pets.js file and explore this using the ernie object literal. 1:29
    Let's say we wanted to log the value of some of Ernie's properties to the console. 1:34
    For each property we want to output, we'll use the object literal's variable name 1:39
    ernie followed by a dot, followed by the name of the property. 1:43
    So if we wanted to output the age property, 1:48
    we would do console.log and then ernie.age. 1:51
    If we wanted to do the breed property, we would console.log and 1:56
    then ernie.breed. 2:01
    Let's save and run this file to see what our output is. 2:04
    I'm going to use Node to run this file. 2:08
    Don't worry if you're not familiar with that yet. 2:10
    Node is just a way to run JavaScript code outside of the browser. 2:13
    I'll go over it a little more in depth later on in the course too, 2:17
    Perfect, that's just what we expected. 2:24
    Just like properties, methods can also be called using dot notation. 2:26
    Ernie has a method called bark which logs woof to the console. 2:31
    Calling this method is simple. 2:36
    Let's go back to the end of our file here and 2:39
    we'll type ernie followed by a dot, followed by the name of the method, bark. 2:42
    Just like when calling regular functions, we have to add an open and 2:49
    closed parenthesis after the method name. 2:53
    Now let's save again and we can make our console area a little larger and 2:55
    we'll run our file again. 3:00
    Perfect, do you see how it printed out Woof at the end? 3:05
    So that's the gist of dot notation. 3:09
    We can also access properties of objects using what's known as bracket notation. 3:11
    Bracket notation isn't as easy to read as dot notation so it's used less frequently. 3:16
    But what it lacks in appearances, it makes up for in flexibility. 3:21
    You've seen bracket notation before when working with arrays. 3:24
    So let's go back to the file fruits.js and take a look. 3:28
    If you wanted to access a specific element in an array, 3:32
    you would put the array name followed by an open square bracket, then the index 3:35
    of the array element you'd like to access followed by a closing square bracket. 3:40
    fruits[0], for example, will return the first element in the fruits array, apple. 3:44
    To translate this to object literals, instead of putting an index inside 3:51
    the square bracket, you'll put the name of the property you want to access in quotes. 3:54
    So let's go back to the pets.js file and 4:00
    redo some of our code to use bracket notation instead of dot notation. 4:03
    So for the ernie age property, we'll do this. 4:08
    We'll do something very similar for the breed property, and 4:14
    then again for the bark method. 4:19
    Now let's save our file and we can go ahead and run it one more time. 4:25
    I'm gonna clear out the console to give us some space here. 4:29
    See? 4:35
    The output is exactly the same as when we used dot notation. 4:36
    But don't worry, bracket notation gets more interesting than this. 4:40
    You could store a property name inside a variable and 4:43
    use bracket notation with the variable instead. 4:46
    This is really useful if you need to use or generate dynamic properties. 4:49
    For example, if we create a variable called prop and set it equal 4:54
    to the string breed, We can then use that variable name 5:00
    without quotes inside the square brackets to get the value of the breed property. 5:07
    Just like this. 5:12
    Pretty cool, right? 5:15
    Bracket notation also allow you to access or 5:17
    create properties that have spaces inside the property key. 5:19
    This can be really useful when you're working with JSON data, for example. 5:23
    The teacher's notes for this video have some examples and 5:27
    includes some other resources to learn more about JSON and bracket notation. 5:29
    Okay, great job, you just learned the basics of accessing an object's properties 5:33
    and methods through both dot notation and bracket notation. 5:38
    Put your skills to the test in a code challenge right after this video. 5:42

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up