Week 9 - Promises, Geolocation, Prototypes & Timers

JavaScript is a Prototype Based Language

You will hear a lot about prototype and class over the next few semesters. They are two different approaches to designing and architect software. The problem is that in your early days of programming they can seem like almost the same thing.

We will try to help you understand the differences here in simple practical terms that will let you write better JavaScript with fewer unexpected errors.

A Class is a blueprint for building objects. It is not an object itself, just the plans for building a certain kind of object. Classes inherit properties and methods from parent classes. When you create (instantiate) an object from a class, the object will be given copies all the properties and methods from it's class blueprint as well as copies of all the properties and methods from all the ancestor parent classes. So, when you call an Object's method, the method actually exists inside the Object.

A prototype is an example Object. It is an Object. Think of it as the first one built. In JavaScript, when we create an Object a constructor function is used to build the object. That function has a prototype object. We can put any methods that we want to share with all the objects built with that constructor into that prototype object. We can still link our objects to parent ones but we don't copy the methods, instead, we just link to the parent's prototype. There is a chain of prototype type objects. When we create (instantiate) our Object, it doesn't need copies of all the methods and parent methods. If we call an Object's method and the method does not exist inside our Object, then JavaScript will look up the prototype chain for the method and delegate (borrow) the method to run.

Learn more about Prototype

Asynchronous vs Synchronous

JavaScript has a mechanism known as the event loop. When you pass a list of commands to the event loop, it will keep running each of those commands in order until it gets to the end of your list. This list is known as the main stack. JavaScript keeps trying to run commands as long as there is something on the main stack.

However, sometimes there is a command that would stop the event loop from getting to the next command. It gets blocked from going to the next command in the stack. These types of commands are things that take a long time to complete, like talking to a database, or the file system, or a network request for a file, or a timer that needs to wait before running.

There are specific tasks that are going to take too long and they get put into a secondary area so they can wait for their result. These tasks are known as asynchronous.

If the code stays on the main stack and insists on being run before the event loop moves on to the next item then it is called synchronous.

Learn more about asynchronous

Timers

If you want to do a task repeatedly and as quickly as possible then you use some type of loop. However, if you want to repeatedly do something with a delay between each task or you want to do something once after some delay, then you want to use the setTimeout or setInterval methods.

Timers are an example of an Asynchronous task. They call a function at sometime in the future, not as part of the current execution stack.

Learn about setTimeout and setInterval

Promises

The Fetch API, which we start next week, is actually built on top of another technology that became official with ES6 in 2015 - Promises.

Promises did for asynchronous programming, what fetch did for AJAX.

They are an alternative to callback functions.

Learn about Promises

Async - Await

As part of ES6, there were two new keywords async and await that allowed us to tell JavaScript that we were calling a method, which we expected to be an asychronous one, and have our function wait for the response in a synchronous way. Effectively it wraps the command inside a Promise.

Learn more about async and await

HTML5 Geolocation

On of the APIs added as part of the update to HTML5 was the geolocation API. This let developers determine the latitude and longitude of a device based on either an actual GPS coordinate detection, a cell tower triangulation, or position estimation through wi-fi and network location.

Learn more about Geolocation

Custom Sorts

Here is a review on how to move beyond just the built-in string sort method available on the Array object? Want to be able to do numeric sorts or sort objects?

Learn more about doing custom sorts on Arrays

TODO

TODO Before next week

• If you have not read all these notes and watched the videos from this week, do that first.
• Finish reading the notes for week 9 and watch all the videos in the notes for week 10.
• Hybrid 9 due Monday this week.
• Finish and submit the exercises Exercise 15 - Create Elements and Exercise 16 - Modify DOM before 5pm on this Tuesday.
• Finish and submit Hybrid 10 by next Monday.