در حال بارگذاری ...

Passing Primitives by Value0:27

And when you say pass by value or pass by reference, the pass by means to assign the variable or to pass it into a function, and we'll take a look at both examples. So let me just move this up a bit. Let's define a variable, let a equals, let's say, "hi", as a string. Let's make another variable called b, and we'll assign that to a, and we'll also update b. So we'll say b equals b plus another string. So concatenating a string, and we'll say "there", okay? So let's console.log a and b. And before we actually do that, how about we make a comment here, and this is how you

So let's console.log a and b. And before we actually do that, how about we make a comment here, and this is how you would typically picture what's going on here. So let's say mental model. So we have the variable a, and that's assigned to a string of hi, and for b, initially, we're assigning that to a, and a is the value of hi. So again, for primitive types, it's passed by value. So essentially, we're copying this value in a of hi into b. So at this point, a and b are both hi, and then for the third line, we are updating b. We're concatenating there to the end of the string, so we get hi there.

Passing Arrays by Reference1:30

So at this point, a and b are both hi, and then for the third line, we are updating b. We're concatenating there to the end of the string, so we get hi there. So now if I save this, we should get hi and hi there for a and b, respectively, and we do. So again, notice when we update b, that does not affect a here. Okay, that's great. Let's try this out for reference types. So either an array, object, or a function, and let's do something similar here. So let's say let c equals an array of one and two, okay, and we'll say let d equals c, and then after that, we'll push to d, so we'll say d.push(3), and again, we'll console

So let's say let c equals an array of one and two, okay, and we'll say let d equals c, and then after that, we'll push to d, so we'll say d.push(3), and again, we'll console.log(c) and d. So let me just grab this, let's change it to c and d. But before we do that, let's do the mental model again. So let's say mental model, and let me just move this up a bit. Now remember, c and d are arrays, so they're reference types, so they actually work differently. But if you didn't know that, your mental model will be like this. So we have c, and that has a value of an array, which is one and two. So let's put that in here for our mental model.

So we have c, and that has a value of an array, which is one and two. So let's put that in here for our mental model. For d, we are assigning it to the value of c. So again, you might think that this is the case here, and then we do d.push three. So we're pushing to this array here, so we get one, two, and three. So again, if your mental model is the same for reference types as it is for primitive types, then this is your expected output. But if we save here, you'll see that that's not the case. You'll see that both c and d were updated to the one, two, three array. So again, c and d are reference types, so when you pass things around, they are passed.

Reference Memory Model3:08

You'll see that both c and d were updated to the one, two, three array. So again, c and d are reference types, so when you pass things around, they are passed by reference. So what does that mean? So when we do this line here, d equals c, we're not passing the value around, we're passing a reference to it. So a better mental model for reference types is to use a reference instead of the actual value. So what we can do here is instead of the actual value, when we say let c equals the array of one, two, how about we put a memory address in here?

So what we can do here is instead of the actual value, when we say let c equals the array of one, two, how about we put a memory address in here? So we'll just represent this with this hex value, so 0x01. So this is an address in memory, and this address has the actual value. And don't be too overwhelmed with what memory is, it's simply just a lookup table with an address and the actual value that it stores. So let's make another comment here, let's say memory. So now our memory has this one address, 0x01, and within that address, we have the array of one, two. So let me just put that in there, okay?

of one, two. So let me just put that in there, okay? So now when we say let c equals one, two, your mental model will be like this. So it's an address, and that address has the value of one, two as an array. Now when we say d equals c, we're passing the reference around now. So d is now the memory address of 0x01. So again, if you think of it this way, we're passing references around, or in this case, memory addresses. And now you can see why both c and d get updated when we do d.push. So when we say d.push, d is referring to this memory address, which is this array here,

that as well, console.log c === e. Again, at first glance, if you look at the values, then they should be the same because it's the same array. But if you look at the actual references, so in our mental model, this address is not the same as this address. So this should result in false. And it does. Let's take a look at more examples here. Let's do functions now and passing variables into functions. And again, we'll start with primitive values.

