Swap entire arrays in Javascript - javascript

When I try to make a function to swap 2 arrays, the original arrays are left unaltered.
function swap(x, y) {
var temp = x; x = y; y = temp;
}
u=[1, 0];
v=[0, 1];
swap(u, v);
console.log(u);
console.log(v);
This results in u as [1, 0] and v as [0, 1]. The values haven't been changed after the function call to swap.
On the other hand, if I do this without a function call:
u=[1, 0];
v=[0, 1];
var temp = u;
u = v;
v = temp;
console.log(u);
console.log(v);
Then they're swapped correctly, with u as [0, 1] and v as [1, 0].
I thought Javascript arrays are passed by reference, not by value. Am I misunderstanding something here?

Javascript does not have the ability to pass a reference to the u and v variables themselves. So, no assignment to x or y in your swap() function will change what is assigned to u or v. Javascript passes a reference to the object that u and v hold. Thus, you can't change the u and v variables from within swap(). You can change the contents of the object that they point to and thus properties of the object that u and v point to can be modified.
Since I have a C/C++ background, I think of what Javascript does when passing objects as "pass by pointer". When you call swap(u, v), what is passed to the swap() function is a pointer to the array that u also points to. So, now you have two variables u and x both "pointing" at the same array. Thus, if you modify that actual array, then since u points at that same array, both will see the modification. But, nothing you do inside the swap() function can change what object u or v actually point to.
In Javascript, the only way to change what object the original variables point to is to make them properties of an object and pass the object like this:
function swap(obj, x, y) {
var temp = obj[x]; obj[x] = obj[y]; obj[y] = temp;
}
var container = {};
container.u = [1, 0];
container.v = [0, 1];
swap(container, "u", "v");
console.log(container.u);
console.log(container.v);
If you don't mind rewriting both arrays from scratch, you can copy all the contents of one array to a temporary, then copy one array over to the other and then copy the temporary array contents back to the first original. This is not very efficient and there is probably a better way to solve your original problem, but it can be done.
function swap(x, y) {
// remove all elements from x into a temporary array
var temp = x.splice(0, x.length);
// then copy y into x
x.push.apply(x, y);
// clear y, then copy temp into it
y.length = 0;
y.push.apply(y, temp);
}

Getting the terminology on these "reference/value" questions is tricky, but I will do my best.
What you have for your Object / Array variables are really just references. Unlike C++, saying "x = y" does not actually copy the object's variables over to a new memory location. Internally, it's just copying a pointer location over. The language does not have constructions to "automatically recreate" something like an object or array in a new instance; if for some reason, you want to maintain two copies of an array, you will need to explicitly create it then copy over values (ie, = []; or = new Array(); or a copying function like = oldArray.map(...))
A little code example that might conceptually help. These same rules apply between objects and arrays.
a = {}; // In case you haven't seen it, this is like shorthand of "new Object();"
b = {};
c = b;
console.log(a === b); // false
console.log(b === c); // true
b.property = "hello";
console.log(c.property) // hello

Just like Java, JavaScript is pass-by-value only. Assigning to local variables in a function never has any effect on anything outside the function.

They are passed by reference, but they are also assigned by reference. When you write x = y you aren't modifying either of the arrays, you're just making your local variable x refer to the same array as y.
If you want to swap the array contents, you have to modify the arrays themselves:
function swap(x,y) {
var temp = x.slice(0);
x.length = 0;
[].push.apply( x, y );
y.length = 0;
[].push.apply( y, temp );
}

Feb 2022 Solution to Swap 2 Entire Array Contents.
You can use destructuring to swap the 2 arrays:
let a = [ 1, 2, 3, 4 ];
let b = ['a','b','c','d'];
[a,b] = [b,a]; // swap
console.log(a); // ["a", "b", "c", "d"]
console.log(b); // [1, 2, 3, 4, 5]
let a = [ 1, 2, 3, 4 ];
let b = ['a','b','c','d'];
[a,b] = [b,a]; // swap
console.log(a); // ["a", "b", "c", "d"]
console.log(b); // [1, 2, 3, 4, 5]

To swap 2 arrays you may use
Version 1
let arrA = [1,2,3,4];
let arrB = ['Eve', 'Bar', 'Foo'];
let tempArr = [arrA, arrB]; // constructing new array
arrA = tempArr [1];
arrB = tempArr [0];
Version 1 (shorthanded)
let arrA = [1,2,3,4];
let arrB = ['Eve', 'Bar', 'Foo'];
// RHS : construction a new array
// LHS : destruction of array
[arrB, arrA ] = [arrA, arrB];
Version 2 (spread operator)
let arrA = [1,2,3,4];
let arrB = ['Eve', 'Bar', 'Foo'];
let arrC = [...arrB]
arrB = [...arrA]
arrA = [...arrC]

Related

Getting array length by destructuring assignment

