JSFiddle - React, Tailwind, and code Playground

HTML

<p>I would not expect foo to change at all in this example, but when I modify it as an array in the function, it changes the argument.  Notice foo is not changed by function1...I guess because it doesn't modify the argument directly??? Any help avoiding this would be greatly appreciated.</p>

JavaScript

var foo = [1,2,3];
var bar;
                     //Sorry this is ugly...just ignore these.
                     $('p').html( $('p').html() + '<br /><br />' + 'foo before function1 = ' + foo);
                     $('p').html( $('p').html() + '<br />' + 'bar before function1 = ' + bar);
bar = function1(foo);
                     $('p').html( $('p').html() + '<br /><br />' + 'foo after function1 = ' + foo);
                     $('p').html( $('p').html() + '<br />' + 'bar after function1 = ' + bar);
bar = function2(foo);
                     $('p').html( $('p').html() + '<br /><br />' + 'foo after function2 = ' + foo);
                     $('p').html( $('p').html() + '<br />' + 'bar after function2 = ' + bar);
bar = function3(foo);
                     $('p').html( $('p').html() + '<br /><br />' + 'foo after function3 = ' + foo);
                     $('p').html( $('p').html() + '<br />' + 'bar after function3 = ' + bar);


function function1(newFoo){
    newFoo = [newFoo,'a',1];
    return newFoo;
}


function function2(newFoo){
    newFoo[0] = 'a';
    return newFoo;
}


function function3(newFoo){
    newFoo.push('4');
    return newFoo;
}