Loop through arrays using arr[i]!==undefined - javascript

I know the classic way of looping through an array arr is:
for(var i=0 ; i<arr.length ; i++) {
// code
}
But someone recently showed me a different way of implementing the condition inside that loop, like this:
for(var i=0 ; arr[i] !== undefined ; i++) {
I think this solution is interesting because this is exactly what you need when you loop through an array: you don't want to get undefineds when you try to access an undefined index.
I realize that if you count the characters it looks longer, and also that you might have some problems with arrays like this: ["Hello", , "World"], but apart from that - is there anything else I'm missing here? Why shouldn't we be using this technique instead?

Why shouldn't we be using this technique instead?
It doesn't work on sparse arrays (as you mentioned)
It doesn't work on arrays that contain undefined values
It's not as easily optimised (assuming the .length stays constant during the loop)
(In the old days, the undefined identifier could be overwritten, you'd need to use typeof)
Of cource, wheter it "works" for you depends on the use case, and sometimes you might want to use it. Most times, you simply don't.
And even if both ways would work in your case, it's better practise to use the standard approach (i<arr.length) as there is lower mental overhead. Everyone recognises that pattern and knows what it does, while with arr[i]!==undefined one would need to think about why the uncommon approach was chosen.

Sometimes arrays have empty values and your way of iteration will fail.
var arr = [];
arr[5] = 5;
for (var i = 0; arr[i] !== undefined; ++i) {
console.log(arr[i]);
}
console.log('done');
If you want to iterate real array values and skip undefined's, i suggest you to filter the array first and do iteration after. So your code will be more understandable. Example:
var arr = [];
arr[5] = 5;
arr.filter(Boolean).forEach(function (e) {
console.log(e);
});
console.log('done');

Related

for..in loop loops over non-numeric indexes “clean” and “remove”

This is something very basic I might be missing here but I haven't seen such result till now.
I have a for loop where options.headers.length is 3. And in for loop I am dynamically creating a table header. Ideally this loop should run three times for 0 1 and 2 but when I have printed index it's printing 0,1,2,clean and remove. I haven't seen clean and remove as indexes. I know this information is not sufficient enough but if you have any clue please suggest. something might be overriding this is all I am concluded too after my debugging.
for (index in options.headers)
if you don't want to iterate clean and remove then change the loop to:
for (var i=0; i< options.headers.length;i++){
//use i for getting the array data
}
if you use for (index in options.headers) it will iterate for non-numeric keys also.
don use just index (as that is = window.index = global = bad) use var index
(read more here https://www.google.pl/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=globals+javascript+bad)
you have to check does the array has it as own property or maybe its some function (more after answer)
for (var index in options.headers) {
if (options.headers.hasOwnProperty(index) {
// code here
}
}
more about #2:
let's say we have
var array = [0,1,2,3];
and besides that, extending array with function (arrays can have functions in javascript and strings too)
Array.prototype.sayHello = function() {
alert('Hello');
};
then your loop would print sayHello as part of the array, but that's not it's own property, only the arrays
I assume that options.headers is an Array?
This happens when you (or some framework you load) adds methods to the Array prototype. The "for in" loop will enumerate also these added methods. Hence you should do the loop for an array with:
for (var i = 0; i < options.headers.length; i++)
That way you will only get the real values instead of added methods.

Efficient duplicates search algorithm

I need a script to search efficiently all the duplicates in a one-dimensional array.
I tried a naive method :
for(var i=0, ii<arr.length-1; i<ii; i++)
for(var j=i+1, jj<arr.length; j<jj; j++)
if(arr[i] == arr[j])
// remove the duplicate
Very simple but it takes a too long time if the array contains a large set of values. The tables that I use often contain hundreds of thousands of values, so that the number of iterations required for this operation is HUGE !
If someone has an idea !?
Use a LinkedHashSet or OrderedHashSet implementation, it does not allow duplicates and provides expected O(1) on insertion, lookup, and deletion. Since your OP says you want to remove the duplicates, there is no faster way to do this than O(n). In an array of 1,000,000 items max time was 16ms
Create a LinkedHashSet hs
foreach object obj in arr
-- hs.add(obj);
Complexity is expected O(n) with a good hash function.
This code could be the most efficient way you can do it ..!! Which is nothing but the direct implementation of set .
function eliminateDuplicates(arr) {
var i,
len=arr.length,
out=[],
obj={};
for (i=0;i<len;i++) {
obj[arr[i]]=0;
}
for (i in obj) {
out.push(i);
}
return out;
}

Create copy of multi-dimensional array, not reference - JavaScript

This is also referred to as "deep copying", which I've found some articles on. Closest seems to be this one but it's for jQuery - I'm trying to do this without a library.
I've also seen, in two places, that it's possible to do something like:
arr2 = JSON.decode(JSON.encode(arr1));
But that's apparently inefficient. It's also possible to loop and copy each value individually, and recurs through all the arrays. That seems tiring and inefficient as well.
So what's the most efficient, non-library way to copy a JavaScript multi-dimensional array [[a],[b],[c]]? I am completely happy with a "non-IE" method if necessary.
Thanks!
Since it sounds like you're dealing with an Array of Arrays to some unknown level of depth, but you only need to deal with them at one level deep at any given time, then it's going to be simple and fast to use .slice().
var newArray = [];
for (var i = 0; i < currentArray.length; i++)
newArray[i] = currentArray[i].slice();
Or using .map() instead of the for loop:
var newArray = currentArray.map(function(arr) {
return arr.slice();
});
So this iterates the current Array, and builds a new Array of shallow copies of the nested Arrays. Then when you go to the next level of depth, you'd do the same thing.
Of course if there's a mixture of Arrays and other data, you'll want to test what it is before you slice.
I'm not sure how much better JSON.stringify and JSON.parse than encode and decode, but you could try:
JSON.parse(JSON.stringify(array));
Something else I found (although I'd modify it a little):
http://www.xenoveritas.org/blog/xeno/the-correct-way-to-clone-javascript-arrays
function deepCopy(obj) {
if (typeof obj == 'object') {
if (isArray(obj)) {
var l = obj.length;
var r = new Array(l);
for (var i = 0; i < l; i++) {
r[i] = deepCopy(obj[i]);
}
return r;
} else {
var r = {};
r.prototype = obj.prototype;
for (var k in obj) {
r[k] = deepCopy(obj[k]);
}
return r;
}
}
return obj;
}
As you asked for performance, I guess you also would go with a non-generic solution. To copy a multi-dimensional array with a known number of levels, you should go with the easiest solution, some nested for-loops. For your two-dimensional array, it simply would look like this:
var len = arr.length,
copy = new Array(len); // boost in Safari
for (var i=0; i<len; ++i)
copy[i] = arr[i].slice(0);
To extend to higher-dimensional arrays, either use recursion or nested for loops!
The native slice method is more efficient than a custom for loop, yet it does not create deep copies, so we can use it only at the lowest level.
Any recursive algorithm that doesn't visit the same node twice will be about as efficient as you get with javascript (at least in a browser) - in certain situations in other languages you might get away with copying chucks of memory, but javascript obviously doesn't have that ability.
I'd suggest finding someone who's already done it and using their implementation to make sure you get it right - it only needs to be defined once.

Javascript Array Length Behavior

Let arr = [1,2,3,4]. If I set arr[x] where x >= arr.length, arr.length becomes x + 1.
This happens on Firefox and Chrome. I have two questions:
Is this defined behavior? (source would be welcome)
Is doing this recommended?
Thanks!
Is this defined behavior?
Yes, see §15.4 of the spec.
Is doing this recommended?
It depends entirely on what end result you want. There's nothing wrong with doing it.
You'll quite commonly see arrays built up like this:
var a = [];
for (/*...some loop over things...*/) {
a[a.length] = /* ...something to put on the array... */;
}
...which is exactly the same as:
var a = [];
for (/*...some loop over things...*/) {
a.push(/* ...something to put on the array... */);
}
Some JavaScript engines process the a[a.length] = ... faster than the a.push(...) (others are the opposite).
Note that JavaScript arrays are sparse, they can have gaps in them, which is part of the reason for this behavior. (In fact, JavaScript arrays aren't really arrays at all.) You can assign assign to the length property.
Array indexes start from zero.
arr[0] == 1
arr[1] == 2
arr[2] == 3
arr[3] == 4
When you set arr[4], it becomes the 5th element.
Sure, you could do this in JavaScript.
The array will extend to the xth index, and place your value there.
The length of the array will be x+1.
The values in the indexes in between that were never defined, 4 to x-1 in your case, will be undefined.

Adding functions to javascript's Array class breaks for loops

I was looking for a way to add max/min functions to JavaScript's Array class, which seemed to be a solved problem: JavaScript: min & max Array values?. However, when I tried using that, I started getting errors from my code. It turns out that this approach doesn't work with loops.
for(i in myArray) { console.log(i) }
prints out
1
2
3
max
min
Is there another approach I can use?
The accepted solution solves your immediate problem, but extending core objects is generally a bad idea. What happens when you include a library later that uses for..in? Or when you forget months later and use the wrong approach in a different section of your code?
Another option is to wrap and extend. Create a new type that uses an instance of Array as its prototype:
function ArrayThing() {}
ArrayThing.prototype = new Array();
Now you've got an object that you can extend without affecting Array:
ArrayThing.prototype.max = function() {
return Math.max.apply(null, [].slice.call(this, 0))
}
ArrayThing.prototype.min = function() {
return Math.min.apply(null, [].slice.call(this, 0))
}
var list = new ArrayThing();
// standard array methods still work
list.push(5);
list.push(22);
list.push(0);
list.push(-14);
list.length // => 4
// as do your new custom methods
list.max() // => 22
list.min() // => -14
This won't work in every situation, but unless you're sure you really, really need an Array, this is a useful alternative.
The for...in loop is used for looping through properties of an object. If you want to get the values from your array, you can do this:
for (var i = 0; i < myArray.length; i++)
{
console.log(myArray[i])
}
for in is a common Javascript trap. Instead of behaving like a foreach from other languages, it actualy enumerates all properties in a given object.
Since Javascript Arrays happen to have a property for each index using for in works sometimes, but as you have seen, it also enumerates any other properties you add. Another issue is that the for in is not guaranteed to go through the properties in any particular order, so your results can vary depending on which browser/runtime you use.
It is safer, then, to just use a boring for loop instead. There are many for loop idioms in Javascript, so I will list some:
Regular for loop:
for(i=0; i<arr.length; i++){
Regular loop, caching the length:
for(i=0, n=arr.length; i<n; i++){
Loops over arrays of objects/NodeLists:
for(i=0; obj=arr[i]; i++){ //this works as long as the array has no falsy values
foo(obj)
You need to apply a check using hasOwnProperty.
However this needs to applied wherever you are looping.
i.e:
for(i in myArray)
{
if(arr.hasOwnProperty(i))
{
console.log(i);
}
}
There's a more modern (IE9+) way to do this now:
var g = [];
Object.defineProperty(g, "log", {
enumerable: false,
configurable: false,
writable: false,
value: function(){ console.log(this); }
});
g.push(5);
g.push(9);
var t;
for (t in g){
console.log(g[t]);
}
prints 5 and 9 but does not list the "log" function
g.log() -> echos [5,9]
The key to this working is being able to flag a property as "enumerable: false" with marks the property as something that shouldn't be iterated over.
More on Object.defineProperty here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

Categories

Resources