Understanding JS value and reference

value-reference.js

// JS has 5 data types that are assigned by value:
// `Boolean`, `String`, `Number`, `null`, `undefined` (primitives)
// JS has 3 data types that are assigned by reference:
// `Array`, `Function`, `Object` (objects)

var x = 1, y = '1', z = undefined;

// When we assign these vars to other vars we copy the value to the new var

var a = x, b = y, c = z;

console.log(x,y,z,a,b,c); // => 1,"1",undefined,1,"1",undefined

// the vars are stored in memory and point to different locations
// `a = x`: copy the value stored in location `x` to location `a`

a = 2, b = '2', c = null;
console.log(x,y,z,a,b,c);

// Re-assigning the vars doesn't affect the original reference
// `a = 2`: update the value stored in location `a` to 2; `x` is still 1

// Vars that are assinged a non-primitive value (objects) are given a reference to that value
// That reference points to the object's location in memory. The vars don't actually contain the value

// Objects are copied by reference instead of value
var x = [1], y = x;
y.push(2);
console.log(x,y); // => [1,2] [1,2]

// `var x = [1]`: create an array in memory and point variable `x` to its location
// `y = x`: reference the same array found in location `x`
// `y.push(2)`: update the array that is stored in location `x`
// Both `x` and `y` now point to the same location which has an array as its value

var x = {a: 1};
x = {b: 2};

// Re-assigning an object changes the location of the var
// `var x = {a: 1}`: create an object in memory and point `x` to its location
// `x = {b: 2}`: create another object in memory and update location `x` to point to it

// If an object no longer has a reference e.g `{a: 1}` it is deleted from memory

// When we pass primitives into a function as an arg the function copies the values into its params
var a = 1, b = 2;

function multiply(x,y) {
  return x * y;
}
var c = multiply(a,b); // => 2

// `multiply(a,b)`: copy the value stored in location `a` and `b` to location `x` and `y`
// that is equivalent to `x = a` and `y = b`

// Impure Function
function foo(obj) {
  obj.a = 1;
  return obj;
}

var x = {a: '1', b: 2};
var y = foo(x);

console.log(x); // => {a: 1, b: 2}
console.log(y); // => {a: 1, b: 2}

// The function is impure because it acts on the reference object `x` which is outside of its scope
// `var x = {a: '1', b: 2}: create an object in memory and point `x` to its location
// `foo(x)`: reference the same object found in location `x`; similar to `var obj = x`
// This means that `obj.a = 1` changes the property on the referenced object

// Pure Function
function bar(obj) {
  var x = Object.assign({}, obj);
  x.a = 1;
  return x;
}
var y = {a: '1', b: 2};
var z = foo(y);
console.log(y); // => {a: '1', b: 2}
console.log(z); // => {a: 1, b: 2}

// The function is pure because it acts on a newly created object which is only available within its scope
// `var y = {a: '1', b: 2}`: create an object in memory and point `y` to its location
// `bar(y)`: create a new object based on the referenced object in location `y` (`Object.assign()`)
//  This means that `x.a = 1` changes the property on the newly created object instead of the reference in location `y`

// Example Test
function changeAgeAndReference(person) {
    person.age = 25;
    person = {
        name: 'John',
        age: 50
    };
    
    return person;
}
var personObj1 = {
    name: 'Alex',
    age: 30
};
var personObj2 = changeAgeAndReference(personObj1);
console.log(personObj1); // -> ?
console.log(personObj2); // -> ?

// https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0