JavaScript30 — Day 14

Today we’re working on exercises that illustrate the differences between JavaScript references and copies.

One reason you might want to create an object instance is… to write a digital version of yourself in the case that you were ever in a grumpy mood! You aren’t PERMANENTLY in a grumpy mood, so don’t change your original self honey!

Bits

• References and copies work differently for different data types. For instance, if you update an array reference value, it will mutate (change) the original array. If you update a string, number, or boolean value using a reference variable it will not update the value of the original variable. In the example below, you can see that the “original variable” is age, and the “reference variable” is age2, which is used to store the value of the age variable. When you update age2, it does not affect the value of age.

• Of the methods discussed to create copies (rather than references) of arrays, I preferred using Array.from, or the ES6 spread function. You can use either of these to create a mutable copy of an existing array — the result of using these methods is that you will be allowed to edit the copied array without changing the original.
• One reason you might want to make a copy of an object is to create an instance of that object which has some new properties added to it. Say you were getting a Blizzard from Dairy Queen, and it had the properties of “medium” and “vanilla”, and your friend wanted a Blizzard that had those properties, plus m&ms. You could make a copy of the original Blizzard using the Object.assign() method, and add new property values to it. The syntax for using Object.assign() is as follows:

Here’s the code for the blizzard object in my document…

…and here’s what happens when you log both “blizzard” and “withCandy” to the console!

Blindspots

• We discussed the .concat() method as an option for creating a copy of an array, and my current understanding of .concat() does not cover why we would be able to do so.
• The ES6 “spread” method seems to be coming up in a lot of these JS30 projects. I’d like to be more informed about how recently it was introduced, and it’s functionality.

Breakdown

This was a really fun breakdown for me! I went back to Friday’s project and dove deeper into the CSS transform property. I wanted to see if I could create a super simple animation using transform (translateX) and an event listener in JS. Success! Here’s my CodePen exercise.

Last but not least, my commented code from today’s project is here! Catch you on the flip side.