Week 8 - Web Workers & Copying Objects

Shared Web Workers

By now we are very familiar with the idea that JavaScript runs the main stack on a single thread. This means that the main stack runs in a synchronous way - one task at a time.

We do have asynchronous things like Events, Timers, and Promises which will be placed on another thread to be handled. When they are ready to be used they get put in a queue to wait to be added back onto the main stack. They can only be added back onto the main stack when it is empty and all the current tasks are complete.

So, if you have a processor intensive task to complete but it isn't connected to a Promise, Timer, or Event then you are stuck with the main stack not able to do anything until it finishes this big task. Updating the interface and interacting with the user in a real-time way could be jeopardized.

The solution? Shared Web Workers. With these, we can actually create our own new thread to use and run our complex task on that other thread. Our main stack will, once again, be free to work with the interface and the user.

Shared Web Workers can contain practically any code we want, except it is not allow to access the DOM (the interface).

There is another category of Workers called Service Workers. We will be talking about these more starting next week. They are even more powerful than Shared Web Workers and will allow us to do things like build web apps that can run offline.

Deep vs Shallow Copying

In JavaScript, the Primitives are passed to functions and methods as a value. Objects are passed to functions and methods as a reference.

That means, when you are using Objects or Arrays, which contain objects or arrays, and you pass them to a function or method that creates a copy of the contents you may still be dealing with the original contents. Primitive values will always be actually new copies of the values. The objects will always be references.

Let's look at an example to understand this better.

//start with object A with two properties which contain a primitive and an object
let objA = {
  num: 3.14,
  names: ['Steve', 'Rashad', 'Robert', 'Tony', 'Su Cheng'],
};
//now we want a new object that has the same contents
//we will do this in steps to understand it better
let objB = {};
//copy the number from object A to object B
objB.num = objA.num;
//copy the names from object A to object B
objB.names = objA.names;
//display object B and you will see that it has the same contents as object A
console.log(objB);

//Now... say a change is made to Object A
objA.num = Math.PI * 2;
objA.names[1] = 'Vladimir';

//and look at object B again
console.log(objB.num); //still 3.14
console.log(objB.names); // Hey! Where did Rashad go?

This highlights how important it is to understand how objects and primitives are handled differently. The names array in object B (from the example above) points to the same array in memory as the one inside object A.

This is NOT a problem. This is NOT an issue with how JavaScipt runs. This is shallow copying. It is a predictable and consistent behaviour which actually makes efficient use of memory. We just need to know how to create real copies of objects for the times we need them.

For more examples of how this works and to see the ways of doing deep copying

TODO

• Read the content and watch the videos for Weeks 8 and 9
• Finish and submit Cordova PlayR project
• Prepare for the fourth timed exercise