Nested for-loop overwrites object attribute - javascript

I broke down my code to a simplified jsFiddle. The problem is that the attribute is is only set for one object but in the end every object gets the value of the last iteration (in this case it is false but id05 should be true). Why is it? Do I overlook something?
jsFiddle (see in the console)
var reminder = {
id0: {
id: 0,
medId: 0
}
};
var chart = {
id0: {
medId: 0,
values: [[5,1]]
}
}
var tmp = {};
for(var i = 0; i < 10; i++) {
for (id in reminder) {
tmp[id + i] = reminder[id];
tmp[id + i].is = false;
for(var j = 0; j < chart["id" + reminder[id].medId].values.length; j++) {
if (chart["id" + reminder[id].medId].values[j][0] === i) {
tmp[id + i].is = true;
}
}
}
}

tmp[id + i] = reminder[id]; will copy the reference to the object and not clone the object itself.
Consider this:
var a = { a: [] };
var b = a.a;
b.push(1);
console.log(a.a); // [1]
This means that all your objects are the same and they share the same properties (tmp.id05 === tmp.id06 etc...)
tmp.id00.__my_secret_value__ = 1234;
console.log(tmp.id09.__my_secret_value__); // 1234
To clone objects in JavaScript you can use Object.create but this will only make a shallow clone (only clone top level properties)

Related

Javascript foreach not executing for all objects

I currently have an object that adds itself to an array whenever a new one is created. Eventually, I want to remove all of the references in the array so I can add new ones.
I've created an object method (this.removeFromArray()) that looks for itself in the array and splices itself out. removeAll() runs a for loop that makes each object in the array run removeFromArray(), so I expect that when I try to read out the items in the array, I should get nothing.
Instead, depending on the amount of objects created, I get one or two left behind. How can I fix this and have all objects in the array cleared out?
var objArray = [];
function obj(name) {
objArray.push(this);
console.log("Created "+name);
this.name = name;
this.removeFromArray = function() {
objArray.splice(
objArray.findIndex(function(e) {
return e == this;
}),
1
);
}
}
function removeAll() {
for (var i = 0; i <= objArray.length - 1; i++) {
objArray[i].removeFromArray();
}
}
var foo = new obj("foo");
var bar = new obj("bar");
var cat = new obj("cat");
var dog = new obj("dog");
var bird = new obj("bird");
removeAll();
for (var i = 0; i <= objArray.length-1; i++) { //Check the values in the array for leftovers
console.log(objArray[i].name);
}
//Expected nothing in the console but the creation messages, got foo and bar instead
If you want to simply delete all the created object, edit removeAll() function like below:
Note that you have to create a variable for objArray.length, not directly put the objArray.length to for() loop.
function removeAll() {
var len = objArray.length;
for (var i = 0; i <= len - 1; i++) {
objArray.splice(0,1);
}
}
better way to achieve this would be to utilize inheritance through prototype. it is better than creating a function inside the constructor object.
var objArray = [];
function Obj(name) {
this.name = name;
objArray.push(this);
}
Obj.prototype.removeFromArray = function() {
var i = -1,
len = objArray.length,
removed = null;
while (++i < len) {
if (objArray[i] === this) {
removed = objArray.splice(i, 1);
removed = null; //nullify to free memory, though not that necessary
break;
}
}
};
Obj.prototype.removeAll = function() {
var len = objArray.length,
removed = null;
//note that i started from the last item to remove to avoid index out of range error
while (--len >= 0) {
removed = objArray.splice(len, 1);
removed = null; //nullify to free memory, though not that necessary
}
};

js rewrite previous elements in loop

