Story extends Blog
For me, one of the more important concepts from class today was the class extends keyword. I’ve seen a little bit about it before and have dabbled with objects on my own. But after today’s lesson, I have a greater understanding of how and when to use it. Plus my grasp on objects in general is better. Before, I didn’t fully understand when or how to use a method within an object for something useful. But after yesterday and today, I feel a better connection to the whole process. Plus the bonus of a better grasp on inheritance from one class to the other. So let me talk a little about “extends”. Declaring a new class that extends from another is like creating a child class. It has the ability to pull some or all of the properties and methods from the parent class as well and add new ones. But you can specify which properties it inherits. So the child can be a variation of the parent with more information. Or it can be something completely different but pulling a little information along with it. There is also something unique about inherited methods. They can be overridden with a new method of the same name. So when that same method is called on the new class, it returns something different. But that’s not the interesting part. “super” can be used inside a overridden method. I haven’t had a chance to experiment with this yet but here’s basically what happens: You have a class with a method. Then you extend it to a new class and write a new method of the same name. But you still need to run the same original method to get some data and then do more to it. Instead of writing all that code a second time, declare a new variable with super.method(). It will run the original method on the new class object and return that data to the variable. Then use that variable however you need within the new method. Essentially, it’s a cleaner way to reuse methods between classes and not have to write or copy the whole thing again.
The arrow function syntax was introduced in ES6. It allows for a refactoring of functions. Although that doesn’t necessarily mean shorter code in this case. Mostly a different syntax for the same thing. Before there was name = function() { //code} but with an arrow function the same code reads as const name = () => { //code }. One of the biggest differences right away is that the function name is declared like a normal variable name. But then it takes a parameter and runs a block of code following the “fat arrow” =>. One of the biggest differences in functionality is how the function will handle a this called on a DOM element. In the older style function, this will return the object that calls the function. Meaning that if it’s in the event listener for a button, this will refer to that button. But the same block of code in an arrow function will call the ancestor object that owns the function. So if you call it on that same button event listener, it will refer to the ancestor.
Function declarations and expressions are called in different ways. function foo() {} is a function declaration and creates a function that must be called or invoked later on to return a result. “foo” would be the name of the function that is called. But const foo = function() {} is a function expression that runs and saves the results to the variable called “foo”. So that variable can be used in other functions or code since it already contains the results.
I don’t see many advantages to using an arrow syntax in a class constructor method. Especially with the way it treats this. If it starts referring to the wrong element when this is called, then it won’t execute the function correctly.
Destructuring an object is the process of assigning the value of an object property to a variable. Basically, you can use the values inside the object as variables that can be accessed at different scopes. For example:
const normalPerson = { name: “Bruce Wayne”,secretIdentity: “Batman”}let superHero = normalPerson.secretIdentity;
Calling superHero will give you “Batman”. Now this value is held outside of the object and can be used in any way without changing the original object value. Batman’s true identity will be kept safe.
Closure refers to the scope of a function or event and how it can stay within scope or bubble out. A global variable can be changed by any function or code. But making that variable local to a function, it will only be accessible to the function itself. Nothing outside the function can even find that variable. But functions and code within that function have access to it. A function within that function within that function will be able to manipulate that local variable. But any variables within that nested function are only local to it. It becomes private to itself and any code within itself. But not outside. It’s “closed off”.
