Day 196: Treehouse, JavaScript Objects Course, Constructor Functions, Prototypes, Prototype Chains, Inheritance, and Making a Plan

It's Sunday morning, and as usual for most days in Austin, TX, the weather is great.  Today I'm continuing with the Treehouse course on JavaScript objects.

I'm advancing quite a bit in my studies this week, and with my 7 days, 12 hour plus challenge, I'm on track to hit 88 to 90 hours of studying this week, all tracked on RescueTime, which would make it my most productive week ever.  So I'm thinking the next step is to really solidify my skills by completing the Free Code Camp front end projects, or at least most of them, and also by completing several more projects based on the things I've learned on Team Treehouse.  Then, I can transfer those projects to be viewable on GitHub.  Once I've done that, I need to design and deploy my actual portfolio site, in which I plan on using flat design.  The next step would be to switch the settings on both my Team Treehouse and GitHub account to show that I am looking for work as a Front End Developer, and then simply focusing on leveling up my skill-set.  My main focus right now is learning and applying my learning to projects, and if a taking a position as a front end dev can help me with that focus, and I believe it can, then that's fantastic.

The caveat to all of this is that I'll be enrolling at The Coding Boot Camp at UT Austin on April 19th, and I plan on excelling in it.  That means that even if I take a front end position now, which I may very well decide not to pursue depending on the totality of any potential offers, I still plan to be a full stack developer by the time I graduate from the boot camp in October.  I also in no way plan on the boot camp being my only source for back end learning, as my other learning sources, among them Free Code Camp, Team Treehouse, and Udemy, also have have coursework in that area of study, which I intend to make full use of.  

As I consider various offers that come in, I have to keep in mind all these variables, so as to plot out a career path that is a great fit.  At the moment, I'm thinking I want to be a full stack dev with a focus on the front end, but as I start learning the back end, this may change if I become enamored with it for one reason or another.  In sum, the future is wide open and bursting with opportunities for personal and professional growth.

I feel like things are coming together, and I'm really proud of myself for staying focused on this path, although to be honest, the fact that I enjoy both the theory and the practice of web development has made the whole journey exponentially more rewarding than it would be otherwise.  

I love this.

All right, let's get on with today's activities.  I'm going over constructor functions now.  Here's an example:

function Contact(name, email) {

  this.name = name;
  this.email = email;

}

I went over these in Mark Myers' book, "A Smarter Way to Learn JavaScript."  Here's how we create a new contact instance (an instance is a specific realization of a particular type or object):

var contact = new Contact("Andrew", "andrew@teamtreehouse.com");

var contact = new Contact("Jane", "jane@teamtreehouse.com");

Note the use of the keyword "new" and the capitalization of the constructor function's name.

Note that constructor functions are like other functions in that their lines end with semicolons, as opposed to objects, where lines end in commas.  Also note that we use equals signs instead of colons, like in a function as opposed to an object.  Check out my dice constructor function!

function Dice(sides) {
  this.sides = sides; 
  this.roll = function () {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return randomNumber;
  }
}

var dice6 = new Dice(6);
var dice10 = new Dice(10);
var dice20 = new Dice(20);

dice6.roll();
dice10.roll();

dice20.roll();

The last three are how you can call the various dice.  This is a better way to do that:

function diceRoll() {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return randomNumber;
  }

function Dice(sides) {
  this.sides = sides; 
  this.roll = diceRoll;
}

var dice6 = new Dice(6);
var dice10 = new Dice(10);
var dice20 = new Dice(20);


dice6.roll();

The reason is because the other way, every time we call the dice6.roll(), a new function is created in the this.roll property, whereas if we do it the second way, the this.roll property calls a function already created outside of it, saving memory. 

The issue with doing things the second way, then is that we have a function floating around not connected (not literally typed within, although it is connected) to the constructor function, and it's then hard to keep track of which external function works with what method call.  JavaScript provides a way to organize our code with constructor functions, and that's with a special property called prototype.  The prototype on a constructor function is an object like an object literal, and it can be added to, like this (using the previous example):

Dice.prototype.roll

And we can assign a function to it, like so:


function Dice(sides) {
  this.sides;
}

Dice.prototype.roll = function () {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return randomNumber;
  }

var dice6 = new Dice(6);
var dice10 = new Dice(10);

Now, when we do:

console.log(dice6.roll === dice10.roll);

We get true, where as before, the output would be false!  Haha!   Fantastic!  Here's the old example if you want to see the false output:

function Dice(sides) {
  this.sides = sides; 
  this.roll = function diceRoll() {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return randomNumber;
  }
}

var dice6 = new Dice(6);
var dice10 = new Dice(10);
var dice20 = new Dice(20);


dice6.roll();

console.log(dice6.roll === dice10.roll);

And then here's the in between example, which yields true, but is difficult to keep track of:

function diceRoll() {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return randomNumber;
  }

function Dice(sides) {
  this.sides = sides; 
  this.roll = diceRoll;
}

var dice6 = new Dice(6);
var dice10 = new Dice(10);

var dice20 = new Dice(20);

console.log(dice6.roll === dice10.roll);

Very, very cool stuff!  In the "Object-Oriented JavaScript" course, I'm going over and over one video, which is in the second section of the course, "Constructor Functions and Prototypes."  The video's title is "Methods with Prototypes," and I just thought I'd note the title in case I ever want to go back to it.  The instructor, Mr. Chalkley, is really growing on me, he's able to focus intensely and really convey what needs to be conveyed, it's great seeing him in action.  Here's how the prototype example works, from Treehouse:

