Details, Details, Details
Describe one thing you’re learning in class today.
Am I the only one who thinks that JavaScript is a bit like Christopher Nolan’s Inception, especially when accessing data in objects within arrays?
Today’s class covered Objects, JSON, .bind(), & this; and while honestly speaking, it’s going to take me some time to really understand all of… this, I’m glad that the great Mattias Petter Johansson will be able to help out with what is becoming one of my favorite channels, Fun Fun Function.
In his video focusing on bind() and this, Johansson has a great way of breaking down these tools and how they play significant roles in object-oriented programming.
For this question though, let’s start with looking at the bind() method. The bind() method, binds (ahem) objects and functions together. Here’s an example:
const userOne = {
firstName: “Quentin”,
lastName: “Tarantino”
}
const userTwo = {
firstName: “Wes”,
lastName: “Anderson”
Const fullName = function() {
Return `${this.lastName}, ${this.firstName}`;
If we wanted to call one of the last names and have it reference one of the above objects, we can do so by using the bind keyword.
const quentin = fullName.bind(userOne);
const wes = fullName.bind(userTwo);
quentin() // Tarantino, Quentin
wes() // Anderson, Wes
What has happened is that the bind() method has connected the fullName() and the userOne object. It does the same thing with the fullName() and the userTwo object.
What’s the difference between: function Person(){}, var person = Person(), and var person = new Person()?
function Person() {}
- This code instantiates, (which just means it creates) a function named Person, but the function is not executed because it has not yet been called. The function is just there in the memory, waiting to be called and once it is called, it will execute.
var person = Person()
- This code is a variable called person, and it declares a new function called Person, calls it, and then the value of the Person() function is stored in the variable called Person. (You see what I mean by Inception?)
var person = new Person()
- This code creates an object, in fact, a new object because of the new keyword. As author Samuel W. Bernett contends on his site Web Dev With Sam, “Person is an object constructor function which returns a new object instance.” I highly recommend that anyone starting out in JavaScript look over Mr. Bernett’s blog along with Mr. Shaun Pelling’s courses and his YouTube channel The Net Ninja. These are great references and tutorials to make JavaScript a bit more understandable for those new to coding.
What’s the difference between an “attribute” and a “property”?
Walt Disney once said, “There is no magic in magic, it’s all in the details.” While attribute and property are often used interchangeably, there’s a difference and it’s in the details.
To answer this question, let’s use the following two examples of code.
<a href=”https://m.imdb.com/title/tt0067992/">Willy Wonka and the Chocolate Factory</a>
let castMember = {
first name: “Gene”,
lastName: “Wilder”,
character: “Willy Wonka”
}
The href attribute in the anchor tag <a></a> above is a characteristic, or an attribute of an anchor tag. It shows specifically the web address where the anchor tag is directed to. This is a part of HTML. Essentially, attributes provide more information about HTML elements.
However, properties are key-value pairs found in JavaScript objects. One of the three properties in the above object is character: “Willy Wonka”.
What language constructions do you use for iterating over object properties and array items?
In an industry of collaboration, I’m always open to advice and proven methods from experienced developers. Thanks to author Dr. Axel Rauschmeyer, in his article he provides an extensive explanation of various tools that can be used for iterating over object properties and array items. While he provides a myriad of choices, he also offers some best practices. Beginning with using for loops, Dr. Rauschmeyer argues that a simple for loop is effective, and can be used with a break or continue statement. Additionally, an every() loop seems to be more conducive rather than a forEach() loop, because according to Rauschmeyer, forEach() loops do not support break statements.
For iterating over objects he suggests using two combinations. The first is combining a for …in with hasOwnProperty() in which he provides an example here. The second combination includes Object.keys() or Object.getOwnPropertyNames() with a forEach() array iteration. Rauschmeyer’s example can be found here.
What is the event loop?
There’s a lot happening on the pages we’re getting our content from, and if you’ve read my posts before, you’ll notice my ties between the theatre and web development. With that said, let’s establish some reference points using roles in a theatrical production to illustrate the role of the event loop.
First, imagine that the event loop is a props master, the call stack is the assistant to the props master, and the event queue is a member of the prop stage crew. Functions are the props themselves.
Ultimately, the props master’s job is to acquire all props and always knows where their props are at all times. They would even know in most cases if the prop table is empty at a given point in the show. If it is, that prop is being used and as soon as it’s done, it gets returned to its proper place for the rest of the show or the next performance. The assistant props master (call stack) is also standing by the props tables, along with a crew member (event queue) to make sure that every prop is in its rightful place.
In the case of programming, the event loop is doing just that with functions and the call stack. The event loop’s job then is to constantly check if the call stack is empty and if it is, the event queue (crew member) sends a new function (prop) to the call stack for processing (for use in the scene). If the call stack is not empty, the function call does its thing (the prop is used in the scene).
What is the difference between call stack and task queue?
Now that we’ve broken down the roles surrounding the event loop, hopefully, the difference between the call stack and task queue (event queue) is easier to understand. The call stack tracks all the operations in a line of code to be executed. The event queue sends new functions to be processed and makes sure that the sequence is happening in the right order.
If the theatre reference confuses you, my apologies. But check out this article from Educative that has an awesome breakdown with illustrations about an event loop’s role in JavaScript.
What are the differences between ES6 classes and ES5 function constructors?
One difference between ES6 Classes and ES5 Function Constructors is when the inheritance property is used with ES5. ES6 classes both define a new object and appends functions to its prototype. ES5 Function Constructors require the help of a new operator, while ES6 Classes are the syntax base for constructor functions. ES6 classes also allow developers to declare new objects using the new operator, while ES5 constructors are centered around how objects are declared. Finally, any function constructor can be used as a new constructor, while classes in ES6 guarantee that the this keyword used inside the class only refers to the object that is being created.
