Flying Ships & Object Cloning - course objectives

Table of Contents

1. Insight into using creative visuals to aid understanding 2. Applied learning: javascript references and deep cloning The problem: deep cloning / deep copying The code we plan to visualise and understand Whoah!!! There's a lot going on there Moving forwards...

Table of Contents

You have subscribed to this short introductory course, and so far I have described my personal journey as a developer and the problems I encountered learning Javascript. Didn't get that email? Check your promotions/spam folder!

But what exactly is this Flying Ships and Object Cloning short course? I would describe it less as a course and more of a journey - a journey of discovery. From here on, you will receive a total of 6 more emails, sent 1 day apart.

Each email will tackle a new concept that will help us eventually achieve two things:

1. Insight into using creative visuals to aid understanding

Is it possible to learn Javascript visually? You bet! By the end of this course you will have an idea of how imagination, memory technique and story can add an extra layer to your learning process.

2. Applied learning: javascript references and deep cloning

What is the point of imagining fantasy landscapes if they don't help us as developers? We will first be applying our new way of thinking to a code snippet provided below, which expose so many important JS topics. I will also provide a few exercises and questions at the end of this course for extra practise!

The problem: deep cloning / deep copying

I personally love teaching this topic. If you understand cloning, and the reasons for it, you understand many of the core javascript fundamentals. There are so many layers you need to peel away and understand, before you can piece it back all together. This includes:

primitive values
memory storage and the stack vs the heap
pointers and expressions
accessing values in objects and arrays
pass by value vs pass by reference

Cloning, as the name suggests, is taking an object or an array and making an exact replica of it. It's important to be able to do this, so you don't waste time manually writing an object every time. Instead you take an existing one, make a copy of it and get all the same keys and values.

What is deep cloning then?

Soon you will know exactly what is meant by this, and if you already know, you will have a better understanding of the complex processing that needs to happen to achieve a deep clone. This is the MDN Doc's definition:

"A deep copy of an object is a copy whose properties do not share the same references (point to the same underlying values) as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you can be assured you're not causing the other object to change too; that is, you won't unintentionally be causing changes to the source or copy that you don't expect."

Let's take a look at an example. The goal of this course will be to visually explore and breakdown this example.

The code we plan to visualise and understand

In the code below, the task is to update the blog post of a user in our application. Unfortunately, he did not capitalise his post title. We must fix it for him.

BUT...

We must not mutate the original app data in any way! Why? It might cause a bug in our program that is difficult to track down. So the task is to create a completely new version of our app data, instead of updating the old one. Take a look:

// DATA
const app = {
  blogsPublished: 1,
  blogsUnPublished: 10,
  users: [
    {
      userId: 32323,
      username: 'CodeMaster',
      posts: [
        {
          title: 'learning Javascript'
        }
      ]
    }
  ]
};

// CAPITALISE THE TITLE IN THE FIRST POST OF THE FIRST USER IN OUR DATA
// DO NOT MUTATE THE ORIGINAL APP OBJECT

const incorrectTitle = app.users[0].posts[0].title;
const correctTitle = incorrectTitle[0].toUpperCase() + incorrectTitle.slice(1);

const updatedApp = { ...app };
updatedApp.users = [ ...app.users ];
updatedApp.users[0].posts = [...app.users[0].posts];

const updatedFirstPost = { ...updatedApp.users[0].posts[0] };
updatedFirstPost.title = correctTitle;
updatedApp.users[0].posts[0] = updatedFirstPost;

Whoah!!! There's a lot going on there

If the code looks ridiculously confusing to you, well, it should! There's a whole lot of stuff going on here, including:

systematically accessing object and array values using object and dot notation
storing references in variables
creating new primitive string values
Using spread syntax for shallow cloning
achieving deep cloning by replacing references

If you think there's a much easier way of achieving the same outcome, there is! BUT THAT'S NOT THE POINT! This is plain javascript, and it achieves deep cloning without the aid of some external library which hides all the magic from us.

We're not here to hide. We're looking javascript in the face and saying "I see you". In a non creepy way, of course...

Moving forwards...

In order to truly understand and appreciate the code above, we are going to learn about each topic. The best part? The Great Sync will give us all the tools we need to look at the problem from a different angle, and help us memorise the fundamental rules that govern all values in our programs.

Ready steady? Look out for my next email 😊