Okkkay. So while I was trying to solve a simple algorithmic problem yesterday, I kept on running into a bug that made me think deeper about what I already knew.

I knew that Object, Function, and Array in javascript are passed by reference while String, Number, Boolean, undefined, and null are passed by value. Now, what do these mean? for the sake of those that are beginners.

Passed by value

If you declare a variable using any of the value types, and then try to assign it to another variable, a new copy of that value will be created in memory.

const daysInAYear = 365;
const daysInALeapYear = daysInAYear;

Now, that's not so right, so, let's add 1 to the second variable:

const daysInAYear = 365;
const daysInALeapYear = daysInAYear + 1;

console.log(daysInALeapYear) // returns 366
console.log(daysInAYear) //returns 365

Those two variables exist independently in memory. cool.

Passed by reference

When you create a variable using any of the reference types and then try to create a copy of it by assigning it to another variable, a new copy of it will not be created, instead, the address of that variable (the reference) will be passed to the new variable and editing either variable is editing that single value that exists in memory. If you delete either one, both of them gets deleted because the variables do not hold the value itself, but the reference to that singular value stored in memory.

Let's use the Array datatype to demonstrate this:

const foodsServed = ["Amala", "Rice", "Semovita", "Eba"];

Now, because I and Kaothar like food that much, we want the entire tray, so:

const foodsChosenByMe = foodsServed;
const foodsChosenByKaothar = foodsServed;

However, I am not a big fan of Eba, so I pop it out of the array:

foodsChosenByMe.pop() //should remove the last element, Eba

Now, I check my tray, Eba has been removed:

console.log(foodsChosenByMe);    //returns ["Amala", "Rice", "Semovita"]

Kaothar checks her tray and notices her Eba is gone also:

console.log(foodsChosenByKaothar);    //returns ["Amala", "Rice", "Semovita"]

She gets angry and decides to check the menu again:

console.log(foodsServed);    //returns ["Amala", "Rice", "Semovita"]

Somehow, Eba has also vanished from the menu. Hmm... kayefi nla

LET'S EXPLAIN WHAT HAPPENED

From the start, only one tray was in existence. The foods served, foods I chose, foods Kaothar chosed were the same, because the tray was passed by reference, not by content. So, me removing Eba from the tray was me removing it from the only tray there ever was.

Technically, when we declared the foodsServed variable and assigned it to that array of foods, what is actually stored in the foodServed is not the array of foods, but a reference to where it is stored in the computer memory, like an address. So when we assigned foodsChosenByMe and foodsChosenByKaothar to foodsServed, we weren't creating new foods arrays, we were just passing the location where the first foods array we created was stored to the new variables, so any operation performed on any of the variables gives the same result, altering the only array actually created.

SOLUTION

There's more than one solution to this, I always go for Array Destructuring.

const foodsServed = ["Amala", "Rice", "Semovita", "Eba"]
const foodsChosenByMe = [...foodsServed];
const foodsChosenByKaothar = [...foodsServed];

foodsChosenByMe.pop()

console.log(foodsServed); //returns ["Amala", "Rice", "Semovita", "Eba"]
console.log(foodsChosenByMe); // returns  ["Amala", "Rice", "Semovita"]
console.log(foodsChosenByKaothar); //returns ["Amala", "Rice", "Semovita", "Eba"]

the [...foodsServed] notation in this scenario basically creates a new array in memory when used, so we have three different arrays in our program. Read more about it at Array Destructuring.

I wanted to write a 5-minute article on what I just learned, The article is 5 minutes long already and I haven't even written what I intended to, hopefully, I'll write it as a rejoinder to this soonest.