Skip to main content

JavaScript Arrays

Data Types: Arrays

An object is a keyed collection of values. What is an array in JavaScript?​

View Answer:
Interview Response: We use an array to store an ordered collection of values.

Technical Response: An array is a special data structure that we use to store an ordered collection of values. Arrays are ordered with numbered indexes starting at zero and encapsulated in square brackets. To access the values, you must use the variable and an assigned index number to extract the value.

Code Example:

let fruits = ['Apple', 'Orange', 'Plum'];

alert(fruits[0]); // Apple
alert(fruits[1]); // Orange
alert(fruits[2]); // Plum

What are the two syntaxes used to create an empty array in JavaScript?​

View Answer:
Interview Response: The array global object and an array literal with square brackets are used to create an empty array.

Technical Response: You can use two syntaxes to create an array, including the Array() global object and an array literal using square brackets. The common practice is to use the square bracket representation.


Code Example:

let arr = new Array();
let arr = [];

How do you get the length of an array in JavaScript?​

View Answer:
Interview Response: To extract the length of an array, you must use the array length property.

Code Example:

let fruits = ['Apple', 'Orange', 'Plum'];

alert(fruits.length); // 3

What type of elements can you store in an array?​

View Answer:
Interview Response: Technically, in JavaScript, arrays can have elements of different types without producing an error.

Technical Response: Arrays are classified as Homogeneous Data Structures because they store elements of the same type in programming languages like Java. However, JavaScript Arrays are considered objects and do not have the same technical specifications. Technically in JavaScript, arrays can have elements of different types without producing an error. Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations—neither the length of a JavaScript array nor the types of its elements are fixed.

Code Example:

// Array of Numbers
let nums = [0, 1, 2];

for (num of nums) {
  console.log(nums); // 1, 2, 3
}

// Array of multiple Types
let rands = [0, 'a', 'b', true];

for (rand of rands) {
  console.log(rand); // 0, a, b, true
}

What is the benefit of using a trailing comma in an array?​

View Answer:
Interview Response: The trailing comma style makes it easier to insert and remove items because all lines become alike.

Code Example:

let fruits = [
  'Apple',
  'Orange',
  'Plum', // <-- Trailing Comma
];

In JavaScript, what are the two data structures that arrays can mimic?​

View Answer:
Interview Response: JavaScript uses arrays can mimic both queues and stack data structures. An array can also act as a deque data structure.

Code Example:

let fruits = [
  'Apple',
  'Orange',
  'Plum', // <-- Trailing Comma
];

Can you explain the function and syntax of the array pop() method?​

View Answer:
Interview Response: The array pop() method removes the last element of an array and returns the element. It has no arguments or parameters.

Technical Response: The array pop() method removes the last element of an array and returns the element. It also affects the array's length and returns undefined if the array is empty. The pop method is considered a generic method, and it can be called or applied to array-like objects. However, it may not work correctly with objects that have no length. The pop method has no parameters/arguments.

Code Example:

Syntax: arr.pop()

let fruits = ['Apple', 'Orange', 'Pear'];

alert(fruits.pop()); // remove "Pear" and alert it

alert(fruits); // Apple, Orange

// Works with array like objects (required: length property)

var myFish = {
  0: 'angel',
  1: 'clown',
  2: 'mandarin',
  3: 'sturgeon',
  length: 4,
};

var popped = Array.prototype.pop.call(myFish); //same syntax for using apply( )

console.log(myFish); // {0:'angel', 1:'clown', 2:'mandarin', length: 3}

console.log(popped); // 'sturgeon'

Explain the function and syntax of the array push() method?​

View Answer:
Interview Response: The array push method appends one or more elements to the end of an array.

Technical Response: The array push() method appends one or more elements to the end of an array. The push method is generic by design and allows it to get used on array-like objects. The push method relies on a length property to determine where to start inserting the given values. If the length property cannot convert into a number, the index used is 0. This outcome includes the possibility of length being nonexistent, in which case length gets created. Although strings are native, Array-like objects, they are not suitable in applications of the push method, as strings are immutable, similarly to the native, Array-like object arguments. The push syntax allows for single or multiple elements.

Code Example:

Syntax: arr.push(element1, element2)

// Pushing a single element
let fruits = ['Apple', 'Orange'];

fruits.push('Pear');

alert(fruits); // Apple, Orange, Pear

