Arrays in JavaScript

Arrays in Javascript

An array is a global object that can store a variety of items and objects. In JavaScript, an array can also be used as a list, a stack, or a queue. Items in arrays might be of the same data type or a mix of data types.

An array is a single variable in JavaScript that is used to store several elements. When we wish to keep a list of elements and access them with a single variable, we utilise it frequently. It's a more practical approach of storing and structuring data than declaring dozens of new variables with slightly varying names, such as this.

var play0 = 'Cricket';
var play1 = 'Football';
var play2 = 'Volleyball';

Instead of the above, we can structure the data using an array, as seen below:

// Initializing while declaring
var game = ["Cricket", "Football", "Volleyball"];

Features of Arrays in JavaScript

⮞ Arrays aren't primitives in JavaScript; instead, they're Array objects with the following essential characteristics:

⮞ JavaScript arrays can be resized and hold a variety of data types. (Use typed arrays instead if those features are undesirable.)

⮞ Because JavaScript arrays are not associative, array items cannot be accessed using strings as indexes; consequently, integers must be used for indexing.

⮞ The first element of a JavaScript array is at index 0, the second at index 1, and so on — with the last element at the value of the array's length property minus one.

⮞ Shallow copies are created by JavaScript array copy operations. (With any JavaScript object, the basic built-in copy operations make shallow copies rather than deep copies.)

Declaration of an Array

An array can be declared in one of two ways.

With the literal notation []

var array = [101, 1, 3]

With the Array() constructor

var array = new Array(101, 1, 3)

Both ways are essentially the same, however most people use literal notation because it is easier to type and requires less code.

Arrays can contain anything — integers, texts, functions, and even other arrays — and you can freely combine different types of data within them.

var n = [1, 2, 3]
var strs = ['name', 'place', 'food' ]
var func = [ foo x(){...}, foo y(){...} ]
var misc = [ 12, 'game', func xy(){...} ]

Accessing elements in Array

An index number can be used to access the values of an array. The location of an item in an array can be defined as an index number. To access the value, we use the index number in a square bracket to refer to the members of an array.

var array = [ 'v1', 'v2', 'v3']
alert(array[0]); // alerts v1.

💡 The indexing of arrays begins at zero. In the example above, array[0] notifies the first item of the array, whereas array[1] alerts the second.

The Essential Methods

Within JavaScript arrays, there are numerous utility methods. In this article, we'll look at a few of the most essential.

Map

One of the methods accessible on the JavaScript array prototype is the Map function. It returns the results of invoking a callback function on each member in the calling array in a new array.

Syntax: array.map((value, index, array) => { ... });

Here, value is the current element's value, index is the current element's array index, and array is the array object to which the current element belongs.

const arr = [10, 20, 30, 40];
// pass a function to map
const newarr = arr.map(x => x * 2);
console.log(newarr); // [20, 40, 60, 80]

Reduce

The reduce() method applies the reducer function to each element of the array, resulting in a single output value.

Syntax: arr.reduce(callback(accumulator, currentValue, index, array), initialValue)

The accumulator, which is the current aggregated value, and the currentValue, which is the current item in the loop, are the two arguments to the callback function. The accumulator for the next item in the loop is the returned value. Instead, that initial value is used in the very first loop. index is the current element's array index, which is optional, and array is the array object to which the current element belongs. This is essentially a non-obligatory argument.

const array2 = [10, 20, 30, 40];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(array2.reduce(reducer)); //100

Filter

Unlike map(), the filter() method returns a new array containing all elements that satisfy the callback function's criterion.

Syntax: array.filter(callback[, thisObject]);

//Filter function
var numbers = [10, 20, 30, 24, 25, 31];
const result = numbers.filter(number => number < 30);
console.log(result); //[10, 20, 24, 25]

Conclusion: So there you have it, your first journey into the JavaScript realm. We've started with only an introduction to arrays and it's different methods in javascript.