Created
September 12, 2017 23:23
-
-
Save 0bie/f4d63d799d40748f52efcfb8c1354727 to your computer and use it in GitHub Desktop.
Understanding JS value and reference
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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