We're getting ready to edit our code because, while it's sound, it also has a built in problem in that "products" is not defined. A) Class, Instance, Object and Everything Else in Between (back to top...) A Class, literally is short for "classification." In layman's terms, you can think of it as a collection of properties and methods - a digital machine that does something specific. Thing is, a class is like a greyed-out button. You have to "call it," you have to turn it on. You do that by "instantiating" a class and when you do that, you have created an instance of that class and you call that instance an object. Here's where it gets a little convoluted, but it's not that difficult once you realize that "instance" tends to be used in two different ways. When you instantiate a class and you give it "life," the end result is an object that is an "instance" of that class. Going back to the button illustration, you have a class which is a greyed-out button. When you activate that button - when you instantiate that class - it is no longer greyed out and you have an object. When you press that button, you now have a value and that value is referred to as an instance of that class. Think of it like this: The above code results in what you see below: Now, let's break this down so we're clear on Classes, Objects and Instances. ① <?php class Drumset { You're setting up a new Class called "Drumset." A Class is generally defined as a blueprint - a magnificent collection of digital ideas and processes that are poised to create something wonderful. ② public $snare... With a Class, you have the option of setting up Properties. You can think of Properties the way you would variables with a function. From that standpoint, you could say that variables within a Class are called Properties the way functions within a Class are called Methods. Properties are simply placeholders. You have to assign them values. Think of them like empty columns on a spreadsheet. When you create Properties, you're creating a column in a spreadsheet and giving it a specific name. ③ public function __construct($placeholder_1, $placeholder_2, $placeholder_3) Here's where you're giving your Properties some values using what's called a construct. ④ $this is what's referred to as a psuedo-variable. It's a handy way of qualifying something as belonging to whatever it is you're currently working with. In this case, when you say $this->snare, you're referring to the "$snare" property that you created a few lines ago. You might be wondering, "Why use $this at all? Why wouldn't you just say, "$snare" and be done with it?" The reason is because if you were to say: $snare=$placeholder_1 rather than $this->snare=$placeholder_1, your code would break (it would come back as an "undefined variable." $snare by itself wouldn't make sense within the public function __constructfunction because $snare doesn't exist - at least not in the mind of the public function __construct function. It has no idea what you're talking about. But when you use $this, now it knows to be looking beyond itself and look for a $snare property within the Class it belongs to. And if you're wondering what -> is, it's called an "object operator." You can read more about it in the text box to the right. ⑤ public function hit_me() { is a method within the Drumset class. It's going to return the $this->snare property's value. That value is going to be passed into the Class at the time of it being instantiated, which we'll get to in a moment. The "public" dynamic is definining the method's "visibility." In short, "visibility" is referring to the extent to which that method can be seen by other parts of your code. Sometimes you want to keep certain functions restricted to whatever Class they're associated with. Other times, you want to be able to make that method available to your entire codebase. "Public" says it is accessible to the general public. For more info, you can click here. ⑥ $kit = new Drumset("piccolo", "24 inch", "Sabian"); "$kit" is you "activating" the Drumset class. Prior to you activating it, you can think of it as a greyed-out button. The functionality is there, but it's dormant right up to the point where you make it active. Making it active is called "instantiation" and you're doing that by creating an object. In many ways, the term is very appropriate given the way a class is often defined as a blueprint. You're now creating an "object" with that blueprint. In your code, you're going to have lots of "objects." What makes those objects unique and / or distinctive is the Class that they reference. That's why when you refer to an Object, you say that they represent an instance of a particular Class. ⑦ $set=$kit->hit_me(); "$set" is nothing more than a variable. It's a digital placeholder that contains the result of a piece of the functionality coming from the $kit object which is an instance of the Drumset class. For the sake of even more reinforcement, here's a breakdown of the above code from Experts Exchange: 1. Line 20: You create a new Drumset and pass the string "piccolo" in as the first parameter. 2. Line 7: In the Drumset constructor, a new variable called $placeholder_1 is created and it is assigned a value of the string "piccolo" 3. Line 9: The value of $placeholder_1 (the string "piccolo") is retrieved. 4. Line 9: The "piccolo" string value is then copied into the $this->snare class property. 5. Line 21 and 15: You call the hit_me() class method on the $kit instance, which looks at the $this->snare class property and sees that it contains a string, so it makes a copy of that string and returns that copy of the string to whatever called the function/method. 6. Line 21: . Back to line 21, the copy of the "piccolo" string has now been returned, so it now assigns it to a new variable called $set. B) function __construct (back to top...) <?php class Bootcamp { function __construct($name, $rank) { $this->name = $name; $this->rank = $rank; echo $this->name.' '.$this-> rank; } } $recruit = new Bootcamp("Pearson", "PFC"); ?> This code would result in "Pearson PFC." That's by simply invoking the Class. The "__construct" happens automatically. A) Functions (back to top...) 1) Named Functions vs Anonymous Functions (back to top...) Here's a basic function written as a "named" function: function lidiexy(products) { console.log(products); } lidiexy(4); Easy! We've got a basic function where we're passing in a variable called, "products" and we're writing that to your console. We can write the same function like this, only as an "anonymous" function: lidiexy = function(products) { console.log(products); } lidiexy(4); An anonymous function is a function without a name. It has several different possible uses, but we're only going to focus on one kind for the sake of this discussion. If you want to learn more, refer to the textbox to the right. There's really not a whole lot of difference between the two, especially with the way you're invoking the function. With one you're using the name of the function, with the anonymous version, you're using the variable that you used to store what amouts to the function expression. What is a "function expression?" Good question. We're going to cover that in a minute. Let's take a look at how we're going to write an anonymous function using ES6. 2) Anonymous Functions Written in ES6 (back to top...) Now, let's take a look at how anonymous functions are written in ES6. First, let's establish some absolutes where terminology is concerned: In addition to what you see above...

