What are Objects?
Some objects like a paperweight don't do much:
They just sit there. Other objects, like a television, go above and beyond the call of mere existence and do a lot of things:
A typical television takes input, allows you to turn it on or off, change the channel, adjust the volume, and do all sorts of television-y things.
The thing to realize is that objects come in different shapes, sizes, and usefulness. Despite the variations, objects are all the same at a high-level. They are an abstraction. They provide an easy way for you to use them without having to worry about what goes on under the covers. Even the simplest objects hide a certain level of complexity that you simply don't have to worry about.
For example, it doesn't matter what goes on inside your TV, how the wires are connected, or what type of glue is used to hold everything together. Those are unnecessary details. All that you care about is that the TV does what it is told. When you want it to change the channel, the channel should change. When you adjust the volume, the volume should adjust. Everything else is just noise.
Basically, think of an object as a black box. There are some predefined / documented things it does. How it does them is something you can't easily see. How it does its magic is also something you don't really care about as long as it works. We'll change that notion later when we learn to actually create the insides of an object, but let's relish this simple and happy world for now.
Let's shine some more light on the various things you will be doing with objects...starting with the creation side of things!
Basically you have a parent object, and you create child objects from it. The parent is not anything special like it might be in other languages. It is just an object that can do all sorts of object-y things with.
You create objects using the very appropriately named Object.create function (aka a method) and passing in the name of the object you want to create your new object from. Let's assume the name of our parent object is going to be called theCircle.
Below is an example of what creating a new object called greenCircle based on the theCircle object looks like:
var greenCircle = Object.create(theCircle);
Creating objects is only part of the fun. Changing things on the objects is funner-er. Let's look at that next.
Setting and Reading Properties
Here is an example of our theCircle object with some properties defined on it:
A property is nothing more than a name associated with a value. The properties defined on our theCircle object are color, size, outline, and bounce. Right now, no values have been defined, and a property is only as valuable as the value (ha!) it stores. Let's fix that.
var greenCircle = Object.create(theCircle); greenCircle.color = "#669900";
Notice that I set the color property on our greenCircle object to a green value of #669900. Another way of setting the property is by using a bracket syntax. It's easier to show you first before explaining it, so here is an example of the same color property being set using this approach:
var greenCircle = Object.create(theCircle); greenCircle["color"] = "#669900";
The end result is that the color property gets set on the greenCircle object. Whichever approach you use, you'll be just fine.
To read a property's value, simply access it via the same dot or bracket notation you used for actually setting the property value:
var greenCircle = Object.create(theCircle); greenCircle.color = "#669900"; // display the color alert(greenCircle.color); // alert(greenCircle["color"]);
This is all pretty straightforward, as you can see. In fact, everything you've seen so far from creating an object to setting properties shouldn't be too complicated. Before we wrap things up with our theCircle object, let's look at just one more case!
Creating Many Objects
Objects not only abstract details, they are also pretty self-contained. You can have many objects of the same type in close proximity with each other, and they will all behave and play nicely. For example, let's say you have some code that looks as follows:
var greenCircle = Object.create(theCircle); greenCircle.color = "#669900"; greenCircle.size = 150; var pinkCircle = Object.create(theCircle); pinkCircle.color = "#FF0066"; pinkCircle.size = 100; var yellowCircle = Object.create(theCircle); yellowCircle.color = "#FFCC00"; yellowCircle.size = 75;
In this code, we are creating three objects based on the theCircle object with each one having a different color and size. If you had to visualize the end result, it would look as follows:
This ability for objects to be self-contained mini-applications of their own is something you will rely on as you get deeper into building larger things.
Putting it All Together: Meet the String
Let's say you have some code that looks as follows:
var someText = "hello, world!"; alert(someText);
What you have is a variable called someText, and its value is set to hello, world! If you run this code, you will see hello, world! displayed in a dialog:
If this all looks a bit familiar, it should! This is just a slight variation to what you saw in the variables tutorial earlier.
Now, here is the thing. The someText variable isn't an object in its current state. This makes up a handful of data types you will find that are primitive (aka in their most simple, non-object form) in their natural environment. The moment you try to access properties on them, these data types suddenly become full blown objects. The end result is the same as working with any normal object, so I won't make fun of this behavior too much.
What this means is pretty simple and significant (aka simplificant). Like I mentioned earlier, the Object.create approach isn't the only way to create a new object. Yes, major spoiler alert. To give you a preview of something you'll be learning later, a String object can be created in the following ways - all of which result in sort of the same thing:
var someText; someText = "hello, world!"; someText = new String("hello, world!"); // phew! someText = String("hello, world!");
The end result is a String object in the second and third examples. The first example results in a string primitive that gets converted into a String object the moment you try to access properties on it. As someone British (with a hint of Canadiana) might say, "Sneaky little bugger, eh?"
Don't worry if all this doesn't make sense yet. Just know that you can access the String properties on all three of these approaches. The subtle (and not-so-subtle) differences among these three is something I will elaborate on in the future.
The String object contains a boatload of properties and methods. Some common ones include:
We'll look at the String object in greater detail later, but for now let's focus on using a handful of properties so that we get a better feel for working with a real (and very complex) object without worrying about the behind the scenes details.
Meet the length Property
A great property to start our exploration off with is the length property. What the length property does is pretty simple. It tells you how many characters make up your string.
To get the length of our someText object, all you have to do is the following:
var someText = "hello, world!"; alert(someText.length);
When you run this script, notice that you will see the number 13 displayed:
Because I've repeated the primitive-to-object conversion that happens when you call String-like properties on our text, there should be no surprises here. The length property works as advertised.
Let's do one more thing before we call it a night...or day depending on when you are reading this!
Calling Functions (ahem...Methods)
Like I mentioned earlier, the property values for an object can be anything...such as a function. An example of a property whose value is a function is the String object's toUpperCase property. When you call toUpperCase on some text, that text becomes fully capitalized:
var someText = "hello, world!"; alert(someText.toUpperCase());
Notice how I am calling toUpperCase. Because it is a function that takes no arguments, I just call it using the empty parenthesis following it. Now, here is a terminology change that you need to be aware of. Because toUpperCase is a function that is used as a property inside an object, it now has a new name. That new name is method. Many people use the function and method terminology interchangeably, so just be aware of that. They both mean the same thing. It is just that one very obviously lives off an object and the other one doesn't.
Since we are already here, if you have a method that takes arguments, simply specify the arguments for them like you would for any plain ol' function. A great example of a method that takes an argument is the String object's charAt! The charAt method takes a number as an argument, and that number corresponds to the index position of a character in your text.
Below is a diagram showing the index positions of all the characters in our hello, world! text:
Here is how you would use the charAt method on someText to figure out the character in the tenth position:
var someText = "hello, world!"; alert(someText.charAt(9));
Because the counting of character positions starts at 0, the tenth position is actually represented by a 9. As you can see from the earlier diagram, what you should see is the r character getting returned:
At this point, you just got a whirlwind tour of how to work with objects by using the String as a guinea pig for our (very humane!) experiments. Let's do the boring closing remarks next.
If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!
THE KIRUPA NEWSLETTER
Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!
( View past issues for an idea of what you've been missing out on all this time! )