Why we should avoid the push method as Developers in JavaScript

While solving problems in an array in JavaScript. We can encounter the errors in push method for appending an element. Here the problem comes when we are building/developing something in JavaScript or React.

Let’s analyze the Push method side effects with Two examples —

I will show the code in small snippets. So that Everyone can understand.

Example — 1

function push(a) {
    b = a;
    b.push(4);
    console.log("Duplicate- ", b);
}

const a = [1,2,3];

push(a); //Output:- Duplicate- [1, 2, 3, 4]

//What if I console.log(a) after a function call?

console.log("original", a); //Output:- original- [1, 2, 3, 4]

As we can see by using the push method. The Original array gets changed. If we don’t want to change our original array then, what are the possible ways to solve this side effect?

Solution for the Example — 1

We will use the spread operator to solve this side effect.

function push(a) {

    const b = [...a, 4] //Using [spread operator, 4] to append an element.

    console.log(b)
}

const a = [1,2,3]

push(a) //Output:- Duplicate- [1, 2, 3, 4]

//What if I console.log(a) after a function call?

console.log("original", a) //Output:- original- [1, 2, 3]

Think of that, You are building an e-commerce website. Where you need to append an Item to the Cart. At that time, Why you should avoid using the push method?

I will explain it with an example. So that It will make more sense.

The below example is taken from educative.io But the comments are written by me.

Example — 2

//Array of objects
//3 items inside the original array.
const cart = [
{
    name: 'The Foundation Trilogy',
    price: 19.99,
    discount: false,
},
{
    name: 'Godel, Escher, Bach',
    price: 15.99,
    discount: false,
},
{
    name: 'Red Mars',
    price: 5.99,
    discount: true,
}, ];

const reward = {
    name: 'Guide to Science Fiction',
    discount: true,
    price: 0,
};

function addFreeGift(cart) {
    if (cart.length > 2) {
        cart.push(reward)
        return cart
    }
    return cart;
}

function summarizeCart(cart) {

    const cartWithReward = addFreeGift(cart);

    // return output of addFreeGit(cart) get stored in the CartWithReward

    console.log(cartWithReward)

    const discountable = cart.filter(item=>item.discount);

    // discountable = [ {discount: true }, {discount: true} ]

    if (discountable.length > 1) {
        return {
            error: 'Can only have one discount',
        };
    }

    return {
        discounts: discountable.length,
        items: cartWithReward.length,
        cart: cartWithReward,
    };
}

console.log("Add free gift:");
console.log(addFreeGift(cart));
console.log("\n");
console.log("Summarize cart:");
console.log(summarizeCart(cart));
console.log("\n");
console.log("Cart:");
console.log(cart);

Output for the above code —

//Output
Add free gift:

0:{name: 'The Foundation Trilogy', price: 19.99, discount: false}

1: {name: 'Godel, Escher, Bach', price: 15.99, discount: false}

2: {name: 'Red Mars', price: 5.99, discount: true}

3: {name: 'Guide to Science Fiction', discount: true, price: 0}

4: {name: 'Guide to Science Fiction', discount: true, price: 0}

//Output 
Summarize cart:

0:{name: 'The Foundation Trilogy', price: 19.99, discount: false}

1: {name: 'Godel, Escher, Bach', price: 15.99, discount: false}

2: {name: 'Red Mars', price: 5.99, discount: true}

3: {name: 'Guide to Science Fiction', discount: true, price: 0}

4: {name: 'Guide to Science Fiction', discount: true, price: 0}

{error: 'Can only have one discount'}

//Output 

Cart:

0:{name: 'The Foundation Trilogy', price: 19.99, discount: false}

1: {name: 'Godel, Escher, Bach', price: 15.99, discount: false}

2: {name: 'Red Mars', price: 5.99, discount: true}

3: {name: 'Guide to Science Fiction', discount: true, price: 0}

4: {name: 'Guide to Science Fiction', discount: true, price: 0}

From the above observation, we can conclude that the output of Add free gift, Summarize cart, and Cart has side effects. Where the same Items are added twice and the original cart items also get changed.

We can avoid these side effects by using the spread operator inside this addFreeGift function on a cart.

function addFreeGift(cart) {
    if (cart.length > 2) {
        //Earlier it was cart.push(reward)
        cart = [...cart, reward]
        return cart
    }
    return cart;
}

Now Output will look like this -

//Output
Add free gift:

0:{name: 'The Foundation Trilogy', price: 19.99, discount: false}

1: {name: 'Godel, Escher, Bach', price: 15.99, discount: false}

2: {name: 'Red Mars', price: 5.99, discount: true}

3: {name: 'Guide to Science Fiction', discount: true, price: 0}

//Output 
Summarize cart:

0:{name: 'The Foundation Trilogy', price: 19.99, discount: false}

1: {name: 'Godel, Escher, Bach', price: 15.99, discount: false}

2: {name: 'Red Mars', price: 5.99, discount: true}

3: {name: 'Guide to Science Fiction', discount: true, price: 0}

{error: 'Can only have one discount'}

//Output
Cart:

0: {name: 'The Foundation Trilogy', price: 19.99, discount: false}

1: {name: 'Godel, Escher, Bach', price: 15.99, discount: false}

2: {name: 'Red Mars', price: 5.99, discount: true}

I hope this helps you to understand :)

Please do follow me on medium for more such content.

And you can connect with me on LinkedIn and Twitter.