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';

function removeElement(newArr){

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()
[ 'arrays', 'can', 'be', '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.


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?


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.


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).


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.


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.


Here’s my calling card.


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.


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';



Console logged:

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

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!


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.


Found this article that may shed some light.

Learning how references work in JavaScript (Medium, 2016)

and this one,

Reference vs. Primitive Values / Types


you can do both. reason you do it this way is cause you might have a reason to call this function from many different places in a very long code, passing it different arrays each time, and each time it will do it’s work. when you stored your array in a variable named concept, you did that cause that name made sense for that particular array. you might want to use same function of array of fruits, cars, celebrities. if in a months time you go back to review your code, and you see you are passing concept to the function, it won’t make sense to you, how are fruit being conceptual? but by renaming the array locally into arr, when you see this function in a month, you’ll think “oh, this function takes in array as a parameter and then does something with it”. you use variable names that make sense. in both places

I’ve read through the comments, but I still don’t seem to grasp the concept of how it is able to tell you want to work with the ‘concept’ array, when it was never tied into the changeArr function.

If there were three arrays back to back, how would it know which array to mutate if you don’t classify it’s name in any way?

Thank you guys for taking the time out to answer our questions!

function changeArr(arr){    //  `arr` is the parameter
  arr[3] = 'MUTATED';

function removeElement(newArr) {    //  newArr is the parameter
  return newArr.pop()

Parameters are locally declared variables used to identify the argument within the function. The argument in this case is, concept.



Because concept is an array, only its reference is passed to the function, so that the parameter variables both refer to the concept array, even though it is in global scope.

1 Like

Here is my code after completing this lesson:

const concept = [‘arrays’, ‘can’, ‘be’, ‘mutated’];

function changeArr(arr){
arr[3] = ‘MUTATED’;


const removeElement = newArr => {


Can I say that const concept = [‘arrays’, ‘can’, ‘be’, ‘mutated’]; has a global scope which is why it is being accessed by console.log(concept); in both functions and newArr is just a store of value for the second function?

Yes, it is declared in global scope. arr and newArr are both locally declared parameters that reference the same global object. The array is not copied into the function. Only its reference is given to the parameters. When we mutate the object in the function, the change is reflected in the global.

Do arr and new Arr need to be defined or declared? JavaScript doesn’t show them as undefined when run. Thanks

1 Like

When they are written as parameters, they are locally declared variables. The values being handed in (the arguments) will be referenced by those local names.

const foo = function (x, y) {
  console.log(x, y)

a = 42
b = 'forty-two'
foo(a, b)

//  42 'forty-two'
1 Like

Got it.Thank you for the explanation