JavaScript: Array, mutability & immutability
Tags: opensource, javascript, webdev
Published: 2020-07-10 17:23:34

**length()**

- The length property is used to find out the size of that object.
- It’s used with many objects like JavaScript string, JavaScript array, etc.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jser06fkev1zr74y8tkj.png)

- Every Array object has a length property whose value is always a non-negative integer less than 2²³ (i.e; 4294967296)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/46jaulu59hfyf67nyuu0.png)

In the above code, the value of arr is equal to 2²³ that’s why we’re getting the error “RangeError: Invalid array length”. To overcome the error we can set the array length less than 2²³ and as an array should be a non-negative integer that’s why we’re getting the error for arr1

- When we extend an array by changing the length property than the number of actual element increases which causes the remain increased element to be a non-iterable empty slot.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p7guumovga25eqj0yujd.png)

**map()**

- It’s used to manipulate each and every array element of an array.
- The map object holds key-value pairs and remembers the original insertion order of the keys. ~MDN
- map() function is immutable (i.e; unalterable)
- Immutable refers to the objects whose state can’t be changed once the object is created.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wa2fh16uylh89yky3oy5.png)

In the above code, myFullName equals to Elon Musk and myFirstName equals to Elon states that once the string value is created, it can never change.

- No string methods change the string they operate on, they just return new strings. In fact, numbers, strings, and booleans all are immutable.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4mg0wjui35dk6kq69a8o.png)

In the above example output is 35 but the initial values (i.e; 5 and 7) doesn’t change.

**Why immutable code is better than the mutable code in javascript?**

An object whose state can be changed once the object is created is a mutable object while in case of an immutable object, the state can’t be changed once the object is created.

Now let’s take an example:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/074z1pqrdp0wwa0n8gou.png)

In the above code what I had done is rather than changing the object property I created a whole new object.

**What’s the benefit?**
- Immutability increases predictability
- Allows for mutation tracking
- Avoiding a reference clash

**push() & pop()**

- push() helps to add items to the end of an array and returns the new length of an array.
- pop() removes the last element of an array and returns that element.
- In the case of an empty array or if the length of an array is 0, pop() returns undefined.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qdhdoj0cus71rdw64qg0.png)

**delete() & splice()**

- delete() used to delete object properties.
- It won’t affect the length of an array.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wz737ynxvx53b9ueifvw.png)

So, the conclusion is that even after deleting the element the length of the array is the same as before.

To overcome with this bug we can use splice()

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t6fluy2y1yqi6q1ea7jl.png)

**filter()**

- filter() method creates a new array with all elements that pass the test implemented by the provided function. ~MDN
- It’s immutable and introduced in ES6
- This method returns an array containing elements of the parent array that match the set test.
- It has a single parameter, a callback method which triggered as the filter method iterates through the array elements.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wf0wyqb4b91jkn5sftvp.png)

In the above example, I took a test function (i.e; “> 50”) which returns a new array containing the elements that matched the set test.
But in case of next test function (i.e; “> 90”) returns an empty array because of no matches.

**shift() & unshift()**

- shift() removes the element from the beginning of the array, returns the element that has been removed, update the indexes and the length property.
- unshift() add the element to the beginning of an array. It mutates the original array and returns the length of the original array after mutation.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0ef9qtki0ndguwrfldzo.png)

**reduce()**

- The reduce() method executes the reducer function on each element of the array, resulting in a single output value.
- It comes with some terminologies like reducer and accumulator.
- The reducer is what action we’ll perform in order to get one value.
- The accumulator accumulates callbacks return values.

Let’s take an array calc and add all the numbers existing in the array:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hxqdndcopcr68el7ilz0.png)

So this conclusion is, by using a reduce() method we can reduce all the elements of the array into a single value. Where the single value can be a number/string/object.

**NOTE: reduce() vs reduceRight()**

reduce() method starts at the first element from left-to-right towards the last, whereas the reduceRight() method starts at the first element from right-to-left towards the last.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7xny6n1hz8erlm0tiuou.png)

**React if you liked my article, for better reach! :)**