Having trouble with variable reference in javascript

Question

I'm trying to derive 4 points on a grid from an original point. These include left, right, bottom and top by one unit.

If I start out with [4, 5] my output should be [3, 5] [5, 5] [4, 4] [4, 6].

I could probably look up how to do this but instead I've been playing with my own method, and I think my logic is sound, yet I'm having a simple issue with JavaScript itself where when I declare var tempArr = cords;, from thereon out, any changes to tempArr appear to be affecting cords. I've never had this problem before, here is the code.

var output = [],
    cords = [4, 5];

var convertToCords = function(i){
    var tempArr = cords;
    var offset = ( ( i%2 ) * 2 ) - 1, // -1, 1, -1, 1
        index = Math.floor(i/2);      // 0, 0, 1, 1
    tempArr[index] = cords[index] + offset;
    return tempArr;
}

for (var i = 0; i < 4; ++i){
    console.log(cords);    
    newCords = convertToCords(i);
    var x     =   newCords[0],
        y     =   newCords[1];
    array[i] = "[" + x + ", " + y + "]";
}
console.log(output);


tempArr[index] = cords[index] + offset;

The question: Can anybody spot why when I do something to tempArr, cords is affected too? Should I be declaring tempArr in another manner?

See the jsFiddle

Blender · Accepted Answer · 2013-06-09 01:01:46Z

2

var tempArr = cords; is your problem. cords and tempArr refer to the same array object, even though the variable names are different. You need to make a clone of your original array:

var tempArr = cords.slice(0);

edited Jun 9, 2013 at 1:01

answered Jun 9, 2013 at 0:43

Blender

300k55 gold badges462 silver badges511 bronze badges

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

4 Comments

jamil Over a year ago

This seems counter intuitive, any insight into why it's this way? Your solution fixed the problem so I'll mark this answered, but I'm still baffled by this behavior. Using slice also seems like a workaround, are there others?

Blender Over a year ago

@Jamil: What makes you think it's unintuitive? As for .slice(), that's how you make a shallow clone of an array object.

jamil Over a year ago

Perhaps because I'm used to php where I would have to add & to get this behavior. Pretend you didn't have your experience and were newer to this like me. Can't you agree it's counter intuitive because you're adding operation to an object simply trying to make an exact clone? Either way thanks for the help!

Blender Over a year ago

@Jamil: I'd find it more counter-intuitive if the language decided to clone objects for me.

Collectives™ on Stack Overflow

Having trouble with variable reference in javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related