Why JS allows mutating const arrays?
e.g.
const a = 5
a = 6 //throws error
const arr = [1,2,3]
arr[2] = 4 // no error
Why is it allowed to mutate a const array when it should throw an error as in the first case?
Also how do I ensure that my array remains completely immutable?
It is allowed to add, delete or mutate const array in JS because arr variable stores the memory reference and not the values.
So even if you manipulate the values at that memory location you are not really changing the reference to the memory and hence the variable remains const.
The only thing that is not allowed is re-assigning the array arr = []
which essentially means changing the memory reference the arr variable stores.
As #Nina stated any kind of assignment to const variables is not allowed.
const arr = [1, 2, 3]
arr[2] = 4 //this is fine as memory reference is still the same
arr[3] = 3
console.log(arr)
arr = [] //throws error
console.log(arr)
A scalar value in Javascript is stored by value. For example:
let a = "foo" <--- a is linked to the value "foo"
let b = "foo" <--- b is also linked to the value "foo"
Objects and arrays are stored by reference. For example:
const arr = [1,2,3] <--- arr is linked to a unique address in memory that references 1, 2, and 3
When an array or object is mutated, the address in memory doesn't need to change:
arr.push(4) <-- arr is now [1,2,3,4], but its address in memory doesn't need to change, it's still just an array that references 1, 2, 3, and now 4
Related
i got two noob questions about destructure an array:
1st question: when destructuring an object, I can define a new value or a new key or both. On array, can I add a new value without add a new key?
const obj = {a: undefined, b:2};
const {a = 3, b} = obj;
console.log(a); // 3
I want to know if there is a version of this but with array instead.
2nd question: is it possible to do not provide a default value for objects? Considering that I think that it is not possible to change default values using destructure.
const obj = [1, {a: 1, b:2}, 3, 4];
const [, object, three, four] = obj;
console.log(object); //{a: 1, b:2}
In this example, object returns {a: 1, b:2} but I wanted it change the value instead. Is that possible?
thanks, regards.
You are confusing default values with mutation of values, and assignment of values to variables with mutation of objects. Below is a demo of the default value feature of destructuring, with comments to explain the behavior.
You will see here that in general, destructuring is not designed for mutation of objects, but for extraction of variables and values. And hopefully also get a feel for why it would be undesirable for mutation to be mixed in to it, even if it were possible.
const obj = [1, {a: 1, b:2, 99:'z'}, ,3, 4, {mutateme: 1}];
const [, {a=3,b=4,c=5}, object={a:7,b:7},three, four, object2] = obj;
// a prop has value=1, b has value=2, c is not defined use default value 5
console.log(a,b,c,object);
//object is empty use default value={a:7,b:7}
// obj is unchanged
console.log(obj)
// mutate object2={mutateme:1} by reference (like a pointer)
object2.mutateme=7
// {mutateme: 1=>7}
console.log(obj)
// example of how you could (sort of) mutate inside a destructuring statement
// computed property, obj[1]=obj[3]=99 returns 99,
// so extract property 99 to variable z and mutate object obj at index [1] and [3] to =99
// y will 99 now.
const [y1, {[obj[1]=obj[3]=99]:z},, y2 ] = obj
console.log(y1, z, y2)
// if something similar were built into destructuring syntax,
// can you imagine how confusing it could get, and cause of all kinds of unexpected behavior?
If I do this:
a = []
b = [1, 2, 3]
a = b
a will then refer to b
I want to copy all of the values in b into a without changing any memory address/references.
You could push the values without changing the reference from a or b.
var a = [],
b = [1, 2, 3];
a.push(...b);
If you want to populate a in-place, without ever discarding the initial array, then you can simply loop over b and add all the items in a:
var a = []
var b = [1, 2, 3]
var firstA = a; //get a initial element
b.forEach(function(item) {
this.push(item)
}, a);// <-- pass `a` as the `this` context
console.log("`a` is unchanged", a === firstA);
console.log("`a` is not `b`", a !== b);
console.log(a);
let a = b.map(x => x);
The .map() function will create a new array with values generated from the source elements via the passed-in callback function.
As noted in a comment
let a = b.slice();
is pretty much exactly the same.
Basically this saves you the step of
let a = [];
since one brand-new empty array is as good as another. However, if you really have your heart set on using the empty array explicitly initialized, you could use
b.forEach(x, i) { a[i] = x; });
A= b.slice(). It will create a shadow copy of element without changing original one. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
I have some code here and I was wondering if it is the same thing or different. I am pretty sure these are both suppose to be the same but I wasnt sure if I was doing it right.
let zoneComment = updatedMap[action.comment.zone]
? [...updatedMap[action.comment.zone]] : [];
let zoneComment = updatedMap[action.comment.zone]
? Object.assign([], updatedMap[action.comment.zone]) : [];
If these are the same then which should I use or does it matter? I want to use best practice so if it is your OPINION of which is better then please state so.
In your particular case they are not the same.
The reason is that you have an array, not an object.
Doing ... on an array will spread out all the elements in the array (but not the properties)
Doing Object.assign expects an object so it will treat an array as an object and copy all enumerable own properties into it, not just the elements:
const a = [1, 2, 3];
a.test = 'example';
const one = [...a] // [1, 2, 3];
const two = Object.assign([], a); // { '0': 1, '1': 2, '2': 3, 'test': 'example' }
console.log('\none');
for (let prop in one) {
console.log(prop);
}
console.log('\ntwo');
for (let prop in two) {
console.log(prop);
}
However, if you compare the ... operator applied on an object with Object.assign, they are essentially the same:
// same result
const a = { name: 'test' }
console.log({ ...a })
console.log(Object.assign({}, a))
except ... always creates a new object but Object.assign also allows you to mutate an existing object.
// same result
const a = { name: 'test' }
const b = { ...a, name: 'change' };
console.log(a.name); // test
Object.assign(a, { name: 'change'})
console.log(a.name); // change
Keep in mind that Object.assign is already a part of the language whereas object spread is still only a proposal and would require a preprocessing step (transpilation) with a tool like babel.
To make it short, always use ... spread construction and never Object.assign on arrays.
Object.assign is intended for objects. Although arrays are objects, too, it will cause a certain effect on them which is useful virtually never.
Object.assign(obj1, obj2) gets values from all enumerable keys from obj2 and assigns them to obj1. Arrays are objects, and array indexes are object keys, in fact.
[...[1, 2, 3], ...[4, 5]] results in [1, 2, 3, 4, 5] array.
Object.assign([1, 2, 3], [4, 5]) results in [4, 5, 3] array, because values on 0 and 1 indexes in first array are overwritten with values from second array.
In the case when first array is empty, Object.assign([], arr) and [...arr] results are similar. However, the proper ES5 alternative to [...arr] is [].concat(arr) and not Object.assign([], arr).
Your question really bubbles down to:
Are [...arr] and Object.assign([], arr) providing the same result when arr is an array?
The answer is: usually, yes, but:
if arr is a sparse array that has no value for its last slot, then the length property of the result will not be the same in both cases: the spread syntax will maintain the same value for the length property, but Object.assign will produce an array with a length that corresponds to the index of the last used slot, plus one.
if arr is a sparse array (like what you get with Array(10)) then the spread syntax will create an array with undefined values at those indexes, so it will not be a sparse array. Object.assign on the other hand, will really keep those slots empty (non-existing).
if arr has custom enumerable properties, they will be copied by Object.assign, but not by the spread syntax.
Here is a demo of the first two of those differences:
var arr = ["abc"]
arr[2] = "def"; // leave slot 1 empty
arr.length = 4; // empty slot at index 3
var a = [...arr];
var b = Object.assign([], arr);
console.log(a.length, a instanceof Array); // 4, true
console.log(b.length, b instanceof Array); // 3, true
console.log('1' in arr); // false
console.log('1' in a); // true (undefined)
console.log('1' in b); // false
If however arr is a standard array (with no extra properties) and has all its slots filled, then both ways produce the same result:
Both return an array. [...arr] does this by definition, and Object.assign does this because its first argument is an array, and it is that object that it will return: mutated, but it's proto will not change. Although length is not an enumerable property, and Object.assign will not copy it, the behaviour of the first-argument array is that it will adapt its length attribute as the other properties are assigned to it.
Both take shallow copies.
Conclusion
If your array has custom properties you want to have copied, and it has no empty slots at the end: use Object.assign.
If your array has no custom properties (or you don't care about them) and does not have empty slots: use the spread syntax.
If your array has custom properties you want to have copied, and empty slots you want to maintain: neither method will do both of this. But with Object.assign it is easier to accomplish:
a = Object.assign([], arr, { length: arr.length });
Currently I have an array using an increasing index:
var idx = 1;
var a = [];
a[idx++] = "apple";
a[idx++] = "orange";
...
console.log(a[2]);
And only accessing it by [], not using array specific functions, like length, indexOf, ...
Apparently following is also working in this case:
var a = {};
So, which one should I prefer in such case? For example any performance difference between them?
[ ] denotes an array. Arrays only hold values:
var a1 = [1, 2, 3, 4]
As #Qantas pointed out, array can hold more than just values. An array can even contain another array and/or object:
var a2 = [1, 2, ["apple", "orange"], {one: "grape", two: "banana"}];
{ } denotes an object. Objects have key-value pairs like
var a3 = {one: 1, two: 2}
In your case, it's really a matter of how you would like to be able to access the data. If you are only interested in knowing "apple", "pear", etc. Go ahead and use an array. You can access it via it's index
a1[0]; // outputs 1
a1[1]; // outputs 2
or you can iterate over it with a loop. If you use the curly braces, (given the example I gave) you could access it with
a3.one; // outputs 1
a3["two"]; // outputs 2
It's really up to you on how it would best fit your needs in this case. For a more extensive discussion see this article.
The difference is using square brackets will create an Array object while using curly brackets creates a plain object. For example:
a = [];
a[1] = 'a';
b = {};
b[1] = 'b';
a.length; // returns 2
b.length; // is undefined
a.push('z'); // add 'z' to the end of a
b.push('z'); // generates an error - undefined is not a function
// because plain objects don't have a push method
Read the MDN documentation on Array objects to know more about arrays: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
I have put together a small test, can someone explain why does JavaScript do the following?
Why will testArr inherit the modifications of newArray?
var TestClass = function() {
this.testArr = [10,11];
this.addToArray = function() {
var newArray = this.testArr;
newArray.push(12);
}
}
var testClass = new TestClass();
testClass.addToArray();
console.log(testClass.testArr); // will be [10, 11, 12]
Because they're the same array. Variables contain references to arrays. You're assigning that reference to a new variable, and now both variables point to the same array.
Here's a much simpler test which reproduces the behavior:
x = [1, 2] // the value of x is a reference to an array
y = x // the value of y is a reference to the same array
y.push(3) // modify the array pointed to by both variables
console.log(x) // [1, 2, 3]
If you want to create a new array, you need to clone the array.
With following statement
var newArray = this.testArr;
You will not copy the values from inside testArr. You will create a reference to this array. When you make an adjustment to a reference you will automatically change the referenced source too.
When you want to copy the values from testArr to another variable you can do this instead.
var newArray = this.testArr.slice();
This will copy the values from testArr inside newArray.