Primitives in Functions6:00

Let's do functions now and passing variables into functions. And again, we'll start with primitive values. We'll say let num1 equals 2, let num2 equals 3, and let's make a function here. Let's say add, we take in param1 and param2, and we just return the sum of these two numbers. So return param1 plus param2, okay? And let's do the mental model again. So these are primitive types. So we have mental model, nothing special going on here. We have num1, which is 2, and num2, which is 3. And how about we just call that function?

We have num1, which is 2, and num2, which is 3. And how about we just call that function? Let's say const result equals add(num1, num2), and let's console.log(result). So again, you can think of this as calling it like this, add, and then num1 is 2, and then num2 is 3. And then once we get into the function, param1 should be 2 and param2 should be 3. And 2 plus 3, so we should get 5, okay? And we do. So again, this is the correct mental model to have when working with primitive types. But again, with reference types, make sure you refer to them using a reference or a memory.

Mutating Arrays in Functions7:07

So again, this is the correct mental model to have when working with primitive types. But again, with reference types, make sure you refer to them using a reference or a memory address or you might get unexpected results. So let's make another similar example here. Let's say const myArray equals, and we'll put two strings in here, a and b, okay? And let's make a function here. Let's say appendToArray, and we'll take in an array here, someArray, and we'll just push to that variable. So someArray.push c, and we'll return someArray, okay? So again, let's do the mental model.

So someArray.push c, and we'll return someArray, okay? So again, let's do the mental model. Let's paste this in here. And we only have one variable here called, actually, we have two. So myArray is the actual variable, and then someArray is the parameter. So myArray, again, if you don't think of this as pass-by reference, then your mental model will be just the actual value itself, so a and b. And then when you pass that into the someArray parameter, then you'll think that the value is the value of myArray, since we're passing that in. And then we do someArray.push c, and then we get a, b, and c.

is the value of myArray, since we're passing that in. And then we do someArray.push c, and then we get a, b, and c. But if we print out those two results, you'll see that that's not the case. So let's console.log myArray, and also, actually, let's call the function first. So before we console.log myArray, let's store this in a variable. So const resultArray equals appendToArray with myArray. Let's console.log myArray, and let's console.log resultArray, or resultArray, sorry. And you'll see that they are both a, b, c. So again, let's fix our mental model here. When we define this new array here, let's give it a new address in memory.

So again, let's fix our mental model here. When we define this new array here, let's give it a new address in memory. So let's say 0x01, and let's make a new memory lookup table here. So memory 0x01 is the a, b array. Now, when we call append to array, myArray is the address 0x01. So that will be the value of someArray, which is the parameter 0x01. So now we see someArray.push. So someArray is 0x01. So we push to this array here, so it should be a, b, c. And you can see it's updating for both variables here.

So we push to this array here, so it should be a, b, c. And you can see it's updating for both variables here. So that's why we get a, b, c for both. So again, for reference types, make sure you're always thinking about references, or in this case, memory addresses, instead of actual values like you think of when you pass by value with primitive types. Let's take a look at one more example here using objects, just to make sure you understand. So pretty much the same as the example we did before, but for objects. So say const x equals.

Objects and Shared References10:00

So pretty much the same as the example we did before, but for objects. So say const x equals. Now we'll use objects here. We'll just say name Andre. And same for y. So the object's going to be the same. And how about we just add our mental model now? So say mental model again. So objects are reference types. So we refer to them by reference, or in this case, memory addresses.

The object is the same as x, but it should live in a different place in memory. So it's a different reference. So we'll say y, 0x06. And now if we console.log, say x equals y, we know that these are two different places in memory, even though they are the same object. So we should get false here. And we do. Now if we do const z equals x, and our mental model is updated, we are passing by reference.

Now if we do const z equals x, and our mental model is updated, we are passing by reference. So z is the address at x. So 0x05. So now x and z are pointing to the same object. So if we updated z, x will be updated as well. So if I updated z.name to Bob, you'll see that x and z are updated, but y should stay the same. So let's console.log all three. console.log x, y, and z.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