Primitive values vs Reference values - Javascript
Tags: javascript, webdev, beginners, programming
Published: 2022-12-29 12:35:47

In JavaScript, variables can hold two types of values: `primitive values` and `reference values`.

`Primitive values` are simple data types that contain a single value. In JavaScript, there are five primitive data types:

`Boolean`: a true or false value
`Null`: a special value that represents an empty or null value
`Undefined`: a special value that represents a value that has not been set or is not available
`Number`: a numeric value
`String`: a sequence of characters

`Reference values`, on the other hand, are objects that contain a **reference** to the **memory location** of the value they represent. This means that when you assign a **reference** value to a variable, you are not creating a new copy of the value, but rather creating a new **reference** to the original value.

For example:

```js
let x = 10;
let y = x;

console.log(x); // Output: 10
console.log(y); // Output: 10

x = 20;

console.log(x); // Output: 20
console.log(y); // Output: 10
```
In this example, `x` and `y` are both primitive values of type `Number`, and the assignment `y = x` creates a new copy of the value of `x` and assigns it to `y`. Therefore, when we change the value of `x` to **20**, it does not affect the value of `y`.

If we were to use reference values instead:

```js
let x = { value: 10 };
let y = x;

console.log(x); // Output: { value: 10 }
console.log(y); // Output: { value: 10 }

x.value = 20;

console.log(x); // Output: { value: 20 }
console.log(y); // Output: { value: 20 }
```
In this example, `x` and `y` are both reference values that point to the same object. The assignment `y = x` does not create a new **copy** of the object, but rather creates a new **reference** to the original object. Therefore, when we change the value of the value property of the object, it is reflected in both `x` and `y`.

Here is an example of a more advanced use of reference values in JavaScript:

```js
function updateObject(obj) {
  obj.value = 20;
}

let obj1 = { value: 10 };
let obj2 = { value: 10 };

updateObject(obj1);
console.log(obj1.value); // 20
console.log(obj2.value); // 10

// In this example, we have a function that takes an object as an argument and
// updates its value property to 20. We then create two objects, obj1 and obj2,
// with a value property set to 10. When we pass obj1 to the updateObject function,
// the value of obj1.value is updated to 20. The value of obj2.value remains unchanged,
// because it is a separate object and was not passed to the function.

let arr1 = [1, 2, 3];
let arr2 = [1, 2, 3];

function updateArray(arr) {
  arr[0] = 10;
}

updateArray(arr1);
console.log(arr1); // [10, 2, 3]
console.log(arr2); // [1, 2, 3]

// In this example, we have a function that takes an array as an argument and
// updates the first element to 10. We then create two arrays, arr1 and arr2,
// with the same values. When we pass arr1 to the updateArray function,
// the first element of arr1 is updated to 10. The first element of arr2 remains unchanged,
// because it is a separate array and was not passed to the function.
```

This example might be little bit hard for beginners. But, still give it a try:

```js
const originalObject = {
  value: 10,
  nested: {
    value: 20,
    deeperNested: {
      value: 30
    }
  }
};

let copiedObject = Object.assign({}, originalObject);

console.log(copiedObject.value); // 10
console.log(copiedObject.nested.value); // 20
console.log(copiedObject.nested.deeperNested.value); // 30

originalObject.value = 100;
originalObject.nested.value = 200;
originalObject.nested.deeperNested.value = 300;

console.log(copiedObject.value); // 10
console.log(copiedObject.nested.value); // 20
console.log(copiedObject.nested.deeperNested.value); // 30

// In this example, we have an originalObject with a nested structure and three values.
// We use the Object.assign() method to create a copy of the originalObject and assign it to copiedObject.
// We then log the values of the properties in copiedObject to the console.
// Next, we update the values of the properties in the originalObject.
// Finally, we log the values of the properties in copiedObject again, to see if they were affected by the changes to the originalObject.
// As we can see, the values in copiedObject remain unchanged, because it is a separate object with its own copy of the values.
```

## Conclusion
It's important to understand the difference between `primitive values` and `reference values` in JavaScript, as it can have significant implications when working with variables and objects.