Data types allow us to store different types of information. String variables allow us to store and manipulate textual data. Number variables allow us to keep a running total of prices, or let us keep track of the current index within an Array.

In this lesson, we will explore the object data type in JavaScript, which will allow us to combine variables and functions into a package that can be used again and again.

• Learn about the object data type in JavaScript.
• Learn how to get and set object properties.
• Learn about the this keyword in JavaScript.

Objects are a way for programmers to group together data and functions, variables and methods, state and behavior. We use objects as a way to model the outside world from within the computer. This use of metaphor helps us as developers better organize our software.

let sam = new Object();

sam.name = 'Sam';
sam.age = 32;
sam.occupation = 'Software Developer';

In this example, we created a new JavaScript object called sam. We then assigned some properties of the sam object: name, age, and occupation. We can retrieve the values of the assigned properties by calling them by name using dot notation.

console.log(sam.name);  // 'Sam'
console.log(sam.age);  // 32

Another way to access object properties with the square-bracket notation [].

console.log(sam['name']);  // 'Sam'
console.log(sam['age']);  // 32

A more concise way to create this same object is via the object literal notation.

let sam = {
  name: 'Sam',
  age: 32,
  occupation: 'Software Developer'
}

The above code example results in the same JavaScript object we created using dot notation above. The syntax above is shorter, and more concise, so that's typically what you'll encounter when working with JavaScript.

The properties of an object keep track of the current state of the object. In this case, the name, age, and occupation we have assigned.

Data is not the only thing we can group within an object. Functions that are related to the object can also be tied to it. We typically call these functions, methods.

let sam = {
  name: 'Sam',
  age: 32,
  occupation: 'Software Developer',
  isAnAdult() {
    return this.age >= 18;
  },
  greet() {
    return `Hello, my name is ${this.name}.`;
  }
}

sam.isAnAdult();  // true
sam.greet(); // 'Hello, my name is Sam.'

In this example, we have defined a method on the sam object, which returns true if Sam is over 18, and false, otherwise.

To validate that our code is working, let's rewind the clock by reassigning Sam's age, and then calling the isAnAdult() method, again.

sam.age = 10;
sam.isAnAdult();  // false

Our object has behavior in the form of methods which we can call on the object.

Note: A common "gotcha" when working with JavaScript forgetting to add opening and closing parenthesis to the end of a method call. In order to run the method or function, we must include parenthesis.

sam.isAnAdult;  // won't execute the function
sam.isAnAdult();  // executes the function and returns true or false

this is a special keyword in JavaScript, which we have decidedly avoided discussing until now. It gives us a way to access the caller of the method.

In the example where we call sam.isAnAdult(), this is sam. The isAnAdult() method is not aware of the variable name of its parent object. The this keyword gives the method a way to access the data and methods within the parent object.

This is the most clear and concise explanation of this the author has found. If you would like to read more about the concept of this in JavaScript, check out the resources at the end of the article.

In this article, we have covered objects in JavaScript. Through the use of objects, we can group together state, the properties we define on an object, and behavior, the methods we define on an object. This grouping of state and behavior is a foundational concept of the Object-oriented Programming paradigm.

• ECMAScript 6 - Method Properties
• Understanding JavaScript Function Invocation and "this" - Yehuda Katz
• You Don't Know JS: this & Object Prototypes