JavaScript Indexed Collections

The first of data structures are collections that has index and items in the collection can be accessed through indexes.

What do we understand Collections?

Groups of data in different forms are one of the fundamental data structures in most programming languages. In many cases, groups of data expressed through different data types are referred to as Collections.

Includes collections of data that are ordered by an index value. This includes arrays and array-like constructs such as Array objects and Typed Array objects

What is an Array object?

An array is a required list of values that you associate to with a name and an index.

For example:

 Consider an array called emp, which contains employees’ names indexed by their order-based employee number. So emp[0] would be employee number zero, emp[1] employee number one, and so on.

JavaScript does not have an explicit array data type. However, you can use the default Array object and its methods to work with arrays in your applications. The Array object has methods for manipulating arrays in various ways, such as joining, reversing, and searching for values. It has a property for determining the array length and other properties for use with regular expressions.

Creating an Array: There are many ways to create and initialize an array that is listed below:

1)Creating arrays without defining the array length. In this case, the length is equal to the number of arguments.

var arr = new Array( element0, element1, ... );   
var arr = Array( element0, element1, ... );       
var arr = [ element0, element1, ... ];  

2)Creating an array with the given size

var arr = new Array(5); 
var arr = Array(5);
var arr = [];
arr.length = 5;

3) Creating a variable-length array and add many elements as you need.

// First method: Initialize an empty
// array then add elements
var students = [];
students [0] = 'Manoj kush';
students [1] = 'Mallesh Kumar';
students [2] = 'Hruthika Khilb';
 
// Second method: Add elements to
// an array when you create it
var fruits = ['apple', 'melon', 'Banana'];

Accessing the Array Elements: Use indices to access array elements. Indices of Arrays are zero-based which means the index of the elements begins with zero.

var fruits = ['Apple', 'Melon', 'Banana']; 
console.log(fruits [0]); 
console.log(fruits[1]);  

Output:

Apple
Melon

How to Add Elements to an Array?

We’ve seen how to create an Array, be it empty or non-empty. Now let’s see how to add new elements to it. Since we are working with indexed collections we will be operating with indexes.

As we already had created an Array of 4 empty elements, let’s work with that. To add an element, all we have to do is access the element through its index and assign a value to it:

How to Add Elements to an Array?

We’ve seen how to create an Array, be it empty or non-empty. Now let’s see how to add new elements to it. Since we are working with indexed collections we will be operating with indexes.

As we already had created an Array of 4 empty elements, let’s work with that. To add an element, all we have to do is access the element through its index and assign a value to it:

let myArray1 = new Array(4)
myArray1[0] = "First"
myArray1[1] = "Second"
myArray1[2] = "third"
myArray1[3] = "fourth"
console.log(myArray)

Output:

['First', 'Second', 'third', 'fourth']

Even though we allocated 4 spaces for elements when creating an array, in JavaScript, arrays are made dynamically, which means you can shrink or expand them at any time.

This means that we can add more elements to our Array, even though we “bordered” it with 4 spaces:

myArray1[4] = "fifth"
myArray1[5] = "sixth"
console.log(myArray) 

Output:

 ['First', 'Second', 'third', 'fourth', 'fivth', 'sixth']

We can easily iterate through an array using a forloop or a forEach loop:console.log(‘Traditional for loop:’)

for (let i = 0; i < myArray1.length ; i++) {
	console.log(myArray1[i]);
}
console.log('Functional forEach loop:')
myArray1.forEach( function (element){ console.log(element);});

Output

Traditional for loop:

First
Second
third
fourth
fifth
sixth

Functional forEach loop:

First
Second
third
fourth
fifth
sixth

TypedArray Object

Array objects are perfect for working with any data type in JavaScript since they can store different types of elements in one array and has powerful methods to manipulate those elements.

However, when there is a need to work with raw binary data – that’s when TypedArray objects come into play. Raw data is processed when manipulating audio and video.

The architecture of a TypedArray Object

JavaScript typed arrays are divided into buffers and views. A buffer is an object only storing a chunk of data, with no methods to access or manipulate that data.

To achieve that, you must use a view – which provides a context, a data type that turns data into a TypedArray.

A buffer is implemented through an ArrayBuffer object. It is used to represent a fixed-length binary data buffer. To represent this buffer, we have to create a view – DataView – which represents that buffer in a chosen format. There are various types of views, representing the most common numeric types:

Int8Array - value range [-128, 127]

How to Create a Typed Array?

When creating a TypedArray object of a certain type, we achieve what we previously talked about – creating a buffer and a view. There is no explicit constructor for the TypedArray object – there is no new TypedArray()

syntax – we directly instantiate the type of array we need:

let tArray = new Int8Array(8);

Array methods

• concat(): joins two arrays and returns a new array.

var myArray = new Array('1', '2', '3');
myArray = myArray.concat('a', 'b', 'c'); 
// myArray is now ["1", "2", "3", "a", "b", "c"]

• join(delimiter = ‘,’): joins all elements of an array into a string.

var employees = new Array('king', 'Adham', 'Ali');
var list = employees.join(' - ');      // list is "king - Adham - Ali"

• push(): adds one or more elements to the end of an array and returns the resulting length of the array.

var numbers = new Array('1', '2');
numbers.push('3'); // numbers is now ["1", "2", "3"]

• pop(): removes the last element from an array and returns that element.

var numbers = new Array('1', '2', '3');
var last = numbers.pop(); 
// numbers is now ["1", "2"], last = "3"

• shift(): removes the first element from an array and returns that element.

var numbers = new Array('1', '2', '3');
var first = numbers.shift(); 
// numbers is now ["2", "3"], first is "1"