Today I kept going full steam ahead with JavaScript objects. It was awesome to have a small refresher after taking a break over the weekend, and also fun to learn some new concepts. One of the first was going over for/in loops again, which are pretty useful loops.
For / In Loops to print properties from the object.
var nyc = {
fullName: "New York City",
mayor: "Bill de Blasio",
population: 8000000,
borroughs: 5
};
for (var property in nyc) {
console.log(property);
}
var nyc = {
fullName: "New York City",
mayor: "Bill de Blasio",
population: 8000000,
borroughs: 5
};
for (var x in nyc) {
console.log(nyc[x]);
}
Above prints out the values of the properties.
Moving on to some more interesting concepts. Next I jumped into learning the beginning of Object Oriented Programming (OOP). Classes were the first up, which are created when you make a constructor. Essentially a class can be thought of as a type or a category of objects (kinda like how numbers/strings are types). That’s how Codecademy defines it at least. I’ve gone over the syntax for constructors already, but here’s another one for good measure.
function Person(name, age) {
this.name = name;
this.age = age;
var bob = new Person("Bob Smith", 30);
var susan = new Person("Susan Jordan", 35);
Both Bob and Susan belong to the Person class.
One of the most important concepts that I learned about today were JavaScript Prototypes. I had a tough time understanding Codecademy’s explanation out of the gate, so I jumped through a few blogs to help simplify it for me. I found this one to be the most helpful, and definitely recommend reading it. I’ll probably review it before finishing up the JavaScript tutorial on Codecademy for good measure.
So prototypes. It is clear that objects have keys and values. They also have one additional attribute: a pointer to another object. The way, I like to think of them are like parents and children (similar to HTML, but a bit more complex). You have the ability to point objects to one another and link them together so they inherit properties.
Here’s a quick chart that explained the concept really well for me.
The chart above shows a prototype chain (or allowing objects to inherit from more than one object), but you can even simplify that to just one child and one parent or one set of properties that are inherited. Let’s look at some code to see it in action.
//original classes
function Animal(name, numLegs) {
this.name = name;
this.numLegs = numLegs;
this.isAlive = true;
function Penguin(name) {
this.name = name;
this.numLegs = 2;
}
function Emperor(name) {
this.name = name;
this.saying = "Waddle waddle";
}
//setup the prototype chain
Penguin.prototype = new Animal();
Emperor.prototype = new Penguin();
//create object + variables
var myEmperor = new Emperor("Jules");
//see inheritance in action
console.log("myEmperor.saying"); //Outputs "Waddle waddle"
console.log("myEmperor.numLegs); //Outputs 2
console.log(myEmperor.isAlive); //Outputs true
As you can see above, it’s as simple as creating a few classes and linking them together via the .prototype and setting it equal to the class that you want it to inherit properties from.
Lastly, I jumped through some privacy stuff. This include public/private methods and variables. The concepts were essentially the same and have to do with how you declare the variable or method. Here are a couple examples
Public Variables
function Person(first, last, age) {
this.firstName = first;
this.lastName = last;
this.age = age;
Private Variables in objects work similarly to private variables in objects. Instead of using this (which is a public variable, you can declare it with var to make it private. This makes it somewhat inaccessible from outside of the class.
function Person(first, last, age) {
this.firstName = first;
this.lastName = last;
this.age = age;
var bankBalance = 7500;
};
It is possible to get around this all though by declaring a Public Method within the class. See code below.
function Person(first, last, age) {
this.firstName = first;
this.lastName = last;
this.age = age;
var bankBalance = 7500;
this.getBalance = function {
return bankBalance;
};
}
var john = new Person("John", "Smith", 30);
var myBalance = john.getBalance();
console.log(myBalance);
You can see above that a public method can be called by a variable (after creating a new Person object) and then printed to the console.
Private Methods as you could have guessed work very similarly to private variables.
function Person(first, last, age) {
this.firstName = first;
this.lastName = last;
this.age = age;
var bankBalance = 7500;
var returnBalance = function {
return bankBalance;
};
//create new function
this.askTeller = function {
return returnBalance;
};
}
As you can see above the returnBalance method is private, while the this.askTeller is public. It’s really as simple as declaring the method using var/this.
So that’s all for today. I’m still slogging my way through the Codecademy JavaScript track, and hopefully will finish tomorrow. I’m trying my best to absorb the material so that may be why it’s a bit slow going. Either that or I need to work harder haha. I’ll check back in tomorrow.
Oh, and big wins by Ohio State and Stanford this weekend. Go Buckeyes and Cardinal!