// Pushing multiple elements
let sports = ['soccer', 'baseball'];
let total = sports.push('football', 'swimming');

console.log(sports); // ['soccer', 'baseball', 'football', 'swimming']
console.log(total); // 4

Can you explain the function and syntax of the array shift() method?​

View Answer:
Interview Response: The array shift() method removes the first element at the beginning of a array and returns the removed element.

Technical Response: The array shift() method removes the first element at the beginning of an array and returns the removed element. The shift method always changes the length of the array. If the array is empty, then the shift method returns undefined. The shift method is intentionally generic; this method can be called or applied to objects resembling arrays. Objects which do not contain a length property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner. The shift method has no additional parameters because of its generic design.

Code Example:

Syntax: arr.shift() 

let fruits = ['Apple', 'Orange', 'Pear'];

alert(fruits.shift()); // remove Apple and alert it

alert(fruits); // Orange, Pear

Can you explain the function and syntax of the array unshift() method?​

View Answer:
Interview Response: The unshift method adds one or more elements to the beginning of an array and returns the new length of the array.

Technical Response: The array shift() method removes the first element at the beginning array and returns the removed element. The shift method constantly changes the length of the collection. If the array is empty, then the shift method returns undefined. The shift method is generic; this method gets applied to objects that look like arrays. Objects that do not contain a length property mirroring the last in a series of consecutive, zero-based numerical properties may not behave properly. The shift method has no additional parameters because of its generic design.

Code Example:

Syntax: arr.unshift(element1[, ...[, elementN]])

let arr = [4, 5, 6];

arr.unshift(1, 2, 3);
console.log(arr);
// [1, 2, 3, 4, 5, 6]

arr = [4, 5, 6]; // resetting the array

arr.unshift(1);
arr.unshift(2);
arr.unshift(3);

console.log(arr);
// [3, 2, 1, 4, 5, 6]

Explain why is an array a special kind of object?​

View Answer:
Interview Response: An array is a special object because the square brackets used to access a property arr[0] come from the object syntax.

Technical Response: An array is a special object because the square brackets used to access a property arr[0] come from the object syntax. That is essentially the same as obj[key], where arr is the object, while numbers get used as keys. An array-like object typically has the length property within its structure, like regular arrays. They extend objects by providing special methods to work with ordered collections of data and the length property. But at the core, it is still an object. Unlike array-like objects, arrays get optimized for fast performance and handling of internal components.

Code Example:

// Array Like Object
let fruits = {
  0: 'Apple',
  1: 'Pear',
  2: 'Banana',
  length: 3,
};

// Array
let fruits2 = ['Apple', 'Pear', 'Banana'];

console.log(fruits[0]); // array-like object returns Apple

console.log(fruits2[0]); // array returns Apple

console.log(fruits.length); // length returns 3

let arrFruits = Array.from(fruits); // converts array-like object to an array

console.log(arrFruits.length); // length returns 3

console.log(arrFruits.pop()); // removes Banana

console.log(arrFruits.length); // length returns 2

What happens when you try to utilize an array in JavaScript as an object?​

View Answer:
Interview Response: When you attempt to use an array as an object, it loses all its optimizations and benefits.

Technical Response:An array is a specialized object with internal optimized components. When you attempt to use an array as an object, it loses all its optimizations and benefits. It is good to think of arrays as special structures to work with the ordered data, and they provide special methods for that. Arrays are carefully tuned inside JavaScript engines to work with contiguous ordered data; please use them this way. And if you need arbitrary keys, the chances are high that you require a regular object { }.

Examples: Misusing an array.

  1. Add a non-numeric property like arr.test = 5.
  2. Make holes, like add arr[0] and then arr[1000] (and nothing between them).
  3. Fill the array in the reverse order, like arr[1000], and arr[999].

Why is it faster to work with the end of an array than with its beginning?​

View Answer:
Interview Response: The performance difference between working the end of the array and beginning is tangible. Anytime an element must be removed or pushed onto the front of an array, the other elements need re-indexing.

Technical Response: The performance difference between working at the end of the array versus the beginning is tangible. Anytime an element must be removed or pushed onto the front of an array, the other elements should get reindexed. This performance difference means the engine (affecting performance and memory usage) must work harder to re-index all the elements. In contrast, when you push or remove an element from the end of an element, there is no need to re-index the remaining elements because their index position remains the same.

