What prevents the swapping of arrays within a 2D array using references?

Question

What prevents the swapping of arrays within a 2D array using references?

In my coding project, I came across a Matrix stored in a 2D-array:

var testM = [
[0.0,2.0,3.0],
[1.0,1.0,1.0],
[7.0,5.0,6.0]
];

// execute row exchange between a and b
function swapRows(a,b){
  let temp = a.slice(); // Cloning the value directly rather than referencing
  a = b.slice();
  b = temp;
}

// When passing individual arrays:
swapRows(testM[0], testM[1]);

Despite running the code above, the original 2D array remains unchanged. Since I'm not well-versed in how JavaScript handles reference passing, any insight would be helpful. (It functions correctly when inserted inline, so it's puzzling why it doesn't work even with cloning by value)

UPDATE: I grasp the concept of swapping elements within a standard one-dimensional array; my interest lies more in understanding how JavaScript manages reference passing. (Not entirely sure if I'm using the correct terminology here).

javascript arrays

Answer 1

Answer №1

The reason your code is not working is because when you assign to variables a and b inside the function, it does not change the references in the original table.

When you pass the function a reference to two internal arrays from the table, the function creates local variables a and b, each pointing to one of those references. Swapping a and b only changes which array reference the local variables point to, without affecting the original table. To modify the original table, you need a reference to the table itself so that you can swap what its array references point to - like this:

var testMatrix = [
    [0, 2, 3],
    [1, 1, 1],
    [7, 5, 6]
    ];
    
// Function to swap row a with b
function swapRows(table, a, b){
    [table[a], table[b]] = [table[b], table[a]]
}

// Pass in the table and indexes:
swapRows(testMatrix, 0, 1);
console.log(testMatrix)

If you insist on passing individual arrays, you could replace all values of one array with the other. However, this method is very inefficient:

var testMatrix = [
    [0, 2, 3],
    [1, 1, 1],
    [7, 5, 6]
    ];
    
// Function to swap row a with b
function swapRows(a,b){
    let temp = a.slice(); // Copy by value, not reference
    a.splice(0, a.length, ...b);
    b.splice(0, b.length, ...temp);
}

// Pass in the individual arrays:
swapRows(testMatrix[0], testMatrix[1]);
console.log(testMatrix)

Answer 2

The reason your code is not working is because when you assign to variables a and b inside the function, it does not change the references in the original table.

When you pass the function a reference to two internal arrays from the table, the function creates local variables a and b, each pointing to one of those references. Swapping a and b only changes which array reference the local variables point to, without affecting the original table. To modify the original table, you need a reference to the table itself so that you can swap what its array references point to - like this:

var testMatrix = [
    [0, 2, 3],
    [1, 1, 1],
    [7, 5, 6]
    ];
    
// Function to swap row a with b
function swapRows(table, a, b){
    [table[a], table[b]] = [table[b], table[a]]
}

// Pass in the table and indexes:
swapRows(testMatrix, 0, 1);
console.log(testMatrix)

If you insist on passing individual arrays, you could replace all values of one array with the other. However, this method is very inefficient:

var testMatrix = [
    [0, 2, 3],
    [1, 1, 1],
    [7, 5, 6]
    ];
    
// Function to swap row a with b
function swapRows(a,b){
    let temp = a.slice(); // Copy by value, not reference
    a.splice(0, a.length, ...b);
    b.splice(0, b.length, ...temp);
}

// Pass in the individual arrays:
swapRows(testMatrix[0], testMatrix[1]);
console.log(testMatrix)

Answer 3

Answer №2

Modify

You are unable to change a primitive (such as string, number, bigint, boolean, null, undefined, and symbol) because primitives are not mutable. (https://developer.mozilla.org/en-US/docs/Glossary/Primitive)

If you provide an array as a parameter, you can modify it within your function.


swapRows(testM, 0, 1);

function swapRows(arr,a,b){   // <-- arr = testM. The value is an ARRAY, therefore it can be changed (it's not a primitive) 
  let temp = arr[a].slice(); 
  arr[a] = arr[b].slice();
  arr[b] = temp;
}

Outdated

In JavaScript, you cannot pass a variable by reference. (This statement is incorrect. Refer to "Modify")

If you wish to manipulate an object, you can use one of these approaches:

Assign a new value using a function that produces the computed value
Modify the object (specific property of the object) by employing a method

Approach

You must provide the object (array) as an argument for the function

function swapRows(arr,a,b){
  let temp = arr[a].slice(); // Copy by value, not reference
  arr[a] = arr[b].slice();
  arr[b] = temp;
  return arr;
}

testM = swapRows(testM, 0, 1);

Technique

You have the option to expand the object or the prototype (note some precautions here: JavaScript: What dangers are in extending Array.prototype?)

Array.prototype.swapRows = function(a,b){
  let temp = this[a].slice(); // Copy by value, not reference
  this[a] = this[b].slice();
  this[b] = temp;
  return this;
}

testM.swapRows(0, 1);

Answer 4

Modify

You are unable to change a primitive (such as string, number, bigint, boolean, null, undefined, and symbol) because primitives are not mutable. (https://developer.mozilla.org/en-US/docs/Glossary/Primitive)

If you provide an array as a parameter, you can modify it within your function.


swapRows(testM, 0, 1);

function swapRows(arr,a,b){   // <-- arr = testM. The value is an ARRAY, therefore it can be changed (it's not a primitive) 
  let temp = arr[a].slice(); 
  arr[a] = arr[b].slice();
  arr[b] = temp;
}

Outdated

In JavaScript, you cannot pass a variable by reference. (This statement is incorrect. Refer to "Modify")

If you wish to manipulate an object, you can use one of these approaches:

Assign a new value using a function that produces the computed value
Modify the object (specific property of the object) by employing a method

Approach

You must provide the object (array) as an argument for the function

function swapRows(arr,a,b){
  let temp = arr[a].slice(); // Copy by value, not reference
  arr[a] = arr[b].slice();
  arr[b] = temp;
  return arr;
}

testM = swapRows(testM, 0, 1);

Technique

You have the option to expand the object or the prototype (note some precautions here: JavaScript: What dangers are in extending Array.prototype?)

Array.prototype.swapRows = function(a,b){
  let temp = this[a].slice(); // Copy by value, not reference
  this[a] = this[b].slice();
  this[b] = temp;
  return this;
}

testM.swapRows(0, 1);

What prevents the swapping of arrays within a 2D array using references?

Answer №1

Answer №2

Modify

Outdated

Approach

Technique

Similar questions

Conceal or reveal input elements with a toggle function in jQuery by utilizing

Which JavaScript framework tackles the challenges of managing asynchronous flow, callbacks, and closures?

Is it possible to pass an Array into a callback function in element-ui's el-autocomplete component?

Retrieve the data entered in the submit button field

The migration-mongo module is not being recognized as a standard CommonJS module

Warning: Unhandled promise rejection - The type error occurred because the property 'close' of the object is undefined

Greetings: Obtaining an array of text within the <td> tags

Get the JSON file from Firebase storage

Troubleshooting ASP.NET MVC3: The mystery behind why my custom validation attributes always seem to fail

Loop through a collection of arrays that contain the same elements, and multiply each consecutive element by a specified value x

What is the origin of this MouseEvent attribute?

Ajax cannot seem to come to a resolution

What issue is present in this Node.js one-line conditional statement?

Unfortunately, CSS3 PIE is not compatible with border-radius and box-shadow properties

Enhance your SVG progress circle by simply selecting checkboxes

I want to know the process of increasing the id name of a div and the name of the content stored

phpif (the current date is after a certain specific date, do

Clear Vuex state upon page refresh

Button for PayPal Checkout

Unable to compile relative path of threejs using browserify and babel