I want to push elements to array in loop but when my method returns a value, it always rewrites every element of array(probably returned value refers to the same object). I'm stuck with this problem for one day and I can't understand where is the problem because I've always tried to create new objects and assign them to 'var' not to 'let' variables. Here is my code:
setSeason(competitions, unions) {
var categories = this.sortCategories(competitions);
var unionsByCategories = new Array();
let k = 0;
for (; k < categories.length; k++) {
unionsByCategories[k] = this.assignCompetitionsToUnions(unions[0], categories[k]);
}
this.setState({categories: unionsByCategories, refreshing: false})
}
and
assignCompetitionsToUnions(unions1, competitions) {
var unions2 = this.alignUnions(unions1);
let tempUnions = [];
for (var i = 0; i < unions2.length; i++) {
var tempUnionsCompetitions = new Array();
var tempSubsCompetitions = new Array();
if (Globals.checkNested(unions2[i], 'union')) {
tempUnionsCompetitions = unions2[i].union;
tempUnionsCompetitions['competitions'] = this.getCompetitionsById(unions2[i].union.id, competitions);
}
if (Globals.checkNested(unions2[i], 'subs')) {
for (var j = 0; j < unions2[i].subs.length; j++) {
if (Globals.checkNested(unions2[i].subs[j], 'union')) {
tempSubsCompetitions[tempSubsCompetitions.length] = {union: unions2[i].subs[j].union};
tempSubsCompetitions[tempSubsCompetitions.length - 1]['union']['competitions'] =
this.getCompetitionsById(unions2[i].subs[j].union.id, competitions)
}
}
}
tempUnions.push({union: tempUnionsCompetitions, subs: tempSubsCompetitions});
}
return tempUnions;
}
Many thanks for any help.
Answer updated by #Knipe request
alignUnions(unions3) {
let newUnions = unions3.subs;
newUnions = [{union: unions3.union}].concat(newUnions);
return newUnions.slice(0, newUnions.length - 1);
}
getCompetitionsById(id, competitions) {
let tempCompetitions = [];
for (let i = 0; i < competitions.length; i++) {
if (competitions[i].union.id === id) {
tempCompetitions.push(competitions[i]);
}
}
return tempCompetitions;
}
sortCategories(competitions) {
if (competitions.length === 0) return [];
let categories = [];
categories.push(competitions.filter((item) => {
return item.category === 'ADULTS' && item.sex === 'M'
}));
categories.push(competitions.filter((item) => {
return item.category === 'ADULTS' && item.sex === 'F'
}));
categories.push(competitions.filter((item) => {
return item.category !== 'ADULTS'
}));
return categories;
}
it always rewrites every element of array(probably returned value
refers to the same object).
You are probably unintended mutating the content of the source array. I would recommend creating a copy of the array.
This is example of array mutation.
let array1 = [1,2,3];
let array2 = array1;
array2[0] = 4; // oops, now the content of array1 is [4,2,3]
To avoid mutating the source array you can create a copy of it
let array1 = [1,2,3];
let array2 = array1.slice();
array2[0] = 4; // the content of array1 is still the same [1,2,3]
I've always tried to create new objects and assign them to 'var' not
to 'let' variables.
Using let/var will not prevent from rewrites. Creating new object with new Array() will not prevent rewrites.
It's hard to read where the bug is exactly from your code and description but you could try to avoid passing an array by reference and instead create a copy and pass the copy in function calls.
this.assignCompetitionsToUnions(unions[0].slice(), categories[k])
This is a shallow copy example, you might need to apply deep copy to make it work for your case.

How to do I unshift/shift single value and multiple values using custom methods?

