Check out a free preview of the full JavaScript: From First Steps to Professional course:
The "Mutability" Lesson is part of the full, JavaScript: From First Steps to Professional course featured in this preview video. Here's what you'd learn in this lesson:

Anjana discusses mutable and immutable data and demonstrates actions that mutate and do not mutate data. Some actions "mutate" an array while others do not mutate the original array but instead create a new copy.

Get Unlimited Access Now

Transcript from the "Mutability" Lesson

[00:00:00]
>> Before we go any further, I wanna talk a little bit about mutation. So, I don't know folks who are fans of the X-Men series, but yeah, grew up on this cartoon. Anywho, so just like in X-Men, some things in the world can be mutated and some things are just regular humans like us.

[00:00:23] So, in JavaScript certain values behave differently than certain other values that we might think are similar. So earlier we talked about arrays versus strings. They have some stuff in common, like you can use similar syntax to talk to them. But they're also different in important ways. So, question for y'all do these do the same thing?

[00:00:50] Let's talk about it. So in the first example, I am on the first line, well, let's review concepts from yesterday. What am I doing in the first line of this abcArray example? Can we just restate it using some of the vocabulary we learned from yesterday. How about Paul can you just walk me through what is this first line let abcArray do?

[00:01:14]
>> You are declaring a variable abc array and you're assigning the array abc to that variable.
>> Beautiful, thanks. So, in line one we are declaring and assigning a variable abcArray. How about in line two? We kind of already saw this. So let's see Jason, can you walk me through what we're doing in the second line, abcArray one?

[00:01:40]
>> Yep, so we're focusing on the second element in the array, which is b and we're assigning a new value to that d. So the new array would be adc
>> Right, okay and then on the third line, I'm just asking for what is the value of the new array?

[00:01:59] No, yes, exactly, and it's going to hopefully because of the second line, it's going to be adc. So let's find out. Go back to our console and I'm just gonna execute these one at a time. Okay, all right and now if I ask for abcArray it is indeed adc.

[00:02:19] So what that second line did that abcArray one equals d is, as we said before it replaced that middle value in the array. Well, in this case it's the middle value. The value at index one in the array, we reassigned that spot in the array to a new value.

[00:02:40] Okay, now how about in the second example abcString. So similarly in the first line, we're declaring a variable, we're assigning it a value and in quotes "abc". This is a value of type String, right? Now what do you think happened in the second line? What do you think it's gonna do, guesses?

[00:03:04] This abcString, bracket 1 = d.
>> adc.
>> You think it's gonna replace?
>> The b with the d.
>> Replace the b so we would then end up with a string adc. Okay, that's one guess, any other guesses? Let's find out. Okay, so now I'm gonna declare abcString.

[00:03:30] Okay, and now I'm gonna run abcString 1 = d in the console. And it's gonna say, okay, you asked me to do something with these, so this whole thing evaluated to the value d. But now if I asked for abcString, sorry, that's abcArray, abcString it is still abc.

[00:03:54] So that line abcString 1 = d actually didn't do anything. It just evaluated to the value d and it didn't throw any kind of error or anything because JavaScript is so loosey goosey. That sometimes when we ask it to do something that makes no sense or that it can't do.

[00:04:14] It just says no, I'm just gonna ignore you, I'm just gonna keep going and not tell you anything about the fact that the thing you thought you were trying to do didn't actually happen. So JavaScript did not do anything to the abcString value, what is going on here.

[00:04:33] So what we have here is a difference between what we call mutable data and immutable data. So mutable, basically means can be mutated can be changed. And arrays in JavaScript are the type of data that we can change as we go along in our program. So if we wanna swap out one of the elements, no problem, if we wanna add elements on with our push, spell, no problem if we want to pop elements off, no problem.

[00:05:04] We can change the value of the array over time in our programme, so the array is mutable, or arrays in general are mutable. However, strings and other primitive types like Boolean or numbers are immutable in JavaScript. Meaning they cannot be mutated they are resistant to radioactive spider bites and whatever else we throw at them.

[00:05:29] They are am mixing my Marvel metaphors here. But they are essentially values that once JavaScript has conjured up the string abc, that string abc is always going to be the string abc. I can't mess with it the way that I can mess with an array