We Keep Coding

Cloning arrays of objects with Object.assign

I discovered a bug on a project I'm working on that can be replicated by this snippet:
const original = [ { value: 1 } ];
function test() {
const copy = Object.assign([], original);
copy.forEach(obj => obj.value = obj.value + 1);
}
console.log(original[0].value); // -> 1, expected 1
test();
console.log(original[0].value); // -> 2, expected 1
test();
console.log(original[0].value); // -> 3, expected 1
I do not understand why this is the case. In the MDN web docs, the following statements can be found in the deep copy warning section:
For deep cloning, we need to use alternatives, because Object.assign() copies property values.
If the source value is a reference to an object, it only copies the reference value.
How do these notes apply to arrays / in this case? Are array values somehow considered as properties?
Looking back now, the method was probably not intended to work with arrays, so I guess I reap what I sow... but I'd still like to understand what's going on here. The intent was to deep copy the array in order to mutate the objects inside while keeping the original intact.

Are array values somehow considered as properties?
Yes. In JavaScript, arrays are objects (which is why Object.assign works with them), and properties with a special class of names called array indexes (strings defining decimal numbers in standard form with numeric values < 232 - 1) represent the elements of the array. (Naturally, JavaScript engines optimize them into true arrays when they can, but they're defined as objects and performing object operations on them is fully supported.) I found this sufficiently surprising when getting deep into JavaScript that I wrote it up on my anemic old blog.
Given:
const obj = {a: 1};
const arr = [1];
these two operations are the same from a specification viewpoint:
console.log(obj["a"]);
console.log(arr["0"]); // Yes, in quotes
Of course, we don't normally write the quotes when accessing array elements by index, normally we'll just do arr[0], but in theory, the number is converted to a string and then the property is looked up by name — although, again, modern JavaScript engines optimize.
const obj = {a: 1};
const arr = [1];
console.log(obj["a"]);
console.log(arr["0"]); // Yes, in quotes
console.log(arr[0]);
If you need to clone an array and the objects in it, map + property spread is a useful way to do that, but note the objects are only cloned shallowly (which is often sufficient, but not always):
const result = original.map((value) => ({...value}));
For a full deep copy, see this question's answers.

Here we can use structuredClone for deep copy.

Is it bad to have "number" as object keys?

I just searched through SO and it looks like everybody agrees with the idea that JavaScript and TypeScript are not supporting using numbers as keys in an object directly. But somehow my fellow developer has used some objects with numeric keys in our Angular project which are working just fine as other objects. This is what they look like.
{
1: 1,
2: 0,
3: 2
}
And calling the value in a form like obj[2] does not have a problem at the moment. Just wondering if it is the right way to do it, and how well this usage is supported?

Its fine, as in - its legal, as its how arrays work, though one thing to watch out for is that arrays will ensure the key is incremental, starting at 0, whereas a numerical key in an object will not, and WILL be misleading for other developers when they cant understand why obj[1] doesnt always live beside obj[2] etc, and by that I mean the use of within loops etc and simply incrementing the index by one each time. So, personally i wouldnt recommend it due to it looking like an array, but it not actually being an array...
Side - If you are trying to mimic an array, but want an index starting at 1, just use an array as normal and have your code just handle the offset each time. Arrays come with many functions, like length, sort, find etc that an object will not

In javascript keys in object are string type and if you have obj[1] it will automatically turn into obj['1'] but not the same in Map
const obj = {}
obj[1] = 'one';
console.log(obj[1]);
// output: "one"
console.log(obj['1']);
// output: "one"
obj['1'] = 'one string';
console.log(obj[1]);
// output: "one string"
console.log(obj['1']);
// output: "one string"
const map = new Map();
map.set(1, 'one');
map.set('1', 'one string');
console.log(map.get(1));
// output: "one"
console.log(map.get('1'));
// output: "one string"

Why does JavaScript convert an array of one string to a string, when used as an object key? [duplicate]

This question already has answers here:
Why can I access object property with an array?
(2 answers)
Closed 2 years ago.
I ran into a scenario where JavaScript behaves in a way that is somewhat baffling to me.
Let's say we have an object with two keys foo & bar.
a = { foo: 1, bar: 2 }
Then, I have an array of strings, in this case one 'foo'
b = ['foo']
I would expect the following:
a[b] == undefined
a[b[0]] == 1
BUT, this is what happens:
a[b] == 1
a[b[0]] == 1
Why does JavaScript convert ['foo'] -> 'foo' when used as a key?
Does anyone out there know the reason?
How can this be prevented?
let a = { foo: 1, bar: 2 }
let b = ['foo']
console.log(a[b] == 1) // expected a[b] to be undefined
console.log(a[b[0]] == 1) // expected a[b] to be 1

All the object keys are string, so it eventually convert everything you place inside [] (Bracket notation) to string, if it's an expression it evaluates the expression and convert it's value to string and use as key
console.log(['foo'].toString())
Have a look at this example to understand, here [a] eventually converts a toString using a.toString() and then set it as key to b object
let a = { a : 1}
let b = {
[a] : a
}
// object converted to string
console.log(a.toString())
// object built using [] computed property access
console.log(b)
How can i stop this
In practical scenarios you should never do this, but just to illustrate, you can intercept or override the toString method of your object and return value as string with [] around:
let a = { foo: 1, bar: 2 }
let b = ['foo']
b.toString = function() {
let string = this.join(',')
return "[" + string + "]"
}
console.log(b.toString())
console.log(a[b])

When using an array as a key, javascript call the 'toString()' method of that array, and then try to find the stringified version of the array as the key. And if you call ['foo'].toString() you see this method returns "foo".

Why does JavaScript convert ['foo'] -> 'foo' when used as a key?
Does anyone out there know the reason?
Any time there is confusion as to why JavaScript acts in a way which may be unexpected, then looking at the language definition is the surefire way to exactly figure out what happened.
https://www.ecma-international.org/ecma-262/10.0/ is the most current language definition at the time of posting this.
First, you will want to find the area pertaining to Array access. It is in language lingo though.
12.3.2.1 Runtime Semantics: Evaluation
MemberExpression : MemberExpression [ Expression ]
...
3. Let propertyNameReference be the result of evaluating Expression.
4. Let propertyNameValue be ? GetValue(propertyNameReference).
6. Let propertyKey be ? ToPropertyKey(propertyNameValue).
So, what is happening here is you are accessing your array (the MemberExpression) using [] with an Expression.
In order to access with [] the Expression will be evaluated, and then GetValue will be called. Then ToPropertyKey will be called.
propertyNameReference = Evaluate Expression b = b
propertyNameValue = GetValue(propertyNameReference) = ['foo']
propertyKey = ToPropertyKey(propertyNameValue) = 'foo'
ToPropertyKey, in our situation, leads to ToPrimitive and then to ToOrdinaryPrimitive which states that we should call "toString" on the argument (['foo'] in our case).
This is where the implementation comes in to play. On the implementation side,
The Array object overrides the toString method of Object. For Array objects, the toString method joins the array and returns one string containing each array element separated by commas" MDN - Array toString
When there is only one value in the array, the result will simply be that value.
How can this be prevented?
This is the current way it is implemented. In order to change that, you must either change the default implementation, use detection to prevent the call, or use guidance to prevent the call.
Guidance
Document and enforce calling mechanisms in your code. This may not always be possible. It is at the very least reasonable to expect programmers to not call property access with arrays though.
Detection
This will depend on the current environment. With the most recent iteration of JavaScript, you can use type enforcement to ensure that property access is Number or String. Typescript makes this rather easy (here is a good example). It would essentially just require the access to be defined as:
function ArrayAccess(value: string | number) {
and this would prevent anyone from using the array as an accessor value.
Default Implementation
Changing the default implementation is a terrible idea. It will more than likely cause all sorts of breaking changes, and should not be done. However, just for completeness, here is what it would look like. Primarily I am showing this so you can hopefully recognize it if you see it somewhere and then kill it with fire (or check in some code to fix it if there were no spiders near it).
var arrayToString = [].toString;
Array.prototype.toString = function(){
if(this.length === 1) return;
return arrayToString.call(this);
};
Changing the instance implementation is not much of a better idea either. That is covered by #Code Maniac in a separate answer. "In practical scenarios you should never do this" #Code Maniac states, which I also agree with.

When using an array as a key, javascript call the 'toString()' method of that array, and then try to find the stringified version of the array as the key. And if you call ['foo'].toString() you see this method returns "foo".

Empty slots in JavaScript objects?

Lately I started seeing this in firefox' console
Object [ <6 empty slots>, false, <3 empty slots>, 1 more… ]
When I have an object like
{
6: false,
10: true
}
I simply want an object with numeric keys that I can access, but I am worried by this because if it keeps track of empty slots then this must mean that some memory is wasted?
Are my concerns valid and if yes what would be a correct way to define such an object?

The problem might be caused at how Firefox' console.log has interpreted the input object. Somehow, it got evaluated as an array instead of a simple object. Chrome does it right. If you look deeper into how an array is managed in Javascript, you can find the following:
Arrays cannot use strings as element indexes (as in an associative array), but must use integers. Setting or accessing via non-integers using bracket notation (or dot notation) will not set or retrieve an element from the array list itself, but will set or access a variable associated with that array's object property collection. The array's object properties and list of array elements are separate, and the array's traversal and mutation operations cannot be applied to these named properties. src
A better comprehending for this is to tinker with Array's length property. Especially when you have constructed your array by using []. To add elements to the array, we have to use .push(...). This function uses the length property (check 15.4.4.7 Array.prototype.push). So in short (interactive example is at the bottom)
const arr = []; // length = 0
arr.push('1stEl', '2ndEl', '3thEl'); // length = 3
// this isn't allowed, but you can do this
arr[7] = '7thEl'; // length = 8
You see that the length is now 8 and not 4. The indices 3..6 are reserved, but undefined. Here below is a console output.
[
"1stEl",
"2ndEl",
"3thEl",
undefined,
undefined,
undefined,
undefined,
"7thEl"
]
If you use a .push method again, it will place the new element after the '7thEl' element (so on index 8).
To check the keys that is used by this object, we can use Object.keys() on the array. You will get
[
"0",
"1",
"2",
"7"
]
You see that numeric values are used as keys. Like your object, which is
{
6: false,
10: true
}
Using Object.keys on this object gives ["6", "10"]. It has a similar output as the above. So the console.log from firefox has interpret your object as an array, thus displaying it as an array. In order to display the array correctly, it starts (logically seen, need to check the source code yet) at key 0 and ends at key array.length - 1. But the indexes 0,1..5 and 7..9 aren't "defined". Thus it leads to this output
Object [ <6 empty slots>, false, <3 empty slots>, 1 more… ]
I'm not sure if I have to qualify this as a bug or glitch at Firefox's console API... Or that the console input (when initializing a variable) has read the object incorrectly.
--- live example --
const a = new Array(3);
console.log('using "new Array(...)" reserves memory space: ' + a.length);
console.log('---');
// using brackets
const b = [];
console.log('but what with [] ? At initial, we have ' + b.length);
b.push('1stEl', '2ndEl', '3thEl');
console.log('After push(\'1stEl\', \'2ndEl\', \'3thEl\'), we have ' + b.length);
// add to random index
b[7] = '7thEl';
console.log('After b[7] = \'7thEl\', we have ' + b.length);
console.log('displaying gives ', b);
console.log('using Object.keys: ', Object.keys(b));
// adding again
b.push('newEl');
console.log('After b.push(\'newEl\'), we have ' + b.length);
// object
const obj = {
6: false,
10: true
};
console.log('obj defined as {6: false, 10: true }');
console.log('using Object.keys: ', Object.keys(obj));
console.log('obj: ', obj);

Javascript uses sparse arrays. "Since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them." (source)
If the objects are of type Array, then the memory used is an implementation detail of the engine. In your case, the objects are objects, so it only takes the memory for the object itself, and to store the property names and references to property values.

JavaScript variable assignments behaving surprisingly

This question actually is an outcome from another question, for which i have made some experiments, results are confused me more. I'm expecting answers which explains what actually happens internally.
What i have tried is,
I kept this as the base assumption because i got some clear explanation
here,
var a = [];
a['a1'] = [];
a['a2'] = [];
console.log(a); // []
console.log(a['a1']); // []
console.log(a['a2']); // []
TEST 1
This confused me a lot, since it prints b[0] as a and can be able to access length property, i thought var b can be treated as a character array, therefore i tried to assign another value , but ended up without success. From the base assumption, if this one can be treated as a char array(more generally as an array), the assignment should have been successful. It breaks the base assumption.
var b = 'abcd';
b['b1'] = [];
console.log(b); // abcd
console.log(b.length); // 4
console.log(b['b1']); // undefined
TEST 2
But if i create like this, the assignments are happens,
var bb = ['a', 'b', 'c', 'd'];
bb[4] = [];
console.log(bb); // ["a", "b", "c", "d", []]
console.log(bb.length); // 4
console.log(bb[0]); // a
console.log(bb[4]); // []
From this, i thought that, b[4] = []; may be successful, but
var b = 'abcd';
b[4] = [];
console.log(b); // abcd
console.log(b.length); // 4
console.log(b[4]); // undefined
My question is, why these assignments behaving differently while the variables sharing some common functionalities?
Here is the demo
Can anyone please give me a clear cut explanation about what actually happening internally?
Extra tests
Then if i tried with numerical assignment, it behaves quite differently form those two.
var c = 1234;
c[4] = [];
console.log(c); //1234
console.log(c.length); // undefined
console.log(c[0]); //undefined
console.log(c[4]); //undefined

When you access anything but an object with [], a temporary object instantiated with correct prototype (like String or Number) is provided for you. You can read and write properties of this object as you could with any other - try alert(3["constructor"]) for example. However, since this object is not referenced anywhere it goes to garbage right after you've done indexing it and next time you try to read same property you've just set, you're actually accessing a property on new temporary object, which, naturally, is empty.

Test 1: b is a string internally, not an array, so you can't assign something in a b position.
Test 2: Off course it works, since now bb is an array.
My question is, why these assignments behaving differently while the
variables sharing some common functionalities?
Because their types are different.
Test 3:
c is a Number, not an array.
Maybe you have some C background, where strings are char arrays terminated by a null char (\0). In JavaScript strings are built int types and they behave differently of arrays. The [] operator is just a convenience to access one especific char as Jonathan said. Here are some links, take a look:
JavaScript String
JavaScript Array
JavaScript Number

Reasoning
Your "Base Assumption" works because a is an array. "Test 2" is the only other test case that you have written that uses an array, which is why that is the only other test case that works.
You seem to be assuming that providing a square-bracket notation and having a length method indicates that an object is an array. This is not true. To test to see if an object is an array, you can use JavaScript's instanceof method, as follows:
var a = [];
var b = 'abcd';
var bb = ['a', 'b', 'c', 'd'];
var c = 1234;
a instanceof Array // => true
b instanceof Array // => false
bb instanceof Array // => true
c instanceof Array // => false
Notice that the cases where instanceof Array returns true are the ones that are acting as you expected, since you are trying to perform array operations.
Why "Test 1" Failed
For "Test 1", square-bracket notation for strings performs the string class's charAt function. Given b = 'abcd', performing b[0] is the same as performing b.charAt(0). It is read-only and simply returns the character at that index, which is "a".
See the Mozilla Developer Network documentation for Strings for more details.
Why "Extra Test" Failed
For your "Extra Test", integers do not provide a square-bracket notation or a length method, and thus all of those calls failed.

I guess I don't follow what your question is. Javascript treats strings, arrays, and integers differently. You should not expect them to behave in the same manner. Also there is no such thing as associative arrays in javascript to where your first example would work. The a['a1'] type of notation is actually only an alternative means for accessing object properties and have no meaning in the context of a string.