JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

HTML

<div id="result">
</div>

JavaScript

(function(){
    var val = $("#result").html(),
        $result = $("#result");
    
    var passValues = function(){
        var valueByValue = "Hello";
        var valueByReference = ["Foo"];
        
        //here we see the original value of valueByvalue
        $result.html(val += "<br>Value before: " + valueByValue);
        
        //now call the function passing the parameter by value
        byValue(valueByValue);
        
        //now prove that the original value has remained unchanged
        $result.html(val += "<br>Value after: " + valueByValue);
        
        //here we see the original value of valueByReference
        $result.html(val += "<br>Reference before: " + valueByReference.join(''));
        
        //now call the function passing in the parameter by reference
        byReference(valueByReference);
        
        //prove that the original value was changed in the function
        $result.html(val += "<br>Reference after: " + valueByReference.join(''));
    }
    
    var byValue = function(value){
        value += " World";
        
        //here we see the new value inside the function, however the original variable will
        //remain unchanged   
        $result.html(val += "<br>Value in: " + value);
    };
 
    var byReference = function(value){
        value.push("bar");
        
        //changing the value by reference will also change the original value
        $result.html(val += "<br>Reference in: " + value.join(''));        
    }     
                          
    passValues();
}());