Skip to content

Instantly share code, notes, and snippets.

@0bie
Created September 12, 2017 23:23
Show Gist options
  • Save 0bie/f4d63d799d40748f52efcfb8c1354727 to your computer and use it in GitHub Desktop.
Save 0bie/f4d63d799d40748f52efcfb8c1354727 to your computer and use it in GitHub Desktop.
Understanding JS value and reference
// 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment