50 shades of JavaScript

Ok. Here I go with the cheesy titles again. Old habits and such. And don’t read too much into that title. It was the best “binding” themed title I could come up with on short notice. But it does lead me into my first interview question for today.

What is one thing I learned in class today? Although I didn’t fully grasp this idea before the end of class, it’s something I felt the need to research into more on my own to find a good understanding. .bind() Does my cheesy title and image start to make more sense? .bind() goes together with .this when used as a function within an object. And even though that function that uses .this can be called without it by directly calling the key with a function call obj.func(), there are times this won’t be the case. Specifically, if you try to assign that function to a variable like: const var1 = obj.func . When you call that variable it no longer know what to do with .this. It’s out of scope now and can’t connect it. But if you bind it with something like this: const var2 = var1.bind(obj) it binds that .this back to the function and when you call var2, it will run that function as expected. This method seems to be most useful when interacting with the DOM. Since .this is something that commonly refers back to the window element, it can confuse the browser when it finds it inside an object. But binding it will lock it away so it only refers to itself. It’s something that I will still need to practice to fully grasp, but I feel like I have a good basis of how it works and when to use it.

function Person(){}, var person = Person(), and var person = new Person(). These may look very similar. But they are very different while working together, minus one. The first function is an object constructor function. Inside of the paracenteses, you can add arguments to represent the keys the object will create. Then inside the curly braces, you define them with this. For example: function Person(name, age){this.name = name; this.age = age} Now you have a constructor. Then the variable var person = new Person("steve", 34) will create a new object of those parameters under the variable name using the new method. One thing to note is that this is one of the few cases where the function name will need to be capitalized. But using this constructor, you could create any number of new objects that follow the same keys. But what about that second one? To my knowledge, that one is incorrect. If you call the variable for that code, it will always return undefined. It’s not creating a new object or mutating the function. So it won’t return anything.

Attributes and properties sound similar but refer to two very different things. HTML elements have attributes that the DOM can affect. Class, Id, inline styles, inline events. These are all examples of HTML attributes. <button id=”resetButton” class=”blueButton” onclick=”myFunction()”> Reset </button> This is a button element with three attributes. And each of these attributes can be called or affected by manipulating the DOM through JavaScript. Properties typically refer to the information within an object. Looking back at our Person object above, it has two properties. Name and Age. These properties can be called and manipulated through JavaScript but not through the DOM.

There are two kinds of loops that can iterate through objects and arrays. And I think even the most seasoned developer gets them backwards. For in and For of. One goes through an array and runs a function or block of code on each indexed item. The other goes through an object to loop through and affect the key value pairs within. Which is which? Well, the best way I’ve been able to keep track is to think about it this way: One loop affects the each OF the array items. And one loop affects each property IN an object. Do you see it? It will take me time to remember. But just like I described how to remember, that’s how they work. For of will loop through an array and do something to each item it finds. And the For in will loop though and object or series of objects and do something to a specific property.

The event loop is something that is a little foreign to me right now. But I think I have a basic idea of how it works. It is the order in which JavaScript reads and processes each function it comes across. It’s order of operation which in this case works like a big loop. When the browser encounters JavaScript, it reads it from top to bottom and runs any called functions it finds. But it only will do one thing at a time. It will find a called function and add it to the call stack (a place where it will stack the steps of the function it is running). It adds to the stack until it reaches the end of the function and then takes away from the stack until it’s back to the start. Any web api’s or asynchronous functions that were called get placed into a queue until the current stack is finished and then it will run the next function in the queue. This is the event loop and it’s always running as long as there is code to run.

I mentioned call stack and the task queue. Although these two parts work hand in hand, they are very different. The task queue, like I said, is where upcoming functions line up to wait their turn to run. Since only one can run at time, they have to wait regardless of when the developer would prefer they run. Once it’s their turn, the function gets its turn in the call stack. The stack builds up the steps from the bottom to the top. So it will load the function call first. Then stack on top of that the function that was called. Then stack onto that what ever the functions code block says to do. And it keeps going in this way until it reaches the end of the function and it’s calls. Then as each step is completed, it backs through the stack and clears out each step along the way until it is all gone. Then the next item in the queue gets its turn.

Object constructors underwent an update with ES6. The constructor I spoke of about is an ES5 object constructor. But with ES6, the Class constructor came into use. And today it’s very widely used across almost all browsers. The results are very similar to the ES5 although the syntax is different. There are other differences as well like the use of things like getters and setters within the object. A class constructed object function also has inheritance. Inheritance is when calling a new class constructor, it can use the parent function as it’s base and add to it. It’s now a new constructor but it has all of it’s parents properties and any new ones too. Even though both constructors can do the same thing, the Class constructor can do more in the long run. They are interchangeable as well in the sense that if you don’t need your object to do more, the ES5 syntax works fine and is a shorter code to write.