JavaScript Objects

While arrays have a great many strengths and allow us to traverse long sequences of information quickly, they do suffer from a few key drawbacks.

If you want to find a single piece of information within an array you can do one of two things; you can either search for the actual value itself or else you can get the value of a position via the count of that position within the array. In the case of searching for the value you can, obviously, only do that if you already have the value. In the case of getting a value by position you can only do this for as long as you know what position the required information is in. Let's look at a practical example.

Let's say you want to keep information describing a single object within an easy to find variable. Let's say this array describes a dog. You might make it so that the first value is the breed, the second is the color, the third is the weight, and so on. If you never change this list then you can always get the weight by checking the third position within the array list. But what if you add information? What if you add to the list so that it describes name, breed, color, sex, and then weight? What was position "2" before now describes a completely different piece of information.

In JavaScript we can use what are called "Objects" to help organize our information more. With "Objects" we can add labels that can be search for and associate information with. If you are coming from another language this can be extremely awkward for two reasons (which you should still be aware of even if you are just a JavaScript developer).

In most languages the idea of an "object" is less exact. It refers to the way different pieces of code like variables, functions, and classes can act as "objects" which can be copied, referenced, and replaced. In JavaScript in particular it refers to a SPECIFIC kind of variable with a rigid syntax format.

Furthermore what is considered an "object" is JavaScript is really just akin to a "dictionary" in other languages. It is not a universal data type but if you've worked with C# or "maps" in C++ you'll understand the concept. Why either of those more descriptive terms are not used in JavaScript is a question none of us will find the answer to in this life.

With that in mind, let's look at how Objects are created an modified within JavaScript.

Creating Objects

Creating objects in JavaScript is extremely similar to the way one would create an Array. Just remember that for each value you will be establishing a kind of "key" (called a "property") as well. This "key / value" pairing is required for all entries within the object. The key and value are separated by a colon and each pair is separated by a comma (as in an array).

For the code below, note how the same code is written twice, just in a different way. This is simply to show that both ways are acceptable and you may choose which style to use to make it readable for your own sake.


<script>

var dog = { breed:"collie", color:"blue", weight: 10 };

var dog = { breed:"collie", 
            color:"blue", 
            weight: 10 };

</script>

As you can see creating Objects is just as easy as creating an array and very similar it at that. Just remember to use curly brackets instead of square brackets (though unlike functions which also use curly brackets, Objects SHOULD end with a semi-colon just as regular variables should).

Adding new entries

Adding new entries to a pre-existing object is actually slightly easier than adding a new entry to an Array. You don't need to use any inherent method like "push", you simply define that value with a new query, making sure to make use of the assignment sign "=".


<script>

var dog = { breed:"collie", color:"blue", weight: 10 };

var dog = { breed:"collie", 
            color:"blue", 
            weight: 10 };

dog.name = "geoduck";

console.log( dog );

/*
The above console.log returns the following line...

Object {breed: "collie", color: "blue", weight: 10, name: "geoduck"}
*/

</script>

Note how the new entry is automatically added to the end of the Object list. Unlike Arrays the information within Objects should not be considered order dependent for any given operation. Their whole purpose is that you use a specific word to call upon a value that is searched for you by the computer.

As such there's no great need to insert new entries before pre-existing entries in the list.

The same above format can be used to reassign values for a specific key. For instance if you wanted to replace value of the "color" property with a value of "brown" then you would simply write...


dog.color = "brown";

Parsing Objects

Unlike arrays where we would access an entry position in an array with a line like "array_name[n]" we can access Objects more directly. To access an entry you write a line similar to the way you assign a new entry, just without the actual assignment symbol or new value.


<script>

var dog = { breed:"collie", 
            color:"blue", 
            weight: 10 };

console.log( dog.breed );       // Returns "collie"
console.log( dog.color );       // Returns "blue"
console.log( dog.weight );      // Returns "10"

</script>

In the code above we've called a specific entry from the Object "dog" within our console.log method by simply writing "dog.breed". The name of the Object, followed by the label of the property (and separated by a period), is all that is required to have the value associated with that key returned to you.