After reading the MDN doc with examples of Destructuring assignment, and there is an example like:
const [a, b, ...{ pop, push }] = [1, 2];
console.log(a, b); // 1 2
console.log(pop, push); // [Function pop] [Function push]
and it says: This allows you to simultaneously unpack the properties and indices of arrays.
I took a second thought, isn't it will be fascinating if I could get the length of the array by doing this assignment at the same time getting the indices values out, so I tried this in my console:
const arr = [1, 2]
const [x, y, ...{length}] = arr
console.log(x) // 1
console.log(y) // 2
console.log(length) // 0 | ??? isn't it should give me 2?
// how about this...
const arr = [1, 2]
const {length} = arr
console.log(length) // 2 | ok well, it did work this way, but why not the destructuring assignment?
So, does anybody know why the length did not got assigned with value 2 in the first destructuring assignment? or did I found a bug in JavaScript?
What this does
[a, b, ...something] = someArray
is it takes the rest of the elements (index 2 and after) from someArray and puts them into a single variable as an array.
Doing
...{ pop, push }
takes two properties from that array: Array.prototype.pop and Array.prototype.push. But there aren't any more elements, because the original array had only 2 items, so doing
...{ length }
will give you 0.
If the original array did have more items, you'd see a length. For example:
const arr = [1, 2, 3, 4, 5]
const [x, y, ...{length}] = arr;
console.log(length);
The first two items are put into x and y. The last three items are taken as an array and then the length property is destructured from that array - so the length is 3.
Either add the number of destructured items previously to the length to get the actual length
const arr = [1, 2]
const [x, y, ...{length}] = arr
const actualLength = length + 2; // because 2 items were destructured; x and y
console.log(x) // 1
console.log(y) // 2
console.log(actualLength);
Or use object destructuring syntax instead
const arr = [1, 2]
const { 0: x, 1: y, length } = arr;
console.log(x) // 1
console.log(y) // 2
console.log(length);
Or, more understandable at a glance than either of the above - just do const { length } = arr on a separate line.
Let's see what happens when you only take one element off
const arr = [1, 2]
const [x, ...{length}] = arr
console.log("x", x) // 1
console.log("length", length) // 1
Notice how the length is one, because you start with 2 elements, then get rid of 1, and 2 - 1 is 1.
Why does this happen? ... means "rest", so it's the rest of the properties.
const arr = [1, 2]
const [x, ...rest] = arr
console.log("x", x) // 1
console.log("rest", rest) // [2]
When you use { } you get a property off of the rest, so it's the same as saying
const arr = [1, 2]
const [x, ...rest] = arr
console.log("x", x) // 1
const {length} = rest;
console.log("rest", rest) // [2]
console.log("length", length) // 1

How do you print the names of variables inside of an array?

I have made an array and placed some variables in it, and I want to get the name of the variable using the index number.
var a = 0;
var b = 0;
var c = 0;
var letters = [a,b,c]
console.log(letters)
I want to have it output "[ a, b, c ]" but this code actually outputs "[0, 0, 0]"
For more context, I plan to take the values of a, b, and c and then sort them based on their values, but then I still want to be able to see their variable names in the new order after they have been sorted.
You can use a object instead, You can get keys as an array using Object.keys and later you sort them
const obj = {
a: 0,
b: 2,
c: 1
};
console.log(Object.keys(obj));
//sort keys based on values
const sorted = Object.keys(obj).sort((a,b)=> obj[a]-obj[b])
console.log(sorted)
Use an object indexed by those variable names instead, and then you can take that object's Object.keys, which will give you an array of the properties:
const obj = {
a: 0,
b: 0,
c: 0
};
console.log(Object.keys(obj));
I want to get the name of the variable using the index number.
Access that index in the Object.keys array, eg Object.keys(obj)[1] will evaluate to b.
To sort, take the Object.entries of the object (which will give you both the key and value at once):
const obj = {
a: 0,
b: 2,
c: 1
};
console.log(
Object.entries(obj)
.sort((a, b) => a[1] - b[1])
);
You can't do it with an array - you'd have to use an object. You can get the keys with Object.keys, and the values with Object.values:
var a = 0;
var b = 0;
var c = 0;
var letters = {a, b, c};
console.log(Object.keys(letters));
console.log(Object.values(letters));
.as-console-wrapper { max-height: 100% !important; top: auto; }
This might resolve your problem:
var variableName = 0;
console.log(Object.keys({
variableName
})[0]);

Easiest Way to Assign Array to Individual Objects in Typescript? [duplicate]

