DEV Community

loading...
Cover image for The Internal and Performance of JavaScript Arrays

The Internal and Performance of JavaScript Arrays

bello profile image Bello Updated on ・3 min read


In the previous article, the array basic was introduced. In this article, we will go a little deeper by looking into the internal and performance of arrays.


Array Internals

Arrays are ordered objects or objects are arrays if their keys are in order.

See the example below:

const arr = [ 'Bello', 27, 'Male', 'true' ];

console.log( arr[0] ); // Bello
console.log( arr[1] ); // 27
console.log( arr[2] ); // Male
console.log( arr[3] ); // true

typeof arr; // object
Enter fullscreen mode Exit fullscreen mode

The example above in an object is represented below:

const obj = { 0: 'Bello', 1: 27, 2: 'Male', 3: true }

console.log( obj[0] ); // Bello
console.log( obj[1] ); // 27
console.log( obj[2] ); // Male
console.log( obj[3] ); // true

typeof obj; // object
Enter fullscreen mode Exit fullscreen mode

Since arrays behave like objects, we can also copy arrays by reference.

See the example below:

const fruits = [ "Apple", "Orange" ]

const arr = fruits; // copy by reference

console.log(arr === fruits); // true

arr.push("Melon"); 

console.log(fruits); // [ 'Apple', 'Orange', 'Melon' ]
Enter fullscreen mode Exit fullscreen mode

The internal representation of arrays allows an engine to store elements orderly in the contiguous memory area to make arrays fast.


Array Performance

Methods push/pop run fast, while shift/unshift are slow.

To prove the statement above, see the examples below:

const fruits = [ "Apple", "Orange", "Melon", "Banana" ];

console.log( fruits.shift() );

console.log(fruits); // [ 'Orange', 'Melon', 'Banana' ]
Enter fullscreen mode Exit fullscreen mode

The example below shows what the above code passes through to remove the first element at the beginning of an array and then reorder them properly. See the example below:

const fruits = [ "Apple", "Orange", "Melon", "Banana" ];

// reordering elements due to the shift method on the fruits array 
fruits[0] = fruits[1]; // [ 'Orange', 'Orange', 'Melon', Banana ]
fruits[1] = fruits[2]; // [ 'Orange', 'Melon', 'Melon', Banana ]
fruits[2] = fruits[fruits.length-1]; 
// [ 'Orange', 'Melon', 'Banana', Banana ]
fruits[fruits.length-1] = fruits[fruits.length]; 
// [ 'Orange', 'Melon', 'Banana', undefined]

// remove only the last index element
console.log( fruits.pop() ); // undefined 
// => faster to remove an item with pop method

console.log(fruits); // [ 'Orange', 'Melon', 'Banana' ]
Enter fullscreen mode Exit fullscreen mode

As you can see in the example above the pop method does not need to move anything, because other elements keep their indexes.

Adding/removing items from the end of an array (push/pop) are faster than adding/removing items from the beginning of an array (unshift/shift).


Array Loops

The old syntax to iterate through each item in an array is shown below:

const fruits = [ 'Orange', 'Melon', 'Banana' ];

for (let i = 0; i < fruits.length; i++) {
  console.log( fruits[i] );
}

/*
Orange
Melon
Banana
*/
Enter fullscreen mode Exit fullscreen mode

The new and better syntax which was introduced in ECMAScript 2016 is shown below:

const fruits = [ 'Orange', 'Melon', 'Banana' ];

for (let fruit of fruits) {
  console.log(fruit);
}

/*
Orange
Melon
Banana
*/
Enter fullscreen mode Exit fullscreen mode

Since arrays are objects, the for...in can be used to loop an array.

The above example is the same as below:

const fruits = [ 'Orange', 'Melon', 'Banana' ];

for (let fruit in fruits) {
  console.log( fruits[fruit] );
}

/*
Orange
Melon
Banana
*/
Enter fullscreen mode Exit fullscreen mode

It is a bad practice to use for...in for array looping, use for...of instead. for...in is 10-100 times slower than for...of because of the extra iteration on properties and methods (which is not needed in an array looping).

We can also use a forEach method on an array to iterate on each item.

Syntax:

array.forEach(func)
Enter fullscreen mode Exit fullscreen mode

where func = callback function.

See the example below:

const fruits = [ 'Orange', 'Melon', 'Banana' ];
const funcArray = (fruit) => {
  console.log(fruit);
};

fruits.forEach(funcArray);

/*
Orange
Melon
Banana
*/
Enter fullscreen mode Exit fullscreen mode

Happy coding


image.png


image.png

Discussion (0)

pic
Editor guide