• function declaration - it's the actual word, "function." As in function lidiexy.... That's a function declaration.
• function body - although this is the way things are defined in the graphic above, the "function body" is further defined in the context of whether or not it's a named function or it's an anonymous function.
• function statement - If it's a named function, the "function body" is referred to as a "statement."
• function expression - it's the "guts" of a function that doesn't start with the word, "function." Anonymous functions would be the most obvious example of that. Whereas the "guts" of a named function is referred to as a "statement," the "guts" of an anonymous function is called an "expression."

The above example on the right is an anonymous function and the "function body" is actually the "function expression" because of the fact that the function body is engineered in the context of an anonymous function. Just for drill, go back to the example we were looking at a moment ago. First, here's "lidiexy" written as a named function: lidiexy = function(products) { console.log(products); } lidiexy(4); Here's "lidiexy" written as an anonymous function: var lidiexy = function(products) { console.log(products); } lidiexy(4); And now, here's "lidiexy" written as an anonymous function in ES6: var lidiexy = products => { console.log(products); } lidiexy(4); Notice how we got rid of the parenthesis, which is what you can do when you only have one parameter. Also, we got rid of the word, "function." Furthermore, everything from "products" on is the "expression" of that function. That's what we talked about just a moment ago. If you wanted to document just the expression, it would look like this: products => { console.log(products); } Hang on to that thought, because we're going to come back to that in a minute. B) Callback (back to top...) 1) Asynchronous (back to top...) In order to appreciate what a Callback is and why it's so useful, let's go back and rehearse how Javascript processes the code you write. Imagine a situation where you're uploading a bunch of pictures and envision how each one of those photos generates a progress bar so you can see the status of each photo and the extent to which the uploading process is complete. Javascript is just like that. It doesn't wait for the first picture to finish before it starts working on the second. This is a good thing when you're uploading photos and it can be a good thing as well for coding. It can be a problem with your application's syntax, however, if your second function needs something from the first function in order to do its job. Now you're in a bind and your page is going to throw an "undefined "error because it went looking for something that was to be created by a process that wasn't finished by the time that something was supposed to be in place. 2) Basic Example (back to top...) Let's take a look at how this works using some really basic examples. First of all, in order to mimic that scenario where you have a function that's going to take a bit longer than usual, we're going to use the "setTimeout" function in Javascript. That will give us the necessary "drag" that we need in order to illustrate how a Callback can be a real help. Here's a scenario that will need a callback in order to get the sequence we're looking for. We're using named funcitons and documenting them using an ES6 format. let michelle = car => { console.log(car); } const drag = smith => { setTimeout(function() { console.log(smith); }, 200); } drag("franklin"); michelle("enclave"); If we run this, we'll get: enclave franklin ...in our console. Despite the fact that we positioned drag("franklin") first in our code, because it has the "timeout" dynamic attached to it, it doesn't show up until after michelle If we want to dictate the sequence in which this code fires, then you have to use a callback and you'll do that like this: let michelle = car => { console.log(car); } const drag = (smith, cb) => { setTimeout(function() { console.log(smith); cb("enclave"); }, 200); } drag("franklin", michelle); We start with drag. That's the function that is going to fire last if we leave things as they are. We call that first and pass into that function the "franklin" variable and then we follow that with the name of the function we want to fire after drag has completed which, in this case, is michelle. The actual code for drag is changed in that we're now accepting the "smith" variable as well as what the system is going to understand as callback function represented by "cb." We put the cb("enclave") code immediately after the console.log(smith) syntax and we're gold! We get: franklin enclave 3) Callback Using Function Expression Rather than the Function (back to top...) Now, if we were to change things up a bit and instead of passing michelle in as an argument, we're going to pass the expression as an argument instead. Remember, that the "expression" is the "guts" of an anonymous function which, in this case, is michelle. So, that's going to look like this: /*let michelle = car => { console.log(car); } */ const drag = (smith, cb) => { setTimeout(function() { console.log(smith); cb("enclave"); }, 200); } drag("franklin", car => { console.log(car); } ); It's the exact same syntax with the exception of what's in bold. Instead of passing in michelle in as an argument, we passed in the function expression associated with michelle and we get the same result! That's what we did in our project's fetchAll function, remember? exports.getProducts = (req, res, next) => { Product.fetchAll(products => { res.render('shop', { prods: products, pageTitle: 'Shop', path: '/', hasProducts: products.length > 0, activeShop: true, productCSS: true }); }); } So, fetchAll() looks like this: static fetchAll(cb) { getProductsFromFile(cb); } So, your "cb" is "products" and that's being passed into getProductsFromFile(cb) const getProductsFromFile = cb => { fs.readFile(p, (err, fileContent) => { if (err) { return cb([]); } cb(JSON.parse(fileContent)); }); }; Again, a stripped down version of what we did would look something like this: ① We're invoking the "david" named function and we're passing the "products..." expression into the "david" function as an argument. ② "cb" represents our expression with "products" being the parameter. Our expression expects some kind of value to be associated with the "products" parameter and that's what we're doing when we assert "george" in between the two parenthesis. In the tutorial, you see this in the context of the "getProducts" in the "shop.js" Controller... exports.getProducts = (req, res, next) => { Product.fetchAll(products => { res.render("shop/product-list", { prods: products, pageTitle: "All Products", path: "/products" }); }); }; Again, think of it like this. Notice how we've eliminated the arrow function / shorthand: Product.fetchAll(function(products) { res.render("shop/product-list", { prods: products, pageTitle: "All Products", path: "/products" }); }); And that is equivalent to this: const callback = function(products) { res.render("shop/product-list", { prods: products, pageTitle: "All Products", path: "/products" } Product.fetchAll(callback); So, now when we go back to the way it's written in real life... exports.getProducts = (req, res, next) => { Product.fetchAll(products => { res.render("shop/product-list", { prods: products, pageTitle: "All Products", path: "/products" }); }); }; products is the variable that's going to be returned. Make sense? It's not products(). It's function(products). Because of the shorthand being used, it's a little misleading. Now when we get to fetchAll... static fetchAll(cb) { getProductsFromFile(cb); } We're passing our function as a callback, ultimately, into getProductsFromFile... const getProductsFromFile = cb => { fs.readFile(p, (err, fileContent) => { if (err) { return cb([]); } cb(JSON.parse(fileContent)); }); }; We declared "p" earlier as "products.json," so that's our data. The first part of the function, fs.readFile... reads the "products.json" file and if there's nothing there, then the "products" parameter is an empty array. That's what ([]) means. On the other hand, JSON.parse(fileContent)); is introduced into the function as the "products" variable. Remember, it's function(products). That's the bottom line, right there! Now, JSON.parse(fileContent) gets passed as "products" throughout the whole function and that's how we get our data and, ultimately, the View that is the products page! 4) MongoDB Connection Callback (back to top...) Not to beat a dead horse, but let's go over the callback that's used in the context of our MongoDB connection. Here's what you have... "mongoClient" is a constant that "houses" the functionality documented on lines 4-15. We trigger that functionality by referencing the mongoConnect constant on line 17. We pass an anonymous function as an argument to the mongoClient function which is going to be represented by the word "callback" which you can see on line four. The mongoClient function is actually a "promise" which gives us the opportunity to structure an "IF / ELSE" scenario based on the successful completion of a callback. In this case, the callback that we're most interested in is on line 5-6 where we're grabbing the "mongoClient" and connecting to the database. If that callback happens successfuly, we proceed to the "then" block. As per the way "promises" are structured, we have access to the result of the successful callback as a variable which, in this case, we are calling "client." You read more about the way a "promise" works by clicking here.The "client" variable, which is a successful connection to the database, is passed to the callback which is then going to document the details of that connection (line #18) and we're also going to see "connected" in the console thanks to line #9. C) Expressions vs Functions (back to top...) In the midst of talking about callbacks you hear references to "expressions" and "functions" being passed as arguments into another function. That sounds logical, given what we've discussed, but verbiage is important so let's make sure we know what we're talking about. Expression -> An expression is any valid set of literals, variables, operators, and expressions that evaluates to a single value. For example: x = 7 7+3 123 George "123" is an expression because it involves three integers that combine to form one value. The same thing applies to "George" in that you've got a collection of letters combining to form a string. All of what you see below is processed as a single value. Functions -> Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure—a set of statements that performs a task or calculates a value. To use a function, you must define it somewhere in the scope from which you wish to call it. So, whereas an Expression is going to be a value, a Function is going to calculate a value. An Expression is something, a Function does something (although you can attach a function to an expression). D) Hoisting (back to top...) Hoisting - something else that's a little unique to Javascript is the way it will look at a function and gather up all of the variables, position them at the top of the function and take attendance real quick. It won't assign values to those variables, but it will do a quick inventory. That whole approach is called "hoisting." If the organization of your function happens to leave a variable "blank" - in other words, no value is attached to that variable, it will come back as undefined. For example, this: (function() { var foo = 1; alert(foo + " " + bar + " " + baz); var bar = 2; var baz = 3; })(); bar and baz will come back "undefined." Your app won't necessarily crash, but it won't work. This, however, will be a complete train wreck: (function() { var foo = 1; alert(foo + " " + bar + " " + baz); var bar = 2; })(); baz isn't even on the radar. Now you're going to get a "ReferenceError" and not just an "undefined." In the first example, the code was able to make some kind of sense of what had been written because of "hoisting." For all intents and purposes, the code did this behind the scenes: (function() { var foo; var bar; var baz; foo = 1; alert(foo + " " + bar + " " + baz); bar = 2; baz = 3; })(); It took an inventory of all three variables and placed them at the top of the stack, so to speak, and went from there. The facdt that you only assigned a variable to foo and left the other two blank resulted in the "undefined" problem, but the code still understood the presence of all three variables because of the way it "hoisted" everything to the top irrespective of their having been assigned a value. For more information on Hoisting, click here. E) Helper Function (back to top...) The "helper" function is pretty simple. It's just a fancy way of describing the introduction of a function that' contains code that would otherwise be repeated over and over. With a "helper" function, you're doing something very smiliar to an "include." How that looks, however, is a little more involved. Especially when you're doing callbacks. const getProductsFromFile = cb => { fs.readFile(p, (err, fileContent) => { if (err) { return cb([]); } cb(JSON.parse(fileContent)); }); }; static fetchAll(cb) { getProductsFromFile(cb); } To better understand this, here's a scaled back example of a callback where you're passing an expression into another function as an argument: These are all anonymous functions... In the first example, michelle passes an expression as an argument to bruce which responds by logging "yes." In the second example, michelle does the same thing as the first example, but bruce doesn't log "yes." Instead it passes the callback on to david and david writes "yes" to the console. That's what we're doing with the "helper" function in our code. F) Spread Operator (back to top...) The "spread operator" is a new piece of syntax coming from the "next generation" or ES6 version of JavaScript. It allows you to create a copy of an already existing object and give it the same properties. It looks like this: <script> const drum = { snare_drum:"rudimental"}; const drumkit = {...drum }; drumkit.snare_drum="yamaha"; console.log(drumkit.snare_drum); </script> Notice that while we gave "drumkit" the same properties as "drum," we could also change the value of those properties. Pretty handy! G) Using Spread Operator to Concatenate Arrays (back to top...) You can use the spread operator to concatenate arrays. For example: <script> const cart = {products:[], totalPrice:0}; const updated_cart = {id:1, quantity:2}; cart.products = {...cart.products, updated_cart }; console.log(cart); </script> When you run that, you get: H) findIndex (back to top...) You're going to use this code to locate the index of a value within an array. Just a quick note: You can't just pass a value into this function. It's expecting a function as an argument. That's the only way it will work. When you're using ES6, you have the option of writing a bunch of code with very little syntax. Here's an example of the way you would do it with regular JavaScript: You can see the above code in action below: Click the button to check get the index of the first element in the array that has a value of 18 or more. Try it Here's the way you would write it using ES6: <script> let arr = ['snare', 'tom', 'kick']; let boing=arr.findIndex(k => k=='tom'); document.getElementById("demo_1").innerHTML=boing; // demo_1 is the box just below </script> I) Using Spread Operator to Replace a Specific Value in an Array (back to top...) With the ability to find the index of a particular element in our array we can replace that particular element again by using the "spread operator." Like this: <script>let cart = { products: [], totalPrice: 0 }; updatedProduct={id:1, qty:2}; cart.products = [...cart.products]; cart.products[0] = updatedProduct; </script> BTW: To print an array to a div like we're doing in this example you use JSON.stringify which converts a JavaScript value to a JSON string. Read more about it by clicking here. J) Error Messages (back to top...) 1) Uncaught... (back to top...) "Uncaught" means that the error was not processed as something that was coming from a "catch" dynamic. 2) Throw... (back to top...) You can use this to customize your error. For example: <script> const jorja = result => { if(result.length>0) { console.log(result); } else { throw("nothing showed up"); } } jorja(""); </script> When you run the above script, you'll get: Uncaught nothing showed up If you don't code it in a way that accommodates any errors like so: <script< const jorja = result =< { console.log(result);\ } jorja(); </script< ...you'll just get "undefined." For more information about errors, head out to the "David Walsh Blog." K) JavaScript Objects (back to top...) In PHP, an Object is an Instance of a Class. You can have all kinds of Objects, but what makes them distinctive is the Class that they're associated with. When they're being discussed, you would say that particular Object is an Instance of said Class. Yes, you can say that an Object is a collection of properties and values, and that is true. But ultimately, you think of an Object as a "data structure." Easy. In JavaScript, you hear the term, "Object" often. It gets kind of confusing, though, because...

• a variable is an Object
• an array is an Object

It seems like everything is an Object of some sort. But where's the Class? And where's the Method, etc.? Think of it this way: var car = new String("Fiat"); That's the long way around writing this: var car = "Fiat" The elements are there, as far as a Class and an Instance, but they're hidden to the point of often being ignored. If you really wanted to get "technical," you would say that "car" is an Object in that it's an instance of the "String" Class and it has a value of "Fiat." That's getting into the weeds, perhaps, but it's still good to know so when you hear the term "Object," you can process it correctly.