JavaScript Interview Question: Looping over an Array

In the interview process, you might encounter a seemingly straightforward question: looping over an array – easy peasy, right? You'd probably use a foreach or a basic for loop to iterate through the array elements. However, there's a twist: the interviewer is interested in your approach. Let's consider a scenario where an additional property is introduced using built-in prototypes, modifying the built-in object as such: Array.prototype.additionalProperty = 'JS';

Array.prototype.additionalProperty = "JS";
//added a new property to he buil-in Array object

Now, when you loop through the array using foreach or for loop, this added property won't be displayed.

let newArr = [1,4,3,56,7];
newArr.forEach(elem => {
    console.log(elem);
});
//output
//1
//4
//3
//56
//7

let newArr = [1,4,3,56,7];
for(let i = 0; i < newArr.length; i++) {
    console.log(newArr[i]);
}
//output
//1
//4
//3
//56
//7

But interestingly, if you opt for a for...in loop, the additional property will be visible in the log.

let newArr = [1,4,3,56,7];
for(let key in newArr) {
    console.log(newArr[key]);
}
//output
//1
//4
//3
//56
//7
//JS     //came from here Array.prototype.additionalProperty = "JS";

So, what's the explanation behind this behavior?

To understand this, we need to grasp the concept of how these iterations work. The forEach method loops over the array's elements using their indices and only iterates within the array's original length. The length of the array remains unaffected by the introduction of the additionalProperty, which isn't considered an array element. As a result, this property remains hidden from the log during the forEach loop.

However, the for...in loop behaves differently. It logs the value of the property because the property is enumerable, meaning it can be iterated over by a loop. The for...in loop traverses not only the array's elements but also the properties from the prototype, leading to unexpected outcomes.

To resolve this, you can employ either a forEach or a for loop. But what if the interviewer specifically requires you to use a for...in loop? In such a case, it's necessary to exhibit a deeper understanding of how things operate beneath the surface. To impress the interviewer and address this using a for...in loop, you must make use of Object.hasOwnProperty() method. This method ensures that only properties owned by the object itself are considered, effectively excluding inherited properties. Since all array elements have this property set to true upon array creation, you can manage this situation with an if condition like so:

for (let key in newArr) {
// You can use Object.prototype.hasOwnProperty.call(newArr, key) too. 
  if (array.hasOwnProperty(key)) { 
    console.log(newArr[key]);
  }
}
//output
//1
//4
//3
//56
//7

Special thanks to Hitesh Choudhary and his informative YouTube video (link provided below), which offers deeper insights into this topic. However, don't stop at just watching his video; dive into further research to discover more strategies for tackling this problem. This approach will equip you with valid reasoning, helping you excel in your interview.

Link to Hitesh Choudhary's video