Interesting Facts about JavaScript Arrays

Let us talk about some interesting facts about JavaScript Arrays that can make you an efficient programmer.

Arrays are Objects

JavaScript arrays are actually specialized objects, with indexed keys and special properties. They have a length property and are technically instances of the Array constructor.

const a = [10, 20, 30];
console.log(typeof a);

object

You can add non-integer properties to arrays, making them work partly like objects. However, this is usually discouraged for clarity.

let a = [1, 2, 3];

// Adding a property to array (NOT RECOMMEMDED IN PRACTICE)
a.name = "MyArray";

console.log(a.name);       

// Iterating through the array with `for...in`
// (NOT RECOMMENDED IN PRACTICE)
for (let key in a) {
  console.log(`${key}: ${a[key]}`);
}

MyArray
0: 1
1: 2
2: 3
name: MyArray

Mixed Elements Allowed

Like Python and unlike C/C++/Java,, we can have mixed type of elements in a JavaScript array.

const a = [10, "hi", true];
console.log(a);

[ 10, 'hi', true ]

Dynamic Size

Like Python and unlike C/C++/Java,, the default array implementation is Dynamic Size.

let a = [1, 2, 3];
a.push(4); 
console.log(a);

[ 1, 2, 3, 4 ]

Negative Indexing

The .at() method, introduced in ES2022, allows access to array elements using negative indices, making it easy to retrieve elements from the end of an array without calculating the length.

const arr = [10, 20, 30];
console.log(arr.at(-1)); 

30

Resizing an Array

We can resize a JavaScript array by simply changing its length property.

let a = [1, 2, 3, 4];
a.length = 2;
console.log(a); 

[ 1, 2 ]

Array Assignment

When we assign an array to another, it only creates one more reference to the same array.

// changed the original array
let a = [10, 20];
let b = a;

b.push(30);

console.log(a); 

[ 10, 20, 30 ]

Spread Operator

We get members of an array or a string. It helps us in copying in copying an array, concatenating arrays and passing array elements to different parameters of a function.

// Arrat copy using spread operator
let a = [10, 20];
let b = [...a];

b.push(30);

console.log(a); 

[ 10, 20 ]

// Array concatenation using spread operator
let a = [10, 20];
let b = [30, 40];
let c = [...a, ...b]
console.log(c); 

[ 10, 20, 30, 40 ]

function add(x, y, z) {
  return x + y + z;
}

let a = [10, 20, 30];
console.log(add(...a));

60

Empty Elements in Array

JavaScript allows empty elements in an array. When we access these elements, we get undefined.

const a = [1, , , 3]; 
console.log(a); 
console.log(a[1]);

[ 1, <2 empty items>, 3 ]
undefined

const a = [1, 3]; 
a.length = 4
console.log(a); 
console.log(a[2]);

[ 1, 3, <2 empty items> ]
undefined

Direct Methods to Modify Arrays

JavaScript allows multiple direct methods for efficient programming.

const a = [1, 2, 3, 4];

const b = a.map(x => x * 2); 
console.log(b)

const c = a.filter(x => x > 2); 
console.log(c)

const d = [1, [2, 3], [4, [5]]];
console.log(d.flat(2)); 

[ 2, 4, 6, 8 ]
[ 3, 4 ]
[ 1, 2, 3, 4, 5 ]