OOP Series #2 - Creating Classes and Objects in Javascript
In the last post of this series, we covered what objects and classes are. To recap, an object is a collection of related data and functions. A class is a blueprint that tells you what kind of attributes and methods an object has and creates objects according to the blueprint. So, a specific person (Stacy, in our example from the last post) is an object and "person" is a class.
In this post, we will look at the ways we can create objects and classes in Javascript.
Object Literal Syntax
An object literal is a set of keys and their values grouped by curly braces.
Let's look at how Stacy (the object) would look like as an object literal:
const Stacy = {
name: "Stacy",
address: "Los Angeles, California",
ssn: 1234,
hobbies: ["knits", "dances", "reads", "runs"],
eats: function () {
return `${this.name} is eating`
},
sleeps: function () {
return `${this.name} is sleeping`
},
wakesUp: function () {
return `${this.name} is waking up`
},
revealsHobbies: function () {
return `${this.name}'s hobbies are ${this.hobbies.join(", ")}`
},
}
We can access Stacy's attributes using the dot-notation or the bracket notation like this:
// dot-notation
console.log(Stacy.name)
console.log(Stacy.address)
// bracket-notation
console.log(Stacy["name"])
console.log(Stacy["address"])
And, we can run Stacy's methods like this:
console.log(Stacy.eats())
console.log(Stacy.revealsHobbies())
Note: Here, the this
keyword refers to the object Stacy. So, when we saythis.name
we are referring to the Stacy object we defined. Don't get too confused by this. I will go into this topic further in a later post.
Constructor
A constructor is a function that creates and initalizes an object. This is what a constructor would look like:
function Person(name, address, ssn, hobbies) {
this.name = name
this.address = address
this.ssn = ssn
this.hobbies = hobbies
return {
name: this.name,
address: this.address,
ssn: this.ssn,
hobbies: this.hobbies,
eats: function () {
return `${this.name} is eating`
},
sleeps: function () {
return `${this.name} is sleeping`
},
wakesUp: function () {
return `${this.name} is waking up`
},
revealsHobbies: function () {
return `${this.name}'s hobbies are ${this.hobbies.join(", ")}`
},
}
}
Here is how we would define Stacy using the constructor above:
const Stacy = new Person("Stacy", "Los Angeles, California", 1234, [
"knits",
"dances",
"reads",
"runs",
])
console.log(Stacy.hobbies)
// ["knits", "dances", "reads", "runs"]
console.log(Stacy.wakesUp())
// Stacy is waking up
Object.create
Object.create lets us create classes using a prototype. A prototype is a parent class whose methods and attributes are inherited by the child class.
const Person = {
wakesUp: function () {
return `${this.name} is waking up`
},
revealsHobbies: function () {
return `${this.name}'s hobbies are ${this.hobbies.join(", ")}`
},
}
let Stacy = Object.create(Person, {
name: {
value: "Stacy",
writable: true,
configurable: true,
enumerable: true,
},
hobbies: { value: ["knits", "dances", "reads", "runs"] },
})
console.log(Stacy.revealsHobbies())
// Stacy's hobbies are knits, dances, reads, runs
console.log(Stacy.wakesUp())
// Stacy is waking up
Here, notice how we can call the revealsHobbies()
method on the Stacy
object even though it's not defined on the Stacy
object? This is because we we using the Person
object as the parent or prototype of Stacy.
The Object.create method also lets us add additional properties to our Object.
ES6 Class
This is what we saw in the first post of this series. ES6 lets us define a class in a similar way to other languages.
class Person {
constructor(name, address, ssn, hobbies) {
this.name = name
this.address = address
this.hobbies = hobbies
}
eats() {
return `${this.name} is eating`
}
sleeps() {
return `${this.name} is sleeping`
}
revealsHobbies() {
return `${this.name}'s hobbies are ${this.hobbies.join(", ")}`
}
}
const Stacy = new Person("Stacy", "Los Angeles, California", [
"reading",
"dancing",
])
console.log(Stacy.eats())
// Stacy is eating
console.log(Stacy.revealsHobbies())
// Stacy's hobbies are rading, dancing
That's it, folks!
Thanks for sticking around! In this post, we covered the four common ways classes and objects can be created. Hope you found this post useful.