Using .shift() on function argument which affects the global array that is passed as the argument

Question

I am currently working on a javascript project for freeCodeCamp.com and i'm running into a problem with an array.

The project is to recreate the game 'Simon'. I am doing this by generating a random number and pushing that into an array (correctPattern), and then passing that array into a function that will play the audio/visual animations accordingly.

Problem is, I am using .shift on the function argument('sound') and calling the function recursivly to cycle through the array until it's empty. When I do this, somehow, it does this to the global array. So once the array is passed to the function, the function argument(array) is trimmed using shift and that applies to the global array as well.

I was under the impression that the function argument is equal to the item passed, but changing the argument will not affect the actual item passed. Is that incorrect? If so, how can I perform this function properly?

The only reason i'm using this method is because I need to use setTimeout for a delay in between audio files played in the game, otherwise they are all played at once.

Here is a copy of the important parts of the code.

//ANIMATE DIV BUTTON & PLAY RELATIVE AUDIO FILE
        function animateMoveList(sound){
          var soundFile = parseInt(sound[0]);
            if(sound.length > 0){
              $(".circle").removeClass('highlighted');
                switch(soundFile){
                    case 1:
                      $(".circle1").addClass('highlighted');
                      audio1.play();
                      break;
                    case 2:
                      $(".circle2").addClass('highlighted');
                      audio2.play();
                      break;
                    case 3:
                      $(".circle3").addClass('highlighted');
                      audio3.play();
                      break;
                    case 4:
                      $(".circle4").addClass('highlighted');
                      audio4.play();
                      break
                 }
                setTimeout(function(){
                  if(typeof sound !== 'string'){
                    sound.shift();
                  } else {
                    sound = [];
                  }
                  $(".circle").removeClass('highlighted');
                  animateMoveList(sound);
                }, 1000);

            }

        }
        function comparePatterns(){

        }
        //GENERATE RANDOM NUMBER, PUSH TO correctPattern AND PLAY ANIMATION
        function pcMove(){
          var randomNumber = Math.floor(Math.random() * 4 + 1);
          correctPattern.push(randomNumber);
          setTimeout(function(){
              console.log(correctPattern);
              animateMoveList(correctPattern);
              userTurn = true;
          }, 500);

        }

using .slice() works, thank you. Solving the problem wasn't a big deal, i'm sure there are so many ways to tackle the issue. Really, i'd like to understand why this is happening. Thanks again! — asef, Dec 24 '15 at 00:38
@NickolasGettel i have tried to explain this in my answer. Also to know more about the "mixed" passing in JS check out http://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language — AhmadAssaf, Dec 24 '15 at 00:44

AhmadAssaf · Accepted Answer · 2015-12-24T00:53:12.017

Javascript arrays are passed by reference, if you make any changes to the array inside the function, these changes are saved in the original array.

To pass the array by value (a copy of the array is passed) which means that changes that made to the passed array won’t be saved in the original array. This can be done by using the native array method – “slice()” – as described in any javascript language reference. The ‘slice’ method in this case will return a shallow copy of the array.

References:

Thanks for that explanation and references! – asef Dec 24 '15 at 00:50 — asef, Dec 24 '15 at 00:50

Using .shift() on function argument which affects the global array that is passed as the argument

1 Answers1