What is causing the undefined result when duplicate elements are encountered?

Question

What is causing the undefined result when duplicate elements are encountered?

 const cardChild = document.querySelectorAll('.card i');
 const cardsArray = ['a','a','b','b','c','c']; 
 const matchArray = [];

function cardsToClass() {
     for (i = 0; i < cardChild.length; i++) {

         let newCard = cardsArray.pop();
         let newCardClass = cardChild[i];
         matchArray.push(cardsArray[i]);

         newCardClass.className += newCard;
         console.log(cardsArray);
     }; }

Hello friends! The code above showcases a function that utilizes .pop() to assign elements from 'cardsArray' as classes in a DOM element. The goal is to have two arrays ('cardsArray' and 'matchArray') with identical contents. We are almost there, but when I check 'matchArray', it seems off:

 ['a','b','c',undefined,undefined,undefined]

I suspect the issue might be at:

 matchArray.push(cardsArray[i]);

However, I'm not entirely sure. Any insights into why it's not capturing the duplicate elements?

Thank you!

javascript arrays loops web-applications

Answer 1

Answer №1

Instead of copying the array from the first position to the last and removing the last item with pop(), try using unshift() which will resolve the issue of half of the array endings up as undefined.

If you're unsure about the purpose of the code, including the HTML might provide some insight.

Here is the revised code:

//const cardChild = document.querySelectorAll('.card i');
 const cardsArray = ['a','a','b','b','c','c']; 
 const matchArray = [];

function cardsToClass() {
     for (i = 0; i < cardsArray.length; i++) {

         let newCard = cardsArray.unshift();
         //let newCardClass = cardChild[i];
         matchArray.push(cardsArray[i]);

         //newCardClass.className += newCard;

     };
console.log(cardsArray);
console.log(matchArray);
}
     
cardsToClass()

Answer 2

Instead of copying the array from the first position to the last and removing the last item with pop(), try using unshift() which will resolve the issue of half of the array endings up as undefined.

If you're unsure about the purpose of the code, including the HTML might provide some insight.

Here is the revised code:

//const cardChild = document.querySelectorAll('.card i');
 const cardsArray = ['a','a','b','b','c','c']; 
 const matchArray = [];

function cardsToClass() {
     for (i = 0; i < cardsArray.length; i++) {

         let newCard = cardsArray.unshift();
         //let newCardClass = cardChild[i];
         matchArray.push(cardsArray[i]);

         //newCardClass.className += newCard;

     };
console.log(cardsArray);
console.log(matchArray);
}
     
cardsToClass()

Answer 3

Answer №2

The reason behind this issue is that when you use the .pop method, it alters the original array itself.

Check out the official documentation

As .pop changes the contents of cardsArray, the size of the array decreases with each iteration of the loop.

During every loop iteration, cardsArray appears as:

```
cardsArray = ['a','b','c','a','b','c'];
```
```
cardsArray = ['a','b','c','a','b'];
```
cardsArray = ['a','b','c','a'];
cardsArray = ['a','b','c'];
cardsArray = ['a','b'];
cardsArray = ['a'];

Therefore, starting from the third iteration (i = 2), the value of cardsArray[i] becomes undefined

Answer 4

The reason behind this issue is that when you use the .pop method, it alters the original array itself.

Check out the official documentation

As .pop changes the contents of cardsArray, the size of the array decreases with each iteration of the loop.

During every loop iteration, cardsArray appears as:

```
cardsArray = ['a','b','c','a','b','c'];
```
```
cardsArray = ['a','b','c','a','b'];
```
cardsArray = ['a','b','c','a'];
cardsArray = ['a','b','c'];
cardsArray = ['a','b'];
cardsArray = ['a'];

Therefore, starting from the third iteration (i = 2), the value of cardsArray[i] becomes undefined

What is causing the undefined result when duplicate elements are encountered?

Answer №1

Answer №2

Similar questions

Ensuring validation on an input field following the addition of a new field sharing the same class

C syntax: reference to an array of characters (string)

Method for developing a screen-sharing application

Retrieving items from an array by matching them with items in another array

Problem Encountered with array_key Encoding Using UTF-8

Having difficulty displaying a partial view within a view while making an AJAX call

effortlessly eliminate the Google MyMap watermark from an iframe using ReactJS

A guide on calculating the total values for each key in a multidimensional array

Leveraging an array in a function parameter

What causes a JSON error upon deleting a list in Replit?

When an input element is being controlled from outside the modal using a portal, it is losing focus after a key press

What is the best way to incorporate multiple pages into a Node JS and Express application?

Ways to prevent a high-powered Javascript loop from causing the browser to freeze

Using jquery to insert a new row into a table

During the program's runtime, p5.js unexpectedly encounters a problem reading my update function at a random point

In React, what is the correct term for "selection boxes" when choosing multiple items in Finder?

Is it possible to continuously divide or multiply numbers by 2 without encountering any rounding errors when working with floating point numbers?

What is the correct method for successfully navigating arrays with pointers?

Ways to conceal a div element when the JSON data does not contain a value

Unraveling the mystery: How does JavaScript interpret the colon?