Finally understanding Mutability in JS

While taking JS211 @AustinCodingAcademy we covered how different items are either mutable or immutable, and I thought I understand. My understand was that different methods or functions could mutate your original value, which is true. This week while using arrays for a MasterMind game I was to develop, I ran across more of the meaning.

I had wrote code similar to shown below. My thought was I did not want to change (or mutate) “myArray” during this part of the code (I did need it to change in other parts of the code) so I made a copy for myArray2. I compared myArray2 to a solution and if any items matched I was going to “null” out that space in myArray2. The code worked as I expected it to. See below.

But to my surprise it also mutated “myArray. See code below.

In JavaScript, I basically mapped to the arrays to always match. From then on I could use either array name in any part of the code. This is a useful item in JavaScript when you map a variable to an element. It allows you to easily call on that element with a much shorter syntax, but it also allows this mutability that you need to understand.

I solved my problem by use Array.from(). See code below. I am sure there are tons of other ways to solve this. Knowing what I know now I probably would have approached this different, but this one bug was causing my game to have issues and this seemed to be a clean way to solve it.

We also started covering more higher level functions. Two that we covered are forEach() and map(). They are similar but the forEach() method doesn’t actually return anything (undefined). It simply calls a provided function on each element in your array. This callback is allowed to mutate the calling array. … The difference is that map() utilizes return values and actually returns a new Array of the same size.

We also discussed how events are handled. There are three main pieces to how this works. They are Event Capturing, Event Propagation, and Event bubbling. Event bubbling is a term you might have come across on your JavaScript travels. It relates to the order in which event handlers are called when one element is nested inside a second element, and both elements have registered a listener for the same event (a click, for example).

As mentioned we are covering higher order functions. A higher order function is a function that takes a function as an argument, or returns a function. Higher order function is in contrast to first order functions, which don’t take a function as an argument or return a function as output.

We also discussed template literals. JavaScript template literals, new to ES6, provide a powerful new tool for doing everything from extending strings across lines to building powerful HTML and XML generators. An example of this is shown in the code below. Note that using the `` character when defining the string caused the console.log to print out the line breaks as well as the characters. This is also used in conjunction with ${} to print out variables in statements. Note that the ` character is different that the single quote ‘. It is the character on the upper left of the keyboard. Before covering this subject, I saw many examples on the old inter-web and could not get them to work, because I was using the single quote. It takes great eyesight to catch the difference.

This week we also covered key values in associative arrays. The key idea is that every Javascript object is an associative array which is the most general sort of array you can invent — sometimes this is called a hash or map structure or a dictionary object. An associative array is simply a set of key value pairs.

The syntax to declare an array is something like: let arr =[10]. However there is another way in Javascript using new Array. Something like: let arr = new Array (10). It is not recommend to use the new Array() because it is slower (it has to call the array constructor). The array literal notation is faster and also easier to read. I have found that there are often many different syntax that can be used in JavaScript, so often when googling I find things that seem way different that I learned. It is important to understand the different ways things can be done, so you can troubleshoot others code, and use their examples.