• We've talked a lot of objects in JavaScript, and you've probably heard me say "Everything in JS is an object! (almost)" and thought, "...huh?"
  • Time to answer those questions!
  • To understand what I mean when I say (almost) everything is an object, we have to understand a bit more about JavaScript as compared to other languages.
  • The saying comes from the fact that JS uses prototype-based inheritance rather than class-based (we'll get there, don't worry!) This means that everything we create using the JS constructor objects (we learned those on day 2) inherits certain things from a prototype which is defined by the JS base language.
  • Let's see what I'm talking about in action:
    1. Create a new string using JavaScript's String object (set a var to new String('some string here');
    2. Console.log the var you made.
    3. Now, call Object.getPrototypeOf(), passing your var into the method inside of a console.log.
    4. What you see is the prototype that your newly created string inherited from.
  • Anatomy of an object
    
      var myObj [optional var declaration] = {
         [key]firstName: [value]"Ryeker",[property, separated from other properties by comma]
      };[Enclosed by curly brackets]
      [keys are never strings, while values can be any of the data types.]
      
  • This is different from most other languages for many reasons.
  • Prototypes are a chain of parent objects that trace all the way back to the native JS Object prototype. Our custom object are said to inherit from their prototype, but what does that mean?
  • Let's try it:
    1. Create a new object in your js file
      
          var myObj = {
              firstName: "Ryeker",
              lastName: "Herndon"
          }; //Note that this is only one way to make an object!
          
    2. Now open in the browser and in your console, type myObj.
    3. You should see your two properties (firstName and lastName) but what are these others?
    4. They are the inherited members of the Object prototype. Use your down arrow to scroll to the __proto__ option and hit enter on your keyboard. You should see the Object constructor function logged out for you. Poke around and see if you recognize anything.
  • There's a lot going on behind the scenes that JavaScript does for us when we create vars, lets, and consts, but other than primitives (remember those?) all of our variables, no matter what their type, are created using a base Object.
  • Let's see this in action:
    1. Create new instances of a String, an Array, an Object, a Boolean, and a Number.
    2. In your console, look up the __proto__ of each of these.
    3. Notice the constructor member of the prototype? That is the function that JS uses to create our vars when we call 'new' on them. Pretty AWESOME!
  • To understand the awesomeness of JS prototypal inheritance, you have to understand classical inheritance.
  • TL;DR: In most other languages, rather than have prototypes that your new objects/vars inherit from, they are tied inextricably to class instances. If anything on a parent class is changed or removed, in those other languages, every child that referred to something removed on the parent would break. In JS, nothing breaks! The reference just doesn't work anymore. COOL!
  • Ok, so we know how our objects are getting their properties via prototype. But how can we improve upon objects in a custom way?
  • Creating Custom Methods: use Object Prototypes!
  • Let's try it!
    • Create a prototype for a user.
    • Write a function that prompts for a user name and password
    • after the user name and password are stored in vars, have the function call new on your prototype.
    • Log out the new user and take a look!
  • How can we use this in our todo app?

Continue work on final project. The HTML and CSS should be pretty far along by this point. Think about how you can start to use the DOM functions we’ve learned about in your project.