7 Need-To-Know Nuances About Arrays In JavaScript Before Your Next Technical Interview

Arrays are an essential data structure in JavaScript, but there are some very fundamental aspects to arrays that many JavaScript Developers do not know of.

Even some of the most experienced developers sometimes forget that these features exist in JavaScript.

This is because arrays in JavaScript differ a bit from other programming languages like Java or C#.

Here are 7 fundamental Gotchas to know that would help you in preparing for your next technical interview.

1. The 'delete' Keyword

What is the output of the following?

let arr = [1, 2, 3, 4]
delete arr[1]
console.log(arr) // what is the out of arr?

If you guessed: [1, empty, 3, 4], then you are correct. Well, not entirely...

The empty keyword here really depends on what browser (or environment) you are on.

For example, on Google Chrome we get this:

But on Firefox we get this:

Don't get fooled by the empty in chrome because it is simply just undefined as seen above.

From the MDN website:

"The JavaScript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically."

Since arrays are just objects in JavaScript (see below), when we do delete on an index in an array, the property (index) becomes undefined.

2. Array.length Property

Building on the previous example, what about the length of the array now? Can you guess what this is going to output?

What would arr.length output?

If you guess 4, then you would be correct.

The reason is because the element was not actually "deleted", since all we did was just replaced the element at the index with _undefined_.

3. Arrays are just Objects

People often forget that the array data structure in JavaScript is simply an Object.

typeof [] === 'object' // true

This means that you can do this:

let arr = [1, 2, 3]
arr.random_property = 10
console.log(arr) // (3) [1, 2, 3, random_property: 10]
console.log(arr.random_property) // 10

and even this:

let arr = [1, 2, 3]
arr.random_function = () => {
  console.log('this is an array function')
}
console.log(arr) // (3) [1, 2, 3, random_function: ƒ]
console.log(arr.random_function()) // "this is an array function"

4. Array.prototype

And speaking of arrays being objects, we can have access to the prototype system as well, like this:

Array.prototype.print_in_reverse_order = function () {
  for (let I = 0; i < this.length; i++) {
    console.log(this[i])
  }
}
console.log([1, 2, 3].print_in_reverse_order()) // [3, 2, 1]

Pretty cool eh?

5. Keys in Arrays are Coerced

Be careful when doing something like this: arr['0'] = 100

Because the 0 will be coerced into an integer and thus doing this instead arr[0] = 100

let arr = [1, 2, 3]
arr['0'] = 100
console.log(arr['0']) // 100
console.log(arr[0]) // 100, not 1

6. Array Concatenation

Don’t confuse the .concat() function with adding 2 arrays together with a + sign.

let a = [1, 2, 3]
let b = [4, 5, 6]
let c = a + b // "1,2,34,5,6"
let d = a.concat(b) // [1, 2, 3, 4, 5, 6]

7. Array-like Syntax vs. Actual Arrays

Consider the following buttons.

If we were to do a document.querySelectorAll on the buttons and push another element in, what would happen below?

let buttons = document.querySelectorAll('.colored-buttons > button')

buttons.push(123)

We get the following:

But how is this possible?

If we dig a little deeper and type this into the console

let buttons = document.querySelectorAll('.colored-buttons > button')
let buttonsArray = Array.from(
  document.querySelectorAll('.colored-buttons > button')
)

console.log(buttons)
console.log(buttonsArray)

We would see this:

We see that the the prototype of buttons is actually NodeList which does not actually contain all the array methods we are used to having. That is why when we tried doing buttons.push(123), it did not work.

In order to convert it to an actual array and have access to all the methods we are used to having, we have to use Array.from, which creates a new "shallow-copied Array instance from an array-like or iterable object".

Conclusion

And that is 7 gotchas you should know before going into your next JavaScript technical interview. Knowing these 7 gotchas will not only help you deepen your understanding of JavaScript, it will also impress your interviewer XD.