Examples: The shift operation must do 3 things.

  1. Remove the element with the index 0.
  2. Move all elements to the left, renumber them in the index 1 to 0, from 2 to 1, and on to completion.
  3. Update the length property.

What are the two common ways to loop over an array?​

View Answer:
Interview Response: The two common ways to loop an array are using the for and for…of loops. Both looping structures remain optimized for performance with arrays.

Technical Response: The two common ways to loop an array are using the for and for…of loops. Both looping structures get optimized for performance with arrays. In addition, the array forEach method is available to these two loops, but it is known to cause bottlenecks.

Code Example:

// for...loop example
let arr = ['Apple', 'Orange', 'Pear'];

for (let i = 0; i < arr.length; i++) {
  alert(arr[i]);
}

// for...of example
let fruits = ['Apple', 'Orange', 'Plum'];

// iterates over array elements
for (let fruit of fruits) {
  alert(fruit);
}

Can you explain some of the drawbacks of using a for…in loop on arrays?​

View Answer:
Interview Response: Several problems make it a bad idea—the loop for..in iterates over all properties, not only the numeric ones. The for..in loop by specification gets optimized for generic objects, not arrays, and thus is 10-100 times slower.

Technical Response: Although it is possible to use a for…in loop on an array, but not recommended. Several problems make it a bad idea.

Examples:

  1. The for..in loop iterates across all attributes, not just the numerical ones. In the browser and other contexts, there exist so-called "array-like" objects that resemble arrays. They have length and index features, but they may also include non-numeric attributes and techniques that we do not typically require. The for..in loop, on the other hand, displays a list of them. As a result, if we need to deal with array-like objects, these "extra" properties may cause problems.
  2. The for..in loop gets optimized for generic objects, not arrays, and thus is 10-100 times slower. Of course, it is still speedy, and the speed may only matter in bottlenecks. But still, we should be aware of the difference.
View Answer:
Interview Response: The range limitation for the length property must be lower than 2 to the 32nd power. Another limitation is the length property’s inability to return the correct number of elements.

Technical Response: According to the MDN, the range limitation for the length property must be lower than 232. Another limitation is the length property’s inability to return the correct number of elements. For example, if there is no element in one of the indices, the length property still counts that position, and length returns the highest index, not the number of elements. A less common issue is array mutation when an element is deleted (delete colors[0]) from an array. (Note: You should never use the delete method to clear an array or remove elements.) The length is not updated with the new number of elements and returns the highest index.

Code Example:

var animals = ['cat', 'dog', , 'monkey']; // animals is sparse

// prints 4, but real number of elements is 3
console.log(animals.length);

var words = ['hello'];

//the highest index is 6
words[6] = 'welcome';

//prints 7, based on highest index
console.log(words.length);

var colors = ['blue', 'red', 'yellow', 'white', 'black'];

// prints 5
console.log(colors.length);

// remove the first element 'blue'.
// The array becomes sparse
delete colors[0];

// still prints 5, because the highest index 4 was not modified
console.log(colors.length);
warning

A less common issue is array mutation when an element gets deleted from an array. The length is not updated with the new number of elements and returns the highest index.

What's the significant difference between an Array and an array literal?​

View Answer:
Interview Response: The constructor is rarely used in modern JavaScript because array literals use the short square bracket syntax. If a “new” Array gets called with a single argument, a number, it creates an array without items, but with the given length.

Technical Response: There are several differences in the behaviors of the Array constructor and array literal. The constructor is rarely used in modern JavaScript because array literals use the square bracket [] syntax, which is shorter. Array constructors (new Array(2)) also have glitchy features that can produce adverse effects. When a new Array function gets invoked with a single argument, a number, it returns an array with no items but the specified length.

Code Example:

let arr = new Array(3); // will it create an array of [3] ?

alert(arr[0]); // returns undefined! no elements.

alert(arr.length); // length 3

Are there any rules governing the equality comparison of two Arrays?​

View Answer:
Interview Response: The basic rule is always to use the strict equality operator because the equality operator can produce some adverse effects, like 0 == [] returns True when it should return false.

Code Example:

// Example: Equality Operator
alert([] == []); // false
alert([0] == [0]); // false

// Comparison with primitives may give strange results as well:

alert(0 == []); // true, should be false

alert(0 === []); // false, no primitive conversion in strict equality