"JavaScript is known as a prototypal programming language.  Meaning, you can use prototypes as templates for objects.  For values and behavior to be shared between instances of objects.  So instead of the roll method being defined for every instance, when we construct one, it is shared between all instances through the template or prototype.  So what happens when we call dice.row now?  Well there's where the JavaScript interpreter tries to call it on the object itself.  If it's not there, it will check its prototype.  If the roll is there, it will call the method in the context of that instance." 

Here's the version referred to in the paragraph above, the ideal version, so we can follow the code along with the text:

function Dice(sides) {
  this.sides;
}

Dice.prototype.roll = function () {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return randomNumber;
  }

var dice6 = new Dice(6);
var dice10 = new Dice(10);

console.log(dice6.roll === dice10.roll);  // That logs true!  

That's great.

Here's another example, the original object:

function Monster(name) {
  this.name = name;
  this.health = 100;
  this.takeDamage = function (){
    this.health--;
  }

}

And the new and improved version setting the method via the use of a prototype:

function Monster(name) {
  this.name = name;
  this.health = 100;
}

Monster.prototype.takeDamage = function (){
    this.health--;

}

So far so good.  In this code:

function Animal(breed, noise) {
    this.breed = breed;
    this.noise = noise;
}

 Animal.prototype.makeNoise = function() {
        console.log(this.noise + ", " + this.noise);
}

var chicken = new Animal("Old English Pheasant fowl", "Cluck");

You would make the chicken go "Cluck" by using this code:chicken.makeNoise();Remember that we put the function in a prototype to prevent performance issues, and then once we want to call it, according to the question, we simply call it like we normally would.

Note that when attaching JavaScript scripts at the bottom of the page, attach them in the order you want the scripts to run, but preferably, all your JavaScript is in one file.  

I'm learning about prototype chain and inheritance now.  If we have this Person object:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.fullName = function() {
 return this.firstName + " " + this.lastName; 

};

And this Teacher object:

function Teacher(firstName, lastName, roomNumber) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.room = roomNumber;

}

And we want to modify the Teacher object to inherit from the Person object, we would, in the Teacher constructor function, call the Person constructor, using the call method, and pass in the common attributes, like so:

function Teacher(firstName, lastName, roomNumber) {
  this.room = roomNumber;
  Person.call(this, firstName, lastName)

}

Now to set up the prototype chain for the Teacher prototype to inherit from the Person prototype, we do this:

function Teacher(firstName, lastName, roomNumber) {
  this.room = roomNumber;
  Person.call(this, firstName, lastName)
}


Teacher.prototype = Object.create(Person.prototype);

I'm still a little hazy on all of this, but so far so good.    

I'm working on a quiz project using objects, and I'm going to work on it and on other object-oriented javaScript projects, over and over until I nail this area down.  I see how this kind of programming can make for some very useful code, and I want to take full advantage of it.  That will take a lot of focused effort, and that sounds great to me.

I was a bit tired today and I only studied 10.5 hours.  That said, I completed the Front End Web Development Track on Team Treehouse!

Great day!

SUMMARY OF CODING SKILLS 

Total Treehouse Points: 12,051 (miscellaneous not included) 

HTML:                             2,009 

CSS:                                3,378 

Design:                            1,193 

Development Tools:         1,344

JavaScript:                      3,264

Treehouse (and other) Courses Completed:
How to Make a Website
HTML
HTML Forms
HTML Tables
HTML Video and Audio
CSS Foundations
CSS Basics
CSS Layout Techniques
CSS Layout Basics
CSS Selectors
Responsive Layouts
CSS Flexbox Layout
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% done, switched focus from design to web dev)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics
AJAX Basics
JQuery Basics
HTML and CSS (Codecademy) 
Introduction to Web Dev (The Odin Project)
Web Dev 101 (The Odin Project, 33% done, switched to FCC for larger community)

Books Read or in Progress:                                                                     Status
"Head First HTML and CSS," by E. Robson & E. Freeman                           Complete

"A Smarter Way to Learn JavaScript," by Mark Myers                               Complete

"HTML and CSS," by Jon Duckett                                                             Complete

"JavaScript and JQuery," by Jon Duckett                                                 Complete

Free Code Camp (FCC)                                                                            Status

1. Get Started with Free Code Camp                                                      Complete

2. HTML5 and CSS                                                                                  Complete

3. Responsive Design with Bootstrap                                                       Complete

4. Gear up for Success                                                                           Complete
5. jQuery                                                                                              Complete
6. Basic JavaScript                                                                                 Complete
7. Object Oriented and Functional Programming                                     Complete
8. Basic Algorithm Scripting                                                                   Complete
9. Basic Front End Development Projects                                                Complete

10. JSON API's and Ajax                                                                          Complete
11. Intermediate Algorithm Scripting                                                      Complete

12. Intermediate Front End Development Projects                                   On 3 of 6

13. Claim Your Front End Development Certificate

14. Advanced Algorithm Scripting
15. Automated Testing and Debugging
16. Git
17. Node.js and Express.js
18. MongoDB
19. API Projects

20. Dynamic Web Application Projects

21. Claim Your Back End Development Certificate

The Coding Boot Camp at UT Austin                                             Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery) 

Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX)

Week 11-14: Server Side (Node.js, MySQL, MongoDB)

Week 15-18: PHP (WordPress, CodeIgniter, Laravel) 

Week 18-21: Full Stack Coding
Week 22-24: Final Project

CodePen: http://codepen.io/Adancode/

GitHub: https://github.com/Adancode

LinkedIn: https://www.linkedin.com/in/adamcamacho1
Team Treehouse: https://teamtreehouse.com/adamcamacho
Free Code Camp: http://www.freecodecamp.com/adancode

Hours Spent Coding Today: 10.5

Total Hours Coding: 1014