JavaScript data type: Objects

Real life object - you!

To wrap your head around what an object is, think of yourself.

Your name, age, hair color, interests are values that can be collected and called an object.

This is how it may look like in JavaScript code:

const me = {
  fullName: 'Ruben Doe',
  age: 30,
  color: {
    hair: 'purple',
    eye: 'green',
    favorite: 'green',
  },
  interests: {
    soccer: true,
    dogs: true,
    cats: false,
  },
};

JavaScript objects are assigned to a variable and initiated with curly brackets ({}).

The object above, you can see that it's a mixture of different primitive types. You can even have nested objects!

Object methods

Think of methods as actions. For example, a method for the person object can be, greeting people.

This is how that it would look like in code:

const me = {
  // ...properties

  greet: function() {
    console.log('Hi there, my name is ' + this.fullName + '.');
  }
};

me.greet(); // Hi there, my name is Ruben Doe.

To create a method, you must create a property identifier name. In the example above, the property identifier name is greet.

Also try to make method names to sounds like verbs.

The next step is to attach a function to the property name, as a value type. I will cover functions in a later tutorial.

You can also create method with the ES6 fat arrow function style.

const me = {
  // ...properties

  greet: () => console.log('Hi there, my name is ' + me.fullName + '.'),
};

me.greet(); // Hi there, my name is Ruben Doe.

One thing to note is that I'm not using the keyword this and I'm referencing the object name like this me.fullName.

The keyword this

The keyword this behaves a little different in JavaScript from other traditional languages.

When we use the keyword this inside method that uses the function style syntax,this is set to the object the method is called on.

const obj = {
  foo: 1,
  bar: function() {
    return this;
  }
};

console.log(obj.bar()) // { foo: 1, bar: Function }

When we use the keyword this inside method that uses the arrow function, this retains the inner context of the function, also known as lexical scoping.

const a  = {
  foo: 1,
  bar: () => this.foo,
}

console.log(a.bar()); // undefined

Since the method a.bar() does not have a variable or a property name foo, that's why it's returning undefined.

Access methods

Take a look the object at the bottom. It has a couple methods, greet and changeName.

const person = {
  name: 'John Doe',
  greet: function() {
    console.log('Hi my name is ' + this.name);
  },
  changeName: function(newName) {
    this.name = newName;
  },
};

To access these methods in the object, you may use the period chaining style as such:

person.greet(); // Hi my name is John Doe
person.changeName('George');
person.greet(); // Hi my name is George