I’ve Cracked the Code, Please Call Tech Support- The Modal-orian

Learning how to do things is a workout! But just like a physical workout wears you out to make you stronger, a mental workout does the same thing. Now that I’ve been resting a bit, things are starting to make a lot more sense.

  1. Describe one thing you’re learning in class today. Why do you think it will be important to your future web development journey?

Right now we’re focusing on Object Based Programming (or OOP, which is fun). This stuff is pretty great. Creating objects allows us to store a lot of specific information in a much more manageable way. Accessing information within the objects is pretty easy as well, which allows us to store information in a smaller variable. You can even store functions (or methods) within the object, which seems like a lot at first (and it is), but once wrangled, it’s a very powerful tool.

2. Can you offer a use case for the new arrow => function syntax?

That’s a lot of questions within one question! Let’s do it.

The arrow function syntax is, at least for me, a cleaner read. Rather than something like “var function foo(x,y) {“ which, especially if you’re unfamiliar with code looks confusing and intimidating, you have something like this:

const foo = (x,y) => {

Having there be direction makes the code “flow” more easily, and having the separation helps to parse the pieces.

In terms of functionality, they are the same. But if something is easier to read, I’m 1000% more likely to use it and encourage other people to do the same.

I. How does the new syntax differ from the older function signature, function nameFunc(){}, both in style and functionality?

II. Explain the differences on the usage of foo between function foo() {} and const foo = function() {}

The use cases for these are interesting. “function foo() {}” is simply a new function that can take in parameters. The “const foo = function() {}” sets up a variable (foo) which is equal to the function.

III. What advantage is there for using the arrow syntax for a method in a constructor?

You also asked what the advantage is for using the arrow syntax for a method in a constructor. This is a bit of a controversial topic in the coding community, turns out.

It comes down to a matter of scope. When you omit the arrow function for a method within an object constructor, the scope of the ‘this’ keyword is considered to be within that same object. So, if you’ve made an object with a key value pair of “this.name = name”, you can then use this.name in the function. Easy as.

But, using the arrow function on an object method changes the scope back to the global object. This leads to a lot of “undefined” going around. Based on the research I’ve done, it’s best not to use them for these methods.

3. Can you give an example of destructuring an object or an array?

As Dmitri Pavlutin discusses here, object destructing can be helpful if you wish to bind an object attribute (or more than one) to a variable.

Similar to Dmitri’s example, let’s call our object Superhero:

let SuperHero = {

name: ‘Spider-Man’,

secret-identity: ‘Peter Parker’,

city: New York

}

If we deconstruct this, we can apply a variable to just Spider-Man and his secret-identity (spoiler-alert).

const { name, secret-identity } = SuperHero.

4. Explain Closure in your own words. How do you think you can use it? Don’t forget to read more blogs and videos about this subject.

Closure is a tough concept to understand, but a great use in certain circumstances. When using a function in JavaScript, it can access data from the scope above them, and within themselves. But that’s it. So, in order for an enclosed function like this to access data from outside itself, a closure can be used.

This is very helpful when thinking about data security. Don’t want data to be accessible easily? Bury it. Then, if it’s needed for a specific instance, a closure can be used for access.