Arrays in Javascript

TOC

• What is an Array?
• Nature of Javascript Arrays
• Creating Arrays
• Reading and Writing Array Elements
• Sparse Array
• Empty Array

What is an Array?

Arrays are an ordered collection of values where each value is called an element. The index number allows us to refer to each element in the array.

Nature of Javascript Arrays

• JavaScript arrays are Zero-based, so the index starts at zero.

• JavaScript arrays can contain any number of different values. It could contain a number, string, boolean, object or even another array.
  

const array = [12, "hello", true, { age: 28 }, [2, 4]];

• JavaScript arrays are dynamic, so we can add and remove elements from an array at any time.

• The total number of elements inside an array can be get or set by the length property.
  

const array = [12, 23, 43];
array.length // 3

• Elements of an array can be empty, an array with empty elements is called Sparse array.

Creating Arrays

 
There are various method to create Javascript Arrays. The preferred method is to use an array literal.
 

1. Array Literal - [] (preferred method)

const arr1 = []; // Creating an array with no value
console.log(arr1.length); // 0

const arr2 = [10, 20, 32]; // Creating an array with values
console.log(arr2.length); // 3

const arr3 = [,,,,,]; // Creating a sparse array - [empty × 5]
console.log(arr3.length); // 5

2. Array Constructor - new Array()

const arr1 = new Array(); // Creating an array with no value
console.log(arr1.length); // 0

const arr2 = new Array(10, 20, 32); // Creating an array with values
console.log(arr2.length); // 3

const arr3 = new Array(5); // Creating a sparse array - [empty × 5]
console.log(arr3.length); // 5

Note - If the only argument passed to the Array constructor is an integer between 0 and 232 - 1 (inclusive), this returns a new JavaScript array with its length property set to that number. MDN

😇 Still scratching your head then use Array.of() Static method. Remember these are alternative method so don't worry much about it.

3. Array.of()

const arr1 = Array.of(); // Creating an array with no value
console.log(arr1.length); // 0

const arr2 = Array.of(10, 20, 32); // Creating an array with values
console.log(arr2.length); // 3

4. Array.fill()

Array.fill() will let us create the array at the same time include a value that will be in every single position/index.

For example :-

const arr1 = Array.(5).fill(1); // [1, 1, 1, 1, 1]

We can also use fill() method on already created arrays.
For example :-

const arr2 = [1, 2, 3, 4,,,,].fill(2); // [2, 2, 2, 2, 2, 2, 2]

We can pass 3 arguments to fill() method.

• fill(value) -
• fill(value, start)
• fill(value, start, end)

• value to fill the array with
• start and end index is optional arguments.
• start is inclusive. Default 0
• end is exclusive, Default array.length

For example :-

const arr3 = [1, 2, 3, 4, 5,,,,].fill(6, 0, 3); // [6, 6, 6, 4, 5, empty × 3]

Reading and Writing Array Elements

1.Reading elements from an array
 

• Array Literal

const arr = [22, 32, 42, 92, 52]
console.log(arr[2]); // 42

• at() method (ECMAScript 2022)

The at() method takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.

const arr1 = [22, 32, 42, 92, 52]
console.log(arr1.at(0)); // 22
console.log(arr1.at(-1)); // 52

2. Writing elements in an array
 

• Within the length of the array.

const arr1 = [22, 32, 42, 92, 52]

arr1[3] = "javascript";

console.log(arr1); // [22, 32, 42, "javascript", 52];
console.log(arr1.length); // 5;

arr1[5] = "tom";

console.log(arr1); // [22, 32, 42, "javascript", 52, "tom"];
console.log(arr1.length); // 6;

• Beyond the length of the array - It creates an empty array in between.

arr1[8] = 67;

console.log(arr1); // [22, 32, 42, 'javascript', 52, 'tom', empty × 2, 67]
console.log(arr1.length); // 9

Sparse Array

What is Sparse Array?
 
A sparse array is an an array with empty elements, we can call it holes in the array.
index of the empty element will log undefined in Chrome because as Javascript doesn't have a value for the hole.

 
Ways to create Sparse Array
 

• Example 1

In the below example, we are assigning a value to an index number of 8 and there was nothing assigned to the index numbers between 5 and 8 which 6 and 7.

So 6 and 7 became empty elements and therefore we have sparse array right now.

arr1[8] = 67;

console.log(arr1); 
// [22, 32, 42, 'javascript', 52, 'tom', empty × 2, 67]
console.log(arr1.length); // 9
console.log(arr1[6]) // undefined
console.log(arr1[7]) // undefined

• Example 2

We can create a sparse array by simply putting commas(,). Every time there is a comma that creates a new element but there is nothing in those element so it creates holes in the array.

let arr2 = [,,,,,,]; 
console.log(arr2); // [empty × 6]
console.log(arr2.length); // 6
console.log(arr2[2]) // undefined

• Example 3

Assigning value(as number) to the length of an array and if that value is greater than the actual length of the array can create a sparse array.

let arr2 = [2,3,5,8]; 
console.log(arr2.length); // 4

// Setting a new length which is greater than actual 
// length of the array which is 4 in our case
arr2.length = 10;

console.log(arr2) // [2, 3, 5, 8, empty × 6]
console.log(arr2.length); // 10

• Example 4 (using delete operator on Arrays)

delete doesn't modify the length of the array, it just creates the sparse array(hole in the array).

let arr1 = [1,2,3,4,5,6,7]; 
delete arr1[5];

console.log(arr1); // [1, 2, 3, 4, 5, empty, 7]

Empty Array

Two simple ways to empty and array.
 

1. - Reassigning original array to an empty array.

let arr1 = [1, 2, 3, 4, 5, 6];

arr1 = [];

This technique is not emptying the array but assigns a new empty array to it.
 
See the below example where arr2 still references the original array.

let arr1 = [1, 2, 3, 4, 5, 6];

arr2 = arr1;

arr1 = [];

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

Notice - The above approach will not work with const keyword because variables assigned with const keyword can not be re-assigned.
 

2. Setting array length property to zero.

 
With this technique, we will empty the original array and we can see in the below example that even arr2 is logging as an empty array.

let arr1 = [1, 2, 3, 4, 5, 6];

arr2 = arr1;

arr1.length = 0;

console.log(arr1); // []
console.log(arr2); // []

This is it, now you can go for a coffee break. If I have missed something along the way, do point it out in the comment box.

Upcoming articles on Javascript Arrays:

• How to iterate Arrays
• Working with Array-like collections
• Array Methods
• Multidimensional Arrays

Till then, Keep Learning! 🤘