Objects: Properties and Methods

Objects: Properties and Methods

An object in JavaScript is a collection of attributes that collectively describe a "thing". That "thing" could be anything you want: a pencil, a person, a hat, or a car.

An object therefore represents a single entity that can manipulate its own data and interact with the rest of your program.

Creation

Creating an object is pretty easy, you just need to determine what attributes it has, like any primitive types, arrays, functions (basically methods) or other objects that make it up.

Let's create a dog object. A dog can have a name, an age, and can bark.

Here's how a dog object could look like:

	
    var dog = {
        name: "Cooper",
        age: 3,
        bark: function () {
            console.log("BORK BORK");
        }
    };
	

This creates a new object with the properties name, age, and bark, and initializes the variable dog to that.

Retrieval

To retrieve data back from your object, or invoke any functions from them, you can use the dot syntax. This prints out the name and age.

	
    console.log(dog.name);
    console.log(dog.age);
	
	
    Cooper
    3
	

Great, we got back the data that we put in, but now what about for functions? Well for those, all you need to do is invoke them.

	
    dog.bark();
	
	
    BORK BORK
	

Reassignment

Assigning existing properties to a new value is very easy. Let's say you forgot your dog's birthday and he's actually 4 years old, this is how you correct that:

	
    dog.age = 4;
	

This reassigns the property age to the value 4.

If age was a property that didn't exist before, it would have created it. In other words, adding brand new properties after you created the object is as easy as this:

	
    dog.weight = 20;
	

Now your dog object has a new property weight with a value of 20.

Feel free to print out your object, which will list out all of the properties and methods that it contains.

Printing out an object.
Printing out an object.

Methods

Similar to arrays, JavaScript provides built-in methods to make working with objects easier, and below are a few of the most useful ones.

HasOwnProperty

As the name implies, the hasOwnProperty method lets you check if an object has a property or not.

	
    var dog = {
          name: "Cooper",
          age: 3,
          bark: function () {
              console.log("BORK BORK");
          }
      };

      console.log(dog.hasOwnProperty("name"));
      console.log(dog.hasOwnProperty("weight"));
	
	
    true
    false
	

Because dog has a name but not a weight, the first method call returned true and the second returned false.

Keys

If instead of checking a single key you want all the keys, use the keys method.

	
    var dog = {
          name: "Cooper",
          age: 3,
          bark: function () {
              console.log("BORK BORK");
          }
      };

      console.log(Object.keys(dog));
	
	
    ["name", "age", "bark"]
	

Values

If you want to get back all the values of an object instead of the keys, there's the values method. This method returns an array containing all the values of the JavaScript object.

	
    var dog = {
          name: "Cooper",
          age: 3,
          bark: function () {
              console.log("BORK BORK");
          }
      };

      console.log(Object.values(dog));
	
	
    ["Cooper", 3, ƒ]
	

The ƒ there is representing the bark function.

Entries

Finally, if you just want both the keys and the values of an object, you can retrieve all the entries using the entries function.

	
    var dog = {
          name: "Cooper",
          age: 3,
          bark: function () {
              console.log("BORK BORK");
          }
      };

      var entries = Object.entries(dog);
      console.log(entries);
	
	
    0: ["name", "Cooper"]
    1: ["age", 3]
    2: ["bark", ƒ]
	

As you might imagine, objects are extremely flexible, versatile, and useful in JavaScript and you will soon find yourself using them pretty often.