Getting Good with JavaScript - Andrew Burgess [4]
Objects are one of JavaScript's most powerful features. Think of an object as a wrapper for a bunch of primitive or reference values. Here's an example:
var obj = {
name : "Andrew",
age : 20,
awake : true,
company : {
name : "XYZ Ltd.",
id : 12345
}
};
An object is delimited by curly braces; inside the object, we have a list of key-value pairs. A key-value pair is just what it sounds like: a pair of values, one of which is the key that points to another. If I wanted to get my name out of this object, I'd ask the object for it's name property—that's what we call the value in a key-value pair. Also notice that each pair, except for the last one, ends with a comma; that's important. What's not important is the spacing; I've added some extra spacing here to make our object pretty, but I could have jammed it all on one line, sans any spacing, and it would be the same.
As you can see, any type of value can be a property of an object. I've stuffed a string, a number, a Boolean, and even another object in there. You can access properties in two ways: either the dot notation or the square bracket notation, as showcased below:
Example 2.4
var obj = { name : "Joe", age : 10 };
alert( obj.name ); // "Joe"
alert( obj["age"] ) ; // 10
Creating custom objects like this will be important for your JavaScript applications. It allows you to make your own custom values that aren't built into JavaScript. Need a Person object? No problem. Or what about a tabbed container? JavaScript objects have you covered. We'll come back to custom objects in the next chapter, when we dive ankle-deep into the dirty waters of object-oriented programming.
A final note about objects: you don't need to put all the properties you want them to have in them right away; you can add them later. We'll see more about this later.
Array
Most programming languages have arrays, which are a great way to hold bunches of data. They're very similar to objects, but without the keys.
["Buy milk", "Feed cat", "Pick up dry cleaning", "Deposit Cheque"]
An array is delimited by brackets and each value is separated by a comma. Of course, you aren't limited to strings, as I've used here. Also, you don't have to use only values of the same type in a single array.
["string", 20, false, null, { "id" : 8888 }]
If you've like to access an item from an array, you can use square bracket notation. You would do this to access the first item in the array:
Example 2.5
var arr = ["string", 20, false];
alert( arr[0] ); // "string"
Array item indices are zero-based, which means the first item is 0, the second is 1, and so on.
Date
So far, all the values we've looked at have been literal; this means that we haven't used any "real" code to give the JavaScript interpreter our values; we've just inputted the raw string, number, Boolean, or whatever. The Date value is the first value we'll look at that can't be created that way.
ROCKSTAR TIP
Actually, we can create all the primitive types in a way similar to this, but I'm not going to teach you that, because there's never a good reason to do so.
So, to make a JavaScript Date object, you'll do this:
new Date()
This introduces some new syntax, so let's go over that first. The new keyword simply means we want to create a new object; in this case, that's a date object. Date, in this case, is the name of a function. We'll discuss functions in the next chapter, but they're basically wrappers for related lines of code. You call a function—that means run the code inside it—by placing parentheses after the function name.
What you see above will give you a new date object that holds the date and time you created that object … right down to the millisecond. If you want to create a date object for a specific date or time, you'll have to pass in the right parameters. Parameters? Well, if you want a function to use values outside itself, you have to give them to it. To do so, just put them between those parenthesis