0

I have an array of images, that I got from facebook. In a for loop I assign an element of the array to a new variable. I then change the variables source to a different one, but with it the source of the arrays element changes too.

function getImages(){
    var images = document.querySelectorAll('div.userContentWrapper img');
    return images;
}

function getImageHeight(image){
        return image.height;
}

function getImageWidth(image){
        return image.width;
}

function replaceImages(images) {
        var baseImageUrl, height, width, image;
                baseImageUrl = 'http://placekitten.com/g/';

        for (var i=0, len=images.length; i<len; i++){
                image = images[i];
                height = getImageHeight(image);
                width = getImageWidth(image);
                image.src = baseImageUrl + width + '/' + height;
        }
}

I don't understand why does the element images[i] change when we change image.src If I had any say in this, I would have put images[i].src = image.src; at the end of the loop, but it seems like that isn't necessary. Maybe someone can recommend what I should read up to understand this issue better.

Also, is it necessary/advisable to create so many small functions?

This is my first question here, so I apologize, if I wasn't clear enough or the question isn't good enough

Robert
  • 13
  • 1
  • 7
  • 3
    `image` and `images[i]` refer to the *same image*. – Niet the Dark Absol Jan 24 '17 at 18:33
  • 2
    And calling such functions is a waste of time. Just use `image.width`, seriously. – Niet the Dark Absol Jan 24 '17 at 18:34
  • 1
    1) You do not need to create helper functions for dereferencing properties from an object... only if you are actually performing logic that you feel should be pulled out into a separate function. 2) The reason your object in the array changes when the object you referenced from the array changes is because they are the same object. Array deferencing via index (ie: images[i]) creates a reference to the same object, not a copy of it. Here is a great answer on creating clones of objects: http://stackoverflow.com/a/728694/632676 – GPicazo Jan 24 '17 at 18:37
  • In JavaScript, things are assigned by reference, not by value `image = images[i];` so change in `image` will also update `images[i]`; – itzmukeshy7 Jan 24 '17 at 18:40
  • @GPicazo Could you, please, explain what does *dereferencing properties from an object* mean? – Robert Jan 24 '17 at 18:44
  • Object's properties are passed as a reference, not as new ones. You could create a new object copy when assigning it to a variable. – Josué Zatarain Jan 24 '17 at 18:52
  • @Robert - Dereferencing means to get the value (or data) stored in the memory location specified by a reference (also called pointers in other languages). In javascript, objects are passed/assigned by reference, meaning that an object variable does not really hold the value of the object, but instead, the reference to its location in memory. In your example, `image = images[i];` just created a new variable, image, that points to the same location as images[i]; therefore pointing to the same object. Object properties (ie: image.src) also point to the corresponding property in memory. – GPicazo Jan 24 '17 at 19:27
  • @GPicazo Thanks a lot. You explained it perfectly :) – Robert Jan 24 '17 at 20:18

0 Answers0