In this article, I will be explaining JavaScript objects, properties, and methods. We’ll be building the awesome Infinity Gauntlet worn by Thanos using JavaScript Objects. What more cool way to explain than talking about the infinity gauntlet?
Recently I watched Avengers Infinity Wars, and I must say, I was totally blown away with Thanos. He is such a badass.
He is a purple alien just the size of Hulk, but much more calm and clever. He beat the crap out of Hulk without even using the infinity stone!
If you haven’t seen the movie yet, you should definitely watch it for Thanos (played by Josh Brolin, who also played Cable in Deadpool 2 and young agent K, in Men in Black 3)
Okay enough of movies, we’ll be using JavaScript objects to build his mighty gauntlet. If you are still struggling with objects, I would suggest you have a look at my other article JavaScript Objects Quickly Explained for a quick refresher.
Properties and Methods
You must have heard these two words thrown away every now and then. What if I told you these are just another fancy word for Data and Functions?
Let’s create our Infinity Gauntlet as a JS object:
const infinityGauntlet = {}
The gauntlet holds 6 infinity stones, which power it.
Let’s give an item into the object:
const infinityGauntlet = {
powerStone: 'Controls all of the power in the universe. It can be used to augment or inhibit any force.'
}
So I now have a property called powerStone with a text/String value.
If I type in infinityGaunlet.powerStone in the dev tools, I will see the result like this:
Thanos using the power and reality stones
This is called a property. A property can be anything, a text, number, boolean, or even another object.
In JavaScript, we type object.nameOfTheProperty to access the value of a property.
Objects can also have functions. In object land, functions are called methods.
Remember,
Property is for storing data about the object.
Method is the action, it does something for the object.
Let’s create a function which will use the power of that stone.
We can write a function like this:
const infinityGauntlet = {
powerStone: 'purple',
usePowerStone: function() {
return 'Using super strength to crush the moon and throw it over to the Avengers!!';
}
}
In ES6 we can simplify how we write the methods.
So instead of this:
usePowerStone: function() {
return 'Using super strength to crush the moon and throw it over to the Avengers!!';
}
We can simply write this:
usePowerStone() {
return 'Using super strength to crush the moon and throw it over to the Avengers!!';
}
If I type in infinityGauntlet.usePowerStone() we will get the result:
Thanos crushing a moon
You have to type object.methodName() to run a method that sits inside an object.
So the Infinity Gauntlet is a yellow glove. It does not come with the stones. You have to collect these stones one by one.
Since we have 6 stones and all of them will have info, and can perform some action, why not put these six stones as their own objects. (Hint: you can add objects as properties) That way it will be easier to manage:
const infinityGauntlet = {
powerStone: {},
spaceStone: {},
realityStone: {},
mindStone: {},
soulStone: {},
timeStone: {}
}
For simplicity sake, let’s work with one stone:
Having each stone gives you a special power. So this means you can only use a power, when you have that stone.
Let’s create a new property to hold the stone. We can make it a boolean value.
const infinityGauntlet = {
spaceStone: {
equipped: false
}
}
I created a new property called equipped with false means it doesn’t have the stone.
Let’s create an info property which stores some info about that stone:
spaceStone: {
equipped: false,
info: 'Limitless manipulation of space, allowing for teleportation, dimensional manipulation, creation of wormholes, etc.'
}
Finally, let’s create a method so we can use the stone:
use() {
return 'Do something';
}
But we need to check if we have the stone equipped!
So I can do this:
use() {
if(this.equipped) {
return 'Create a wormhole and transport from planet Titan to Wakanda in a minute!';
} else {
return 'No space stone!'
}
}
The this.equipped will check if its own property equipped has the stone or not. If we have a stone, then we will invoke the power, else it will not work.
The complete code so far looks like this:
So now when we don’t have the stone, (false) it will output this:
But when we collect the stone (true) it will output this success message:
I will now go ahead and complete all the other stones, since all have identical properties and methods:
Other than the 6 objects for the gauntlet, I also gave it one extra method of snapFinger
When you possess all the six infinity stones, you can then snap your finger for much bigger chaos.
snapFinger() {
if(this.powerStone.equipped &&
this.spaceStone.equipped &&
this.realityStone.equipped &&
this.mindStone.equipped &&
this.soulStone.equipped &&
this.timeStone.equipped) {
return 'Destroyed half of the population in the universe!'
} else {
return 'You need all the stones to perform this action!'
}
}
It will only activate when all the stones are present. So I just use the && AND operator to check if the gauntlet has all the stones equipped.
So that’s about it for this article. Can you expand the gauntlet with more cool features? Feel free to do so and let me know!!
Found this post helpful? Please give it a CLAP!
Want to read more about JavaScript and Node JS? Check out my blog >> TamalWeb.com