JavaScript: Array, mutability & immutability

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.

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

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.

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.

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.

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:

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.

delete() & splice()

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

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()

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.

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.

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:

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.

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