DEV Community: Umid Negmatullayev

Why Immutability is important in JavaScript?

Umid Negmatullayev — Fri, 07 May 2021 22:54:27 +0000

In JavaScript, Primitive data types (numbers, strings, etc) are immutable but when it comes to objects and arrays they are mutable, please do not think that if you declare your objects and arrays with const it will be constant which is unchangeable:

const obj = {
  a: "apple"
}
const updatedObj = obj
updatedObj.a = "banana"
console.log(obj.a) // "banana'

As you can see when we update updatedObj's value, it updates the original object variable obj as well. The reason behind it, objects copy by reference, which means when we do const updatedObj = obj updatedObj is referencing/pointing to obj's memory address, so if we update the updatedObj we update obj because they are pointing the same value. But in the case of primitive data types (numbers, strings, boolean, undefined, etc) is the opposite.

All primitives are immutable, i.e., they cannot be altered. It is important not to confuse a primitive itself with a variable assigned a primitive value. The variable may be reassigned a new value, but the existing value can not be changed in the ways that objects, arrays, and functions can be altered. ~ MDN

Here we can see examples where strings and numbers are not changing.

const num = 39
let updatedNum = num

updatedNum = 45
console.log(num) // 39

const str = "lion"
let updatedStr = str

updatedStr = "tiger"
console.log(str) // "lion"

Why do we care about immutability? If JavaScript was built this way then there must be a reason. Yes, it's because JavaScript is a multiparadigm language you can use it as OOP, you can use it as FP (functional programming).
Functional programming embraces immutability and heavily practices persistent data structure. And new libraries like React and Redux take the advantages of immutability, like in Redux, store is one giant, plain JS object, immutable one and this gave the possibility for redux time travel where you can see the previous states/changes or in React you can check the previous values of your local states, they all come from the object immutability.

Here is a simple example of creating an immutable object in JS:

const obj = {
  a: "apple"
}
const updatedObj = Object.assign({}, obj)
updatedObj.a = "banana"

console.log(obj.a) // "apple"
console.log(updatedObj.a) // "banana"

Now we do not mutate our original object obj.

We will have more practical examples on "How not to mutate your objects and arrays" in the next articles.

More about Object.assign()

You might ask a question 🙋‍♂️ , "Wait if we do not mutate our object value? Then that must be lots of memory consumptions? " ~ You are not wrong!

That's where comes structural sharing, you don't want to deep copy the object but shallow copy it. Just like git does not copy your whole versions of your code but shares the files that are not changed with the previous commit.

Object.assign() method does shallow copying. But there is one downside to it, if you have nested object properties, they will not be immutable.

const obj = {
  a: "apple",
  b: {
    c: "lemon"
  }
}
const updatedObj = Object.assign({}, obj)
updatedObj.a = "mango"
updatedObj.b.c = "banana"

console.log(obj.a) // "apple"
console.log(obj.b.c) // "banana"

b: { c: "lemon" } is not immutable here as it's nested property, we will see examples of how to make objects and arrays immutable including nested (complex structures) ones as well.

So shallow copying will not take lots of memory consumptions.

Immutable Objects

Using Object.assign()

let obj = {
  a: "apple"
}
let updatedObj = Object.assign({}, obj)
updatedObj.a = "banana"

console.log(obj.a) // "apple"
console.log(updatedObj.a) // "banana"

Using Object Spread Operators:

 let obj = {
  a: "apple"
}
let updatedObj = { ...obj }
updatedObj.a = "banana"

console.log(obj.a) // "apple"
console.log(updatedObj.a) // "banana"

Spread Operators are new ES6 syntax, similar to Object.assign() method, it does shallow copying.

For complex data structure:

let obj = {
  a: "apple",
  b: {
     c: "lemon"
  }
}
let updatedObj = {...obj, b: { ...obj.b } };
updatedObj.a = "banana"
updatedObj.b.c = "peach"

console.log(obj.a) // "apple"
console.log(obj.b.c) // "lemon"
console.log(updatedObj.a) // "banana"
console.log(updatedObj.b.c) // "peach"

If you have nested object properties let updatedObj = {...obj, b: { ...obj.b } }; you can do nested spread with the property name.

Immutable Array

1.Array Spread Operators

let arr = [1, 2, 3, 4]
let updatedArr = [...arr]
updatedArr[2] = 5

console.log(arr[2])// 3
console.log(updatedArr[2])// 5

Array spread operators are the same as object spread operator, actually they are spread operators learn more here.

2.Using slice() method:

let arr = [1, 2, 3, 4]
let updatedArr = arr.slice(0, arr.length);
updatedArr[2] = 5