I have prototypes to recreate how array methods work, pop/push/shift/etc, and I would like to extend the functionality to do the following:
Push/Pop/shift/unshift multiple values
array.push(0);
array.push(1);
array.push(2);
expect(array.pop()).to.be(2);
expect(array.pop()).to.be(1);
expect(array.pop()).to.be(0);
Push/Pop/unshift/etc single values
array.push(0);
array.push(1);
expect([0,1]);
array.pop(1);
expect([0]);
My assumption is that I would need a global array variable to store the elements. Is that the right?
Here is my code:
var mainArray = []; // array no longer destroyed after fn() runs
function YourArray(value) {
this.arr = mainArray; // looks to global for elements | function?
this.index = 0;
var l = mainArray.length;
if(this.arr === 'undefined')
mainArray += value; // add value if array is empty
else
for(var i = 0; i < l ; i++) // check array length
mainArray += mainArray[i] = value; // create array index & val
return this.arr;
}
YourArray.prototype.push = function( value ) {
this.arr[ this.index++ ] = value;
return this;
};
YourArray.prototype.pop = function( value ) {
this.arr[ this.index-- ] = value;
return this;
};
var arr = new YourArray();
arr.push(2);
console.log(mainArray);
My assumption is that I would need a global array variable to store
the elements. Is that the right?
No. That is not right.
You want each array object to have its own, independent set of data. Otherwise, how can you have multiple arrays in your program?
function YourArray(value) {
this.arr = []; // This is the data belonging to this instance.
this.index = 0;
if(typeof(value) != 'undefined')) {
this.arr = [value];
this.index = 1;
}
}
////////////////////////////////////
// Add prototype methods here
///////////////////////////////////
var array1 = new YourArray();
var array2 = new YourArray();
array1.push(2);
array1.push(4);
array2.push(3);
array2.push(9);
// Demonstrate that the values of one array
// are unaffected by the values of a different array
expect(array1.pop()).to.be(4);
expect(array2.pop()).to.be(9);
It's a bit late for this party, admitted but it nagged me. Is there no easy (for some larger values of "easy") way to do it in one global array?
The standard array functions work as in the following rough(!) sketch:
function AnotherArray() {
this.arr = [];
// points to end of array
this.index = 0;
if(arguments.length > 0) {
for(var i=0;i<arguments.length;i++){
// adapt if you want deep copies of objects
// and/or take a given array's elements as
// individual elements
this.arr[i] = arguments[i];
this.index++;
}
}
}
AnotherArray.prototype.push = function() {
// checks and balances ommitted
for(var i=0;i<arguments.length;i++){
this.arr[ this.index++ ] = arguments[i];
}
return this;
};
AnotherArray.prototype.pop = function() {
this.index--;
return this;
};
AnotherArray.prototype.unshift = function() {
// checks and balances ommitted
var tmp = [];
var alen = arguments.length;
for(var i=0;i<this.index;i++){
tmp[i] = this.arr[i];
}
for(var i=0;i<alen;i++){
this.arr[i] = arguments[i];
this.index++;
}
for(var i=0;i<tmp.length + alen;i++){
this.arr[i + alen] = tmp[i];
}
return this;
};
AnotherArray.prototype.shift = function() {
var tmp = [];
for(var i=1;i<this.index;i++){
tmp[i - 1] = this.arr[i];
}
this.arr = tmp;
this.index--;
return this;
};
AnotherArray.prototype.isAnotherArray = function() {
return true;
}
AnotherArray.prototype.clear = function() {
this.arr = [];
this.index = 0;
}
AnotherArray.prototype.fill = function(value,length) {
var len = 0;
if(arguments.length > 1)
len = length;
for(var i=0;i<this.index + len;i++){
this.arr[i] = value;
}
if(len != 0)
this.index += len;
return this;
}
// to simplify this example
AnotherArray.prototype.toString = function() {
var delimiter = arguments.length > 0 ? arguments[0] : ",";
var output = "";
for(var i=0;i<this.index;i++){
output += this.arr[i];
if(i < this.index - 1)
output += delimiter;
}
return output;
}
var yaa = new AnotherArray(1,2,3);
yaa.toString(); // 1,2,3
yaa.push(4,5,6).toString(); // 1,2,3,4,5,6
yaa.pop().toString(); // 1,2,3,4,5
yaa.unshift(-1,0).toString(); // -1,0,1,2,3,4,5
yaa.shift().toString(); // 0,1,2,3,4,5
var yaa2 = new AnotherArray();
yaa2.fill(1,10).toString(); // 1,1,1,1,1,1,1,1,1,1
Quite simple and forward and took only about 20 minutes to write (yes, I'm a slow typist). I would exchange the native JavaScript array in this.arr with a double-linked list if the content can be arbitrary JavaScript objects which would make shift and unshift a bit less memory hungry but that is obviously more complex and slower, too.
But to the main problem, the global array. If we want to use several individual chunks of the same array we need to have information about the starts and ends of the individual parts. Example:
var globalArray = [];
var globalIndex = [[0,0]];
function YetAnotherArry(){
// starts at the end of the last one
this.start = globalIndex[globalIndex.length-1][1];
this.index = this.start;
// position of the information in the global index
this.pos = globalIndex.length;
globalIndex[globalIndex.length] = [this.start,this.index];
}
So far, so well. We can handle the first array without any problems. We can even make a second one but the moment the first one wants to expand its array we get in trouble: there is no space for that. The start of the second array is the end of the first one, without any gap.
One simple solution is to use an array of arrays
globalArray = [
["first subarray"],
["second subarray"],
...
];
We can than reuse what we already wrote in that case
var globalArray = [];
function YetAnotherArray(){
// open a new array
globalArray[globalArray.length] = [];
// point to that array
this.arr = globalArray[globalArray.length - 1];
this.index = 0;
}
YetAnotherArray.prototype.push = function() {
for(var i=0;i<arguments.length;i++){
this.arr[ this.index++ ] = arguments[i];
}
return this;
};
// and so on
But for every new YetAnotherArray you add another array to the global array pool and every array you abandon is still there and uses memory. You need to manage your arrays and delete every YetAnotherArray you don't need anymore and you have to delete it fully to allow the GC to do its thing.
That will leave nothing but gaps in the global array. You can leave it as it is but if you want to use and delete thousands you are left with a very sparse global array at the end. Or you can clean up. Problem:
var globalArray = [];
function YetAnotherArray(){
// add a new subarray to the end of the global array
globalArray[globalArray.length] = [];
this.arr = globalArray[globalArray.length - 1];
this.index = 0;
this.pos = globalArray.length - 1;
}
YetAnotherArray.prototype.push = function() {
for(var i=0;i<arguments.length;i++){
this.arr[ this.index++ ] = arguments[i];
}
return this;
};
YetAnotherArray.prototype.toString = function() {
var delimiter = arguments.length > 0 ? arguments[0] : ",";
var output = "";
for(var i=0;i<this.index;i++){
output += this.arr[i];
if(i < this.index - 1)
output += delimiter;
}
return output;
}
// we need a method to delete an instance
YetAnotherArray.prototype.clear = function() {
globalArray[this.pos] = null;
this.arr = null;
this.index = null;
};
YetAnotherArray.delete = function(arr){
arr.clear();
delete(arr);
};
// probably won't work, just a hint in case of asynch. use
var mutex = false;
YetAnotherArray.gc = function() {
var glen, indexof, next_index, sub_len;
indexof = function(arr,start){
for(var i = start;i<arr.length;i++){
if (arr[i] == null || arr[i] == undefined)
return i;
}
return -1;
};
mutex = true;
glen = globalArray.length;
sublen = 0;
for(var i = 0;i<glen;i++){
if(globalArray[i] == null || globalArray[i] == undefined){
next_index = indexof(globalArray,i);
if(next_index == -1){
break;
}
else {
globalArray[i] = globalArray[next_index + 1];
globalArray[next_index + 1] = null;
sublen++;
}
}
}
globalArray.length -= sublen - 1;
mutex = false;
};
var yaa_1 = new YetAnotherArray();
var yaa_2 = new YetAnotherArray();
var yaa_3 = new YetAnotherArray();
var yaa_4 = new YetAnotherArray();
yaa_1.push(1,2,3,4,5,6,7,8,9).toString(); // 1,2,3,4,5,6,7,8,9
yaa_2.push(11,12,13,14,15,16).toString(); // 11,12,13,14,15,16
yaa_3.push(21,22,23,24,25,26,27,28,29).toString();// 21,22,23,24,25,26,27,28,29
yaa_4.push(311,312,313,314,315,316).toString(); // 311,312,313,314,315,316
globalArray.join("\n");
/*
1,2,3,4,5,6,7,8,9
11,12,13,14,15,16
21,22,23,24,25,26,27,28,29
311,312,313,314,315,316
*/
YetAnotherArray.delete(yaa_2);
globalArray.join("\n");
/*
1,2,3,4,5,6,7,8,9
21,22,23,24,25,26,27,28,29
311,312,313,314,315,316
*/
YetAnotherArray.gc();
globalArray.join("\n");
/*
1,2,3,4,5,6,7,8,9
21,22,23,24,25,26,27,28,29
311,312,313,314,315,316
*/
But, as you might have guessed already: it doesn't work.
YetAnotherArray.delete(yaa_3); // yaa_3 was 21,22,23,24,25,26,27,28,29
globalArray.join("\n");
/*
1,2,3,4,5,6,7,8,9
21,22,23,24,25,26,27,28,29
*/
We would need another array to keep all positions. Actual implementation as an exercise for the reader but if you want to implement a JavaScript like array, that is for arbitrary content you really, really, really should use a doubly-linked list. Or a b-tree. A b+-tree maybe?
Oh, btw: yes, you can do it quite easily with a {key:value} object, but that would have squeezed all the fun out of the job, wouldn't it? ;-)

remove duplicated value from array and replace it with the latest value in javascript

I have an array in JavaScript. The user enters string and the data placed in this array in the form of value and name.
if(!_.isUndefined(args[1]) && !_.isUndefined(args[2])) {
if(args[1].length !== 0 && args[2].length !== 0) {
var dataObj = {
name : args[1],
value : args[2]
};
formateArray.push({name: dataObj.name, value:dataObj.value});
How can I remove duplicated value from array and replace it with the latest value the user enters?
So when the user enters: value_1 100, value_2 200, value_1 500
I expect to see: value_1 500, value_2 200 (replace the duplicates with new data)
You can iterate your array replace the value if the name already exists.
function push(array, newVal) {
var found = false;
for (var i = 0; i < array.length && !found; i++) {
if (array[i].name === newVal.name) {
array[i].value = newVal.value;
found = true;
}
}
if (!found) {
array.push(newVal);
}
}
function printNameValue(array) {
var out = '';
for (var i = 0; i < array.length; i++) {
out += array[i].name + ' ' + array[i].value + ', ';
}
return out;
}
var myArray = [];
push(myArray, {
name: 'value_1',
value: 100
});
push(myArray, {
name: 'value_2',
value: 200
});
push(myArray, {
name: 'value_1',
value: 500
});
alert(printNameValue(myArray));
Since your values can be associated with meaningful keys, perhaps you should use an object map rather than an array to store your values. Avoiding duplicates now becomes trivial since you cannot have duplicate keys.
var valuesMap = {};
//setting value
valuesMap.value_1 = 100;
//setting another value
valuesMap.value_2 = 200;
//replacing it
valuesMap.value_1 = 500;
Otherwise it's still quite simple, but less efficient:
function add(arr, obj) {
var key = obj.name, i, len;
for (i = 0, len = arr.length; i < len; i++) {
if (arr[i].name === key) {
arr[i] = obj;
return;
}
}
arr.push(obj);
}
var values = [];
add(values, { name: 'test', value: 1 });
add(values, { name: 'test', value: 2 });
values.length; //1
Instead of the array object, i suggest you to use an object that will act like a hashtable. You can define on this way var formateArray = {};
When you want to add or edit the data, instead of using push, you can do it like this:
formateArray[dataObj.name] = {name: dataObj.name, value:dataObj.value};
If the key does not exist dataObj.name, it will be added. It the key exist, the value would set with the new value.
If you want the size of you array, you get it this way Object.keys(formateArray).length
If you want to loop on your data, you can do it this way:
for (var k in formateArray) {
// use hasOwnProperty to filter out keys from the Object.prototype
if (formateArray.hasOwnProperty(k)) {
alert('key is: ' + k + ', value is: ' + formateArray[k].value);
}
}
Here is a jsfiddle that illustrate this.

Javascript Iteration issue - variable variable

Not an expert on the old JS so here goes
I have
store1.baseParams.competition = null;
store2.baseParams.competition = null;
store3.baseParams.competition = null;
What I want to do is
for (i=1; 1<=3; 1++) {
store + i +.baseParams.competition = null;
}
Hope that makes sense what I want to do - is it possible
Basically make a variable / object by adding to it
Cheers
One way to accomplish this is via eval() - (usually a Very Bad Idea)
for (var i=1; i<=3; i++) {
eval("store" + i + ".baseParams.competition = null;");
}
Another, more complex but relatively efficient way would be to create a function which gives you the ability to mutate arbitrarily deep object hierarchies dynamically at run-time. Here's one such function:
/*
Usage:
Nested objects:
nested_object_setter(object, ['property', 'propertyOfPreviousProperty'], someValue);
Top-level objects:
nested_object_setter(object, 'property', someValue);
*/
function dynamic_property_setter_base(obj, property, value, strict) {
var shouldPerformMutation = !strict || (strict && obj.hasOwnProperty(property));
if(shouldPerformMutation) {
obj[property] = value;
}
return value;
}
function dynamic_property_setter(obj, property, value) {
return dynamic_property_setter_base(obj, property, value, false);
}
function nested_object_setter(obj, keys, value) {
var isArray = function(o) {
return Object.prototype.toString.call(o) === '[object Array]';
};
//Support nested keys.
if(isArray(keys)) {
if(keys.length === 1) {
return nested_object_setter(obj, keys[0], value);
}
var o = obj[keys[0]];
for(var i = 1, j = keys.length - 1; i < j; i++)
o = o[keys[i]];
return dynamic_property_setter(o, keys[keys.length - 1], value);
}
if(keys != null &&
Object.prototype.toString.call(keys) === '[object String]' &&
keys.length > 0) {
return dynamic_property_setter(obj, keys, value);
}
return null;
}
Your code would look like this:
for(var i = 1; i <= 3; i++)
nested_object_setter(this, ['store' + i, 'baseParams', 'competition'], null);
Here's another example, running in the JS console:
> var x = {'y': {'a1': 'b'}};
> var i = 1;
> nested_object_setter(this, ['x','y','a' + i], "this is \"a\"");
> x.y.a1
"this is "a""
Another way to do it, IMHO this is the simplest but least extensible way:
this['store' + i].baseParams.competition = null;
That won't work. You can make an object though, storing the 'store'+i as a property.
var storage = {},i=0;
while(++i<4) {
storage['store' + i] = { baseParams: { competition:null } };
}
Console.log(String(storage.store1.baseParams.competition)); //=> 'null'
In a browser, you can also use the window namespace to declare your variables (avoiding the use of eval):
var i=0;
while(++i<4) {
window['store' + i] = { baseParams: { competition:null } };
}
Console.log(String(store1.baseParams.competition)); //=> 'null'
for (i=1; i<=3; i++) {
this["store" + i + ".baseParams.competition"] = null;
}
Just another form of assigning variables in JS.

Categories

Resources