So Many Questions, So Little Time
Austin Coding Academy Describe one thing you’re learning in class today.
Stephen Lyssy One of the things we reviewed today was accessing data in objects. This is critical because most data fetched from databases via their APIs is returned to us as JSONs. JSONs or JavaScript Object Notation can be quite complex. In general, they are JavaScript objects that contain “keys” and “value” pairs. The “values” themselves can be strings, numbers, arrays or even multiple levels of objects. To access this data, a developer must know how step through these data structures.
Austin Coding Academy What’s the difference between: function Person(){}, var person = Person(), and var person = new Person()?
Stephen Lyssy function Person() {} is a function declaration. This is one of the ways we can create functions in JavaScript.
With var person = Person() we are creating a “person” variable and we are assigning the value of whatever is returned by the Person () function.
var person = new Person() is a function constructor. When we use the keyword “new” we are instantiating a new object of the Person class constructor. This creates a new Person object.
Austin Coding Academy What’s the difference between an “attribute” and a “property”?
Stephen Lyssy One key difference between attributes and properties is that attributes are defined by HTML and properties are accessed from the DOM. When writing HTML you can define the attributes, and once the browser parses that HTML, DOM nodes will be created. Those nodes are objects and contain properties.
These differences are subtle, but important. The easiest way to understand this is by looking at an HTML input.
In the above example, “id”, “type” and “value” are all attributes that are assigned when the HTML was written. Their properties are reflections of those attributes. The differences become important when we try to access their values.
For example, if a user were to provide “Kevin” as an input in this input container. If were to access this attribute by writing element.getAttribute(“value”) we will get “Name:” since that is was the attribute that was initially assigned; however, if we were to write element.value, we’d get “Kevin”. This is because the value property reflects the current text inside the input box where the value attribute refers to the attribute value assigned in the HTML code.
Austin Coding Academy What language constructions do you use for iterating over object properties and array items?
Stephen Lyssy To loop over objects we can use Object.keys to return an array of all the keys in an object. We can use that in combination with a “for of” loop. This will allow us to loop over all of the object keys and we can use the keys to access their values.
I typically stick to using array methods for looping over arrays. These include forEach(), map(), filter(), reduce(), flat() and flatMap(). Which one I use depends on what I’m trying to do with the data in the array. For example, if I want to return an array, I’d use the map() method.
Austin Coding Academy What is the event loop?
Stephen Lyssy The event loop is how JavaScript processes operations. In reality, JavaScript executes all operations on a single thread, but because JavaScript is asynchronous, this gives the illusion of multi-thread processing. The event loop is constantly looking between the call stack and the event queue. If the call stack is empty, the event loop passes it new functions from the even queue otherwise the whatever is in the call stack is processed.
Austin Coding Academy What is the difference between call stack and task queue?
Stephen Lyssy I am assuming by task queue, you are referring to the event queue? The call stack is where operations are executed from from top to bottom. The event queue send new functions to the stack for processing. The interaction between the event queue and the call stack is what make JavaScript asynchronous.
Austin Coding Academy What are the differences between ES6 classes and ES5 function constructors?
Stephen Lyssy Both ES6 classes and ES5 function constructors are use to create new objects in JavaScript OOP paradigm. ES6 syntax is more similar to object creation in other object oriented programming languages. One major difference between the two is that you don’t use the “class” keyword with ES5. Instead, with ES5 we use functions to create “class-like” functionalities. Another big difference is that ES6 classes extend all the properties of the base class, where with ES5 you need add the “prototype” keyword every time you want to a new property to the object.