references, values in Javascript | Chinese Rule of Eight

There are no pointers in Javascript

In JavaScript, a variable may store two types of data:

primitive
reference

JavaScript provides six primitive types as undefined, null, boolean, number, string, and symbol.
Reference are Objects and Arrays.

When you assign a variable a value, the JavaScript engine must determine whether the value is a primitive or a reference value.

If the variable stores a primitive value, when you manipulate its value, you are working on the actual value stored in the variable. In other words, the variable that stores a primitive value is accessed by value.

Unlike the primitive value, when you manipulate an object, you are working on the reference to that object, rather than the actual object. In short, a variable that stores an object is accessed by reference.

Assign by primitive values

Another explanation

var batman = 7; // batman initialized

var superman = batman; // assign by value: value 7 is copied, and stored in superman

superman++; // superman is assigned new value. batman is unaffected

console.log(batman); // 7

console.log(superman); // 8

Assign by Reference

When you assign a reference value from one variable a to another variable b, the value stored in variable a is the address an actual object in the heap. That value is also copied into the location of the new variable b.

The address of the actual object stored in the heap is now stored in both variables a and b. As the result, both variables are pointing to the same object.

Thus, if you were to modify by accessing the properties of the object, it will change the object in the heap because you are essentially “dereferencing” it.

If your reference gets assigned to new value, it now points to a whole different object in the heap.

var flash = [8, 8, 8];

var quicksilver = flash; // assign by reference. quicksilver points to flash.

quicksilver.push(0);

console.log(flash); // [8, 8, 8, 0]

console.log(quicksilver); // [8, 8, 8, 0]

Create new Reference

When a variable is assigned to a new Compound Value (Object, Array), that variable points away and onto the new Compound Value.

var firestorm = [3, 6, 3]; // firestorm points to array

var atom = firestorm; // atom points to firestorm's array.

console.log(atom); // [3, 6, 3]

console.log(firestorm); // [3, 6, 3]

atom = [9, 0, 9]; // atom now points away to another array (created new reference)

console.log(atom); // [9, 0, 9]

console.log(firestorm); // [3, 6, 3]

Passed by Value

In JavaScript, all function arguments are always passed by value. It means that JavaScript copies values of the primitive variables that you pass to a function into local variables. Any changes that you make to the local variables inside the function does not affect the arguments that you passed in. In other words, the changes to the arguments are not reflected outside the function.

http://www.javascripttutorial.net/javascript-pass-by-value/

function square(x) { // x is a parameter var. The value of agooDib gets copied into x.

console.log(x); // 10

x = x * x;

console.log(x); // 100

}

var y = 10;

square(y);

// since we've copied 10 into parameter var x, x can do as it wishes without affecting y.

// our y still has 10.

console.log(y); // 10

Compound values are Pass by value of the reference (function parameter passing)

When compound values (objects/arrays) are passed to functions, it passes the value of the reference. Simplest way is to just think of it as the parameter pointing to the compound object’s. Due to the parameter having the value of the reference of the compound value, if we access the property and change it, we are literally dereferencing the compound value, and changing it. Thus, the compound value will change.

If the parameter is assigned to something else, we are literally pointing it away to something. It will have the value of another reference.

var magneto = [8,4,8];

function Foo(x) {

x.push(99);

console.log(x); // [8, 4, 8, 99]

x = [1,4,1]; // reassign x to have value of reference for Array [1, 4, 1]

x.push(88); // since x has value of the array's reference, its push will apply to [1, 4, 1]

console.log(x); // [1, 4, 1 88]

}

Foo(magneto);

console.log(magneto); // [8, 4, 8, 99]

Change original value in compound variable passed into a function

Compound variables are passed into a function via value of the reference. Hence, the only way it to literally wipe out its original values, then push new ones.

var wolverine = [8,7,8];

function Woo(x) {

x.length = 0; // make empty array object

x.push(1,4,7,2);

console.log(x); // [1, 4, 7, 2]

}

Woo(wolverine);

console.log(wolverine); // [1, 4, 7, 2]

Reference a Compound Value

slice() creates your own array.
For primitives, it copies the values and each array has its own values.

But because we are dealing with objects, the array’s element will simply point the the object.

var a = { name: "not entered"};

var b = { skill: "nothing" };

var c = { address: "nowhere" };

var cisco = [a, b];

var zoom = cisco.slice();

zoom.push({type: "NA"});

console.log(zoom); // 3 items

console.log(cisco); // 2 items

cisco[1].skill = 'beg';

// zoom's [1] will also have 'beg'

How to store a scalar primitive value through assign-by-reference?

Storing a scalar primitive through assign-by-reference is very simple. Just wrap a compound value outside of it and that’s it.
In our case, we put a primitive value inside of an object. Passed that object into a function, and change that value.

var flash = { speed: 88 };

(function (x) { //IIFE

x.speed = 55;

})(flash);

console.log(flash.speed); //55