An object is used to store a collection of data types, and also functions which are known as methods in objects.
Rea life object
Methods
Keyword "this"
Access methods
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!
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
.
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
.
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