Where did `arr` and `newArr` come from and what do they do or mean?

Arrays and Functions

This lesson is about mutating an array. The part that I don’t understand it the parameters that are used, which are “arr” and “newArr” . Where did these come from and what do they do or mean?

In step 2 it says

" Let’s double check what happens if we mutate an array using a built-in method inside a function.

Under the console.log() statement, define another function named removeElement that takes a parameter of newArr . Inside the function body call .pop() on newArr ."

Here is the final code:

const concept = ['arrays', 'can', 'be', 'mutated'];

function changeArr(arr){
  arr[3] = 'MUTATED';
}

changeArr(concept);
console.log(concept);
function removeElement(newArr){
  newArr.pop();
}
removeElement(concept);
console.log(concept);
2 Likes

They are arbitrarily chosen parameter names, nothing more. They will act as local variables for referencing our concept array.

.pop() will always remove the last item in the array. Just as .push() is last on, pop is last off.

function removeElement(newArr) {
  return newArr.pop()
}
console.log(removeElement(concept));
console.log(concept);
[ 'arrays', 'can', 'be', 'MUTATED' ]
MUTATED
[ 'arrays', 'can', 'be' ]

Above you’ll see how I’ve had the function return the popped value. .pop lets us assign the value we’ve taken off the array rather than just have it go into thin air. A good option to have as you will learn in your travels.

6 Likes

I don’t understand why you can write arr[3] = … instead of concept[3] = …how does it know arr is referring to the concept array?

Might one conclude that this is inside a function, where concept is the argument, and arr is the formal parameter?

removeElement(concept)

There is the argument.

function removeElement(arr) {
  // arr is a reference to `concept`
}

When concept is passed to function, only a reference is handed to the parameter, arr. Now arr refers to concept within the function. This permits changes to take place on concept, but under a different name.

Consider that since we have access to the global array object, why would we need a parameter, at all?

function changeArr(){
  concept[3] = 'MUTATED';
}
 > changeArr()
<- undefined
 > concept
<- ["arrays", "can", "be", "MUTATED"]

Can this be useful to other arrays? The function is dedicated to a single named object. Hardly a function at all.

Adding a parameter lets us use this function on any array, regardless of scope or context.

10 Likes

Essentially the arr and newArr parameters are pointers (or as the lesson notes describe, references) to the arrays that were passed in to the functions.

A pointer being a reference to a part of the computer’s memory; in this case, we are passing a pointer to concept in memory, and calling it arr and newArr in our functions. In effect we are changing concept directly in memory (not working on a copy), but as @mtf says, just by other names (the names we’ve given to the parameters of our functions).

3 Likes

I’ve learned there is a difference between a reference and a pointer but don’t ask me to recall it. That’s for others to dig into. In the past I did refer to references AS pointers until I was corrected. Dash if I can remember where that post or article is, today.

It’s easy terminology to get swept up in and end up walking away misinformed, then propagating the misinformation.

Bottom line, let’s not call references, ‘pointers’, just so that word doesn’t get stewed into the mix. Let’s stick with references. Well it may be that what’s at the other end of that is a pointer, the reference is not.

In linked lists, next() would be a pointer.

The name of an object is a reference to that object. If it’s an array, the element is the pointer. It points to wherever its data is stored. I think I even got my hands slapped for calling an array a reference object which it apparently is not.

You see where I’m going with this, eh? A slip of a term can lead us down the wrong path if we are misinformed. I’m not here to inform you or anyone else, except to say, research and follow up on terminology to get the clear picture. When you do, be sure to come back here and share, please.

1 Like

Yeah that’s a fair point, and I appreciate the useful clarifications.

I may have shot a little loose from the hip… pointers are a dangerous business as I recall (:grin:), but I understand that we’re not directly handling pointers in javascript, so yeah I will take a good dollop more care with that terminology :+1:


I guess the OP may have noted that when we pass primitives (primitive data types, e.g. string, number, boolean etc.) as function parameters, that changing these in our function does not affect the original variable; they are effectively passed ‘byVal’ by JavaScript, whilst our array or object are passed ‘byRef’.

1 Like

Plus. Plus.

Value references leave their value in the tip jar. Data structure references leave their address.

Here’s a fiver.

versus,

Here’s my calling card.


Aside

I’d be remiss if I didn’t bring up the need to properly understand what primitive really means in the context of programming and a particular language.

Seem to remember getting my hands slapped over misuse of this term and while I’m not posting to inform, would advise do the same for one’s own benefit, and feel free to share, if you will, please anything you can put a finger on.

2 Likes

I worked it out this way:

const concept = ['arrays', 'can', 'be', 'mutated'];
const concept1 = ['blah', 'blah','blah', 'blah'];
const concept2 = ['doing','myself','an','example'];

function changeArr(arr){
  arr[3] = 'MUTATED';
}

changeArr(concept);
changeArr(concept1);
changeArr(concept2);

console.log(concept);
console.log(concept1);
console.log(concept2);

Console logged:

[ 'arrays', 'can', 'be', 'MUTATED' ]
[ 'blah', 'blah', 'blah', 'MUTATED' ]
[ 'doing', 'myself', 'an', 'MUTATED' ]
2 Likes

It’s best to think of it as a variable as in algebra. newArr could easily be changed to x, and you would say x.pop() inside the function; it’s just easier to label it newArr so you remember it is an array. So it didn’t come from anywhere, per se, but it is made and named by the programmer to hold a value.

If you think of it as a box holding something, consider that you could relabel the box at any time, with no effect on its contents – but if (for instance) you want the box to be picked up by the right people and shipped to the right place, you’ll have to change the information given to the delivery company as well!

I understand your confusion; this concept took me a bit to fully grasp when I started coding. Once you realize just how much coding (and our minds) depend on variables, however, this will be second nature.

Good luck & good coding!

3 Likes

In this context , is there any difference between a reference and a pointer to a given array ?!!

Not sure we can speak of pointers in ES. There are values and there are references.

a = 6
b = 7

The above are value assignments.

c = b

The above is an assignment by value, as we will see below:

console.log(c)    // 7

If we change b, it will not have any effect on c.

b = a * b
console.log(b)    //  42
console.log(c)    //  7

The new value is assigned only to b.

Arrays and Objects are a bit different. They are not values but containers, with references to the values they contain.

p = [3, 6, 9]
q = p

Above we are not assigning a value to q but a reference. Now p and q both refer to the same container. Witness what happens when we mutate a value within the array…

p[2] = 12
console.log(q)    //  [3, 6, 12]

The same would apply to an Object:

u = { 
    shape: 'square', 
    side: 5, 
    area () { 
        return this.side ** 2; 
    } 
}
console.log(u.area())    // 25
v = u
v.side = 6
console.log(u.area())    // 36

Note how both references point to the updated value for side in the area method.


Update

Found this article that may shed some light.

Learning how references work in JavaScript (Medium, 2016)

and this one,

Reference vs. Primitive Values / Types