JavaScript loop and array

Question

I am very new to JavaScript and struggling through a book and completing exercises.

Can someone help explain to me what is happening in this loop and what is being stored in the array at the end?

I understand that it is setting image.src to "href" value in the HTML, but why does it need link before getAtribute? Where is it storing the "href" and the "title"?

"use strict";
var $ = function (id) { return document.getElementById(id); };
var imageCache = [];

var i, link, image;
for ( i = 0; i < links.length; i++ ) {
    link = links[i];
    image = new Image();
    image.src = link.getAttribute("href");
    image.title = link.getAttribute("title");
    imageCache[imageCache.length] = image;
}

Thanks in advance for your help! This community has been a lifesaver while working though this.

You should show us where you define links your code is uncompleted... — Zakaria Acharki
– Zakaria Acharki, Commented Sep 19, 2018 at 18:17
it's interesting that the last line does imageCache[imageCache.length] = image when it could just do imageCache.push(image) which will automatically add an item to the end of the array — Abdul Ahmad
– Abdul Ahmad, Commented Sep 19, 2018 at 18:19
@ZakariaAcharki Sorry! var links = listNode.getElementsByTagName("a"); Is there a benefit from using imageCache[imageCache.length] = image? — Ashley Sullivan
– Ashley Sullivan, Commented Sep 19, 2018 at 18:31

gmoniava · Accepted Answer · 2018-09-19 18:26:59Z

1

but why does it need link before getAtribute

If you google getAttribute, you can see that it is a method called on a HTML element. So links seems to be an array of HTML elements (probably link elements).

Where is it storing the "href" and the "title"?

It stores them as properties of this object: image = new Image().

edited Sep 19, 2018 at 18:26

answered Sep 19, 2018 at 18:19

gmoniava

28.9k9 gold badges61 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ashley Sullivan Over a year ago

Thanks very much for your response. Sorry I forgot to include this in the snippet: var links = listNode.getElementsByTagName("a"); Does the above store all the items on the list with a tag of "a" in an array?

gmoniava Over a year ago

@AshleySullivan yes, roughly it is like that; all "a" items beneath listNode. It creates array of image objects where each image holds some properties of those "a" elements.

Ashley Sullivan Over a year ago

Thank you so much! It makes much more sense to me now.

Michael Tallino · Accepted Answer · 2018-09-19 18:24:00Z

0

As mentioned in a comment you didn't show us what the links array looks like. However, assuming it's an array of DOM element links, here's a walkthrough of that code:

"use strict";
var $ = function (id) { return document.getElementById(id); };
var imageCache = [];

var i, link, image;
//looping through every element of links array
for ( i = 0; i < links.length; i++ ) {
    link = links[i]; //this is the link we're at in the loop, making it easier to reference
    image = new Image(); //creating a new Image element
    image.src = link.getAttribute("href"); //set the src attribute of the image to the href of the link
    image.title = link.getAttribute("title"); //set the title of the image to the title of the link
    imageCache[imageCache.length] = image; //put the image in the imageCache array for use later
}

That being said, I think you might look into Array.map() as an alternative way to transform the one array of links into another array of images.

answered Sep 19, 2018 at 18:24

Michael Tallino

8214 silver badges16 bronze badges

2 Comments

Ashley Sullivan Over a year ago

Thanks so much for your response. Yes, links[] is an array of DOM elements. Sorry for not posting that. So when it sets the src attribute of the image to the href of the link and sets the title of the image to the title of the link, it stores that information as well with the image in the imageCache array? Thanks,

Michael Tallino Over a year ago

@AshleySullivan you are correct. You can always throw a console.log(imageCache) at the end to see what imageCache contains in the console

Collectives™ on Stack Overflow

JavaScript loop and array

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related