For jQuery purist - simple array filling?

Question

• What is the best way to do loops in JavaScript
  • http://blogs.oracle.com/greimer/entry/best_way_to_code_a
  • http://api.jquery.com/jQuery.each/
  • http://api.jquery.com/each/

I still for my own education want to see an elegant jQuery version of a construct like this - Note the image filenames are 1 based and not 0 based :

var nofImages = 10; // user defined
var slideShowArray = new Array(nofImages); // cannot use [nofImages] of course
for (var i=0, n=slideShowArray.length;i<n;i++) {
 slideShowArray[i]="/images/image"+(i+1)+".jpg";
}

or perhaps according to the above mentioned articles it should be

var nofImages = 10; // user defined
var slideShowArray = [];
for (i=nofImages;i>0;i--) {
 slideShowArray[(i-1)]="/images/image"+i+".jpg";
}

Thanks

Answer 1

var slideShowArray = $.map(new Array(10), function(i,j) {
 return '/images/image'+(j+1)+'.jpg';
});

In Javascript 1.8 you will be able to do this more elegantly:

var slideShowArray = $.map(new Array(10), function(i,j) '/images/image'+(j+1)+'.jpg');

or even

$.range = function(first,last,step) {
 step = step || 1;
 if (typeof last == undefined) {
 last = first;
 first = 0;
 }
 return $.map(Array((first-last)/step), function(i,j) {
 return j*step + first;
 });
}
var slideShowArray = ['/images/image'+i+'.jpg' for (i in $.range(1,10))];

• mplungjan: That is more what I was looking for. In your example the "i" is not interesting since it is just a necessary placeholder for the empty initialised array element, right?
• Tgr: Indeed, first parameter is array element, second is array index. You could write function(_,i) {...+(i+1)+...} if you like that sort of stuff.
• mplungjan: Great. Not sure I like the 1.8 versions at all.. I want my curly brackets ;)

Answer 2

Trying to be a jquery purist you might want to try the .map() method.

var noOfImages = 10;
var slideShowArray = [];
slideShowArray[noOfImages - 1] = ""; // set initial size
slideShowArray = $.map(slideShowArray, function(element, index) {
 return "/images/image"+index+".jpg"
});

But I think this would be simpler:

var noOfImages = 10;
var slideShowArray = [];
for(var i = 0; i < noOfImages; i++) 
 slideShowArray.push("/images/image"+i+".jpg");

(Note that your examples are a bit broken - setting the array to [noOfImages] sets the length to 1.)

• mplungjan: Sorry. Mixed my initialiser from new Array(nofImages) and []. However your second example is another non-jquery example. It is broken too ;) It does not use 1 based image names. I wanted to find a plausible jQuery each-type script to see if it was too horrible to use or not ;)
• Tgr: "Initializing" the array by setting the last element is not safe - the current behavior of map might be to walk from 1 to the last index, and not skip unset indexes, but there is no promise in the jQuery API to behave that way.
• sje397: @mplugjan: nope, your image names are broken ;)
• mplungjan: Haha, Not mine. I always use 0 based names or SEO best practise names