This is a simple problem, and I've done it before. I just can't remember how, or what exactly it was called.
In python I can do this:
arr = ['one', 'two']
one, two = arr
how do I do that in JavaScript?
ES6 allows for destructuring assignment:
let [x, y] = ['foo', 'bar'];
console.log(x); // 'foo'
console.log(y); // 'bar'
Or, to stick to your initial example:
var arr = ['one', 'two'];
var [one, two] = arr;
You could also create a default value:
const [one = 'one', two = 'two', three = 'three'] = [1, 2];
console.log(one); // 1
console.log(two); // 2
console.log(three); // 'three'
The question is rather old but I like to post this alternative (2016) solution: One can also use the spread operator "...".
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
let xAndY = [42, 1337];
let f = function(x, y) { return x + y; };
f(...xAndY);
That's destructuring assignment. You can do it in some browsers with the following syntax:
[one, two] = arr;
It's supported in some of the latest browsers and transpilers like Babel and Traceur. This was a feature introduced with ECMAScript 4 which later became ECMAScript Harmony, which eventually became ES 2015.
You can use array's apply function if you want an array items to be passed as a function arguments.
Implementation of serious's idea.
http://jsfiddle.net/RichAyotte/6D2wP/
(function(a, b, c, d) {
console.log(a, b, c, d);
}.apply(this, ['a', 'b', 'c', 'd']));
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
Here is an example. You can try like this.
let a, b, rest;
[a, b] = [10, 20];
console.log(a);
// expected output: 10
console.log(b);
// expected output: 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: Array [30,40,50]
var one = arr[0];
var two = arr[1];
CoffeeScript has it: http://jashkenas.github.com/coffee-script/#pattern_matching
And, quoted from the top of the page:
"CoffeeScript is a little language that compiles into JavaScript. Think of it as JavaScript's less ostentatious kid brother — the same genes, roughly the same height, but a different sense of style. Apart from a handful of bonus goodies, statements in CoffeeScript correspond one-to-one with their equivalent in JavaScript, it's just another way of saying it."
My example works for your example but also if you dont know the array or the array length.
arr = ['one', 'two'];
var length = arr.length;
for (var i = 0; i < length; i++)
{
var val = arr[i];
eval('var '+arr[i]+'= arr[i];');
}
Know you have 2 variables. The first is 'one' who is "one"and the second is 'two' who is "two".
Your problem is solved!
But for the code snippet, i created extra elements to display the var's and i logged it.
arr = ['one', 'two'];
var length = arr.length;
for (var i = 0; i < length; i++)
{
var val = arr[i];
eval('var '+arr[i]+'= arr[i];');
}
var p = document.createElement("p");
p.innerHTML = one + " " + two;
document.body.appendChild(p);
console.log(one, two);
arr = ['one', 'two'];
var length = arr.length;
for (var i = 0; i < length; i++)
{
var val = arr[i];
eval('var '+arr[i]+'= arr[i];');
}
var p = document.createElement("p");
p.innerHTML = one + " " + two;
document.body.appendChild(p);
console.log(one, two);

Why does splice() change both Arrays? [duplicate]

This question already has answers here:
Why does changing an Array in JavaScript affect copies of the array?
(12 answers)
Closed 6 years ago.
Look at the following code:
var x = [1, 2, 3], y;
y = x;
y.splice(0,0,4);
which gives:
y = [4, 1, 2, 3] // (correct)
x = [4, 1, 2, 3] // (why did this change too?)
Why did the x array change when I called .splice() on y?
Objects (including arrays) are passed by reference (effectively, this is what it does... -- purists may disagree with this statement). The splice method mutates the original array. Therefore, since x and y point at the same array, a splice on y will change x as well. To do a shallow clone of x in to y, do y = x.slice(). (Note that any objects within x won't be cloned; they'll be passed by reference.)
var a = [1,2,3];
var b = a;
a[0] = 42;
alert(b[0]); // will show 42
var c = a.slice(); // explicitly makes a copy
a[1] = 6502;
alert(c[1]); // will show 2, not 6502
Taken from value type reference type object in javascript

Add two arrays without using the concat method

Here is a sample of what I would like to do
function test(r){
var arr = ['d','e','f'];
r.push(arr);
/*
More Code
*/
return r;
}
var result = test(['a','b','c']);
alert(result.length);//I want this to alert 6
What I need to do is pass in an array and attach other arrays to the end of it and then return the array. Because of passing by reference I cannot use array.concat(array2);. Is there a way to do this without using something like a for loop to add the elements one by one. I tried something like r.push(arr.join()); but that did not work either. Also, I would like the option of having objects in the arrays so really the r.push(arr.join()); doesn't work very well.
>>> var x = [1, 2, 3], y = [4, 5, 6];
>>> x.push.apply(x, y) // or Array.prototype.push.apply(x, y)
>>> x
[1, 2, 3, 4, 5, 6]
Alternatively using destructuring you can now do this
//generate a new array
a=[...x,...y];
//or modify one of the original arrays
x.push(...y);
function test(r){
var _r = r.slice(0), // copy to new array reference
arr = ['d','e','f'];
_r = _r.concat(arr); // can use concat now
return _r;
}
var result = test(['a','b','c']);
alert(result.length); // 6
This is emulbreh's answer, I'm just posting the test I did to verify it.
All credit should go to emulbreh
// original array
var r = ['a','b','c'];
function test(r){
var arr = ['d','e','f'];
r.push.apply(r, arr);
/*
More Code
*/
return r;
}
var result = test( r );
console.log( r ); // ["a", "b", "c", "d", "e", "f"]
console.log( result === r ); // the returned array IS the original array but modified

Categories

Resources