DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for JavaScript: Array, mutability & immutability
lassiecoder
lassiecoder

Posted on

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.

Alt Text

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

Alt Text

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

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

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

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

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

delete() & splice()

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

Alt Text

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

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

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

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

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

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

Top comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post