console.log(arr[2]) // 3
console.log(updatedArr[2]) // 5
console.log(updatedArr) // [1, 2, 5, 4]

slice() cuts the array from the index (first argument) until the index you want (second argument), but it won't affect the original array. There is splice() array method, it's the opposite of slice() it changes the content of the original array learn more on slice here, learn more on splice.

3.Using map(), filter():

let arr = [1, 2, 3, 4]

let updatedArr = arr.map(function(value, index, arr){
  return value;
});
updatedArr[2] = 5

console.log(arr[2]) // 3
console.log(updatedArr[2]) // 5
console.log(updatedArr) // [1, 2, 5, 4]

map() returns a new array, takes a callback function as an argument and calls it on every element of the original array. Callback function takes value(current iterated value), index (current index), array(original array) arguments, all of them are optional learn more here.

filter()

let arr = [1, 2, 3, 4]

let updatedArr = arr.filter(function(value, index, arr){
  return value;
});
updatedArr[2] = 5

console.log(arr[2]) // 3
console.log(updatedArr[2]) // 5
console.log(updatedArr) // [1, 2, 5, 4]

filter() and map() works the same way learn more here.

They both return a new array. map() returns a new array of elements where you have applied some function on the element so that it changes the element. filter() returns a new array of the elements of the original array (with no change to the elements). filter() will only return elements where the function you specify returns a value of true for each element passed to the function.

There is one more method for array reduce(), it will not return new array, but it will do immutable operations on an original array.

let arr = [1, 2, 3, 4];
// 1 + 2 + 3 + 4
const reducer = (accumulator, currentValue) => accumulator + currentValue;

let updatedArr = arr.reduce(reducer)
console.log(updatedArr) // 10

reduce() could be confusing at the beginning, but I will try to explain as simply as possible. Let's look at the example below:

let sum = 0;
let i = 0;
while (i<arr.length){
  sum+=arr[i]; // 1 + 2 + 3 + 4
  i++;
}

console.log(sum) // 10

It just a loop that sums all the values of an array. We are trying to do the same thing with reduce().

reduce() takes reducer callback which is a function takes 4 arguments, accumulator, currentValue, currentIndex, originalArray. Accumulator saves the value which is returned from last iteration, just like sum variable in our loop example, current value is arr[i]. That's reduce learn more here.

I hope 🤞 it all makes sense.

Extra Resources:

This answer here gives a great explanation on "why is immutability important?",

Structural sharing,

More on immutable methods of array and object

JavaScript functions are first-class objects.

Umid Negmatullayev — Sat, 10 Apr 2021 07:27:19 +0000

In JavaScript, functions are first-class objects (first-class citizens) where they are treated like any other variable. Functions can be stored in variables, can be passed as parameters in other functions, and can be returned from other functions.

1.Storing function in a variable

function division(a, b) {
   return a/b;
}

const res = division;

In const res = division, we did not execute the function but reference the function.

Mostly invoking/executing the function requires () parentheses in JavaScript. Otherwise, it's a reference to the function itself

Invoking:

console.log(res(21, 7)) //3

2.Passing function as an argument.

function multiply(a, b, fn) {
  return fn(a,b) * 3
}

const res = multiply(21, 7, division);  

console.log(res); // 9

Here const res = multiply(21, 7, division); we are referencing division function. Clarity, in line return fn(a,b) * 3 we are not returning a function, we are invoking fn (a function reference) which divides a by b then multiplies 3 and return keyword returns the result.

3.Returning function from another function.

  function division(a) {
    return function (b) {
       return a/b;
    }
  }

  const res = division(21)
  const dividend = res(7) 

  console.log(dividend) //3

If you don't understand or confused with what is going on in the above code that's alright, we have been using some advanced concepts there, such as higher-order functions, function closures, currying functions. And those will be explained in detail in the next article.

If you say "why don't we just do function division(a, b) { return a/b; }, it's much simpler ", you are not wrong! But currying gives us a reusability, for example:

  function division(a) {
    return function (b) {
       return a/b; 
    }
  }

  const res = division(21);

  const dividend = res(7);
  console.log(dividend); //3 

  const anotherOne = res(3);
  console.log(anotherOne); // 7

We can keep dividing 21 by other values. Just like wiki said we can nest multiple functions, take one argument.

  function division(a) {
    return function (b) {
       return function (c) {
          return a/b/c; 
      }
    }
  }

  const res = division(12);
  const res2 = res(2); 
  const res3 = res2(2); 

  console.log(res3); //3

(Check out the example on JS bin)[https://jsbin.com/dutufuxiza/edit?js,console]

Summary, functions in JavaScript are values, they can be stored in variables, they can be used in objects as properties or in arrays as an array element and they can be returned or passed as arguments to functions.