Object Basics
We've already seen a couple examples of creating basic JavaScript objects in our previous demos. We can start our objects as empty or with prepopulated properties using the curly brace syntax. Below are examples of creating an empty object, an object with a single property, or an object with multiple properties.
var dog = {};
var dog = {name:"Fido"};
var dog = {name:"Fido", breed:"Dalmation"};
It's important to remember that when creating multiple key:value pairs in your JavaScript object, that you separate them using a comma. We can also add new properties to our object after it has been created using two different techniques:
dog.color = "Brown";
dog["color"] = "Brown";
Likewise, we can read properties from our object using two different techniques:
var dogColor = dog.color;
var dogColor = dog["color"];
In addition to properties, objects can also have methods (functions that are contained by the object). The object below has a method called "getBMI" which takes the object property for weight and divides it by the object property for height and returns that value to where the method gets called.
var dog = {
name: "Fido",
breed: "Dalmation",
weight: "55",
height: "23",
getBMI: function(){
return this.weight / this.height^2;
}
};
var dogBMI = dog.getBMI();
console.log(dogBMI); // this outputs the value 0.10396975425
You will notice that spaces and line breaks within the object do not have an impact on its functionality. We have been using the "this" keyword with a lot of our early JavaScript and jQuery code, and that always refers to an object. When "this" is used inside of an object method, it is referring to the specific instance of that object.
As we saw in week 11, we can use
for() to iterate over the properties of an object. This is using the for/in syntax instead of for/of. What gets returned is the key (or name of the property) contained within the object. This is used to access the value from the object in an associative way (ie: by name of the property rather than numeric index).
var dog = {name:"Fido", breed:"Dalmation", age:4, weight:55};
for(var x in dog){
console.log(dog[x]);
}
Arrays of Objects
Previously we have used the parallel arrays technique to be able to associate multiple properties with a single data entry. The alternative, and preferred technique, would be to store all of the various properties inside of a single object instance, and then have a single array that contains multiple instances of the object with different values. Below is an array with multiple dog objects being added to it.
var dogs = [];
dogs.push({name:"Fido", breed:"Dalmation", age:4, weight:55});
dogs.push({name:"Wishbone", breed:"Jack Russel Terrier", age:7, weight:32});
dogs.push({name:"Stella", breed:"McNab", age:12, weight:45});
dogs.push({name:"Scooby", breed:"Great Dane", age:8, weight:124});
dogs.push({name:"Lassie", breed:"Rough Collie", age:15, weight:53});
In order to loop over this array of objects, we can use the for/of technique.
for(var d of dogs){
console.log(d.name);
}
The resulting output in the console will appear like this:
Fido
Wishbone
Stella
Scooby
Lassie
Sorting Arrays
Since our previous use of arrays was utilizing the parallel arrays technique, we didn't want to sort them as that would cause them to no longer be parallel and we would lose the association between values across our arrays. Let's look at how sorting works first on basic arrays using the
sort() method.
var dogNames = ["Fido", "Wishbone", "Stella", "Scooby", "Lassie"];
dogNames.sort();
for(var name of dogNames){
console.log(name);
}
The default behavior of the
sort() method is to put array elements in ascending alphabetical order. The resulting output in the console will appear like this:
Fido
Lassie
Scooby
Stella
Wishbone
If we want to switch the order so that it is descending aphabetically, then we can use the
array.reverse() method.
Wishbone
Stella
Scooby
Lassie
Fido
What if we had an array of numbers, such as the weight of the dogs from above.
var dogWeights = [55, 32, 45, 124, 53];
dogWeights.sort();
for(var weight of dogWeights){
console.log(weight);
}
The resulting output in the console may be unexpected, as even though this array is populated with nothing but numbers, it still is going to treat the numbers as alphanumeric characters:
In order to ensure that we are sorting numerically, we need to make a compare function that we can provide to the
sort() method as an argument.
function numSort(a, b){
return a - b;
}
var dogWeights = [55, 32, 45, 124, 53];
dogWeights.sort(numSort);
for(var weight of dogWeights){
console.log(weight);
}
This time the order of the numbers comes out as we would expect:
Sorting Arrays of Objects by Property
Just like how we need to make a compare function to make it clear to the
sort() method to sort by numbers, we can make compare functions to ensure that we are sorting based on specific properties that each object instance in the array contains. Let's try doing an alphabetical sort by dog name first.
var dogs = [];
dogs.push({name:"Fido", breed:"Dalmation", age:4, weight:55});
dogs.push({name:"Wishbone", breed:"Jack Russel Terrier", age:7, weight:32});
dogs.push({name:"Stella", breed:"McNab", age:12, weight:45});
dogs.push({name:"Scooby", breed:"Great Dane", age:8, weight:124});
dogs.push({name:"Lassie", breed:"Rough Collie", age:15, weight:53});
function nameSort(a, b){
var x = a.name.toLowerCase();
var y = b.name.toLowerCase();
if(x < y){
return -1;
} else if(x > y){
return 1;
}
return 0;
}
dogs.sort(nameSort);
for(var d of dogs){
console.log(d.name);
}
Sorting by a numeric property is even easier. Let's try sorting the same array of objects by the weight property.
function weightSort(a, b){
return a.weight - b.weight;
}
dogs.sort(weightSort);
for(var d of dogs){
console.log(d.weight);
}
Our array of objects is now sorted by weight and the output in the console appears as below: