What is an Array?

Arrays are one of the most fundamental data structures in computer science and are used extensively in various programming languages, including JavaScript. An array is a collection of elements that can be of any data type, including numbers, strings, objects, and even other arrays.

Declaration

In JavaScript, arrays can be declared using the [] notation, and elements can be added to the array by using the push() method or by assigning values to specific indices.

Here's how:

var guests = [];
guests.push("Albus");
guests.push("Bharati");
guests.push("Ciara");
console.log(guests); // Output: [ "Albus", "Bharati", "Ciara" ]

In this example, we first declared an empty array guests. Then, we added three elements to the array using the push() method. Finally, we logged the entire array to the console.

Arrays can also be declared with elements already in them, like this:

var fruits = ["apple", "banana", "cherry"];
console.log(fruits); // Output: [ "apple", "banana", "cherry" ]

In this example, we declared an array fruits with three elements.

Storing Data

Arrays can also be used to store elements of different data types in the same array, as long as each element has a distinct type.

Here's how:

var mix = [1, "two", { three: 3 }, [4, 5, 6]];
console.log(mix); // Output: [ 1, "two", { three: 3 }, [ 4, 5, 6 ] ]

In this example, the mix array contains elements of different data types: a number, a string, an object, and an array.

Arrays can also be multi-dimensional, meaning they can hold other arrays as elements. This allows us to represent more complex data structures, such as matrices or tables.

var matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
console.log(matrix[1][2]); // Output: 6

In this example, matrix is a 2-dimensional array, where each element is itself an array of numbers. We can access elements in the matrix by using two indices, the first for the outer array and the second for the inner array.

Length

Arrays have a length property that returns the number of elements in the array.

Here's how:

var guests = ["Alice", "Bob", "Carol"];
console.log(guests.length); // Output: 3

Splice

In addition to adding elements to the end of an array, you can also insert elements into specific positions in the array. This is done by using the splice() method. The first argument of the splice() method is the starting index, and the second argument is the number of elements to be removed. Any additional arguments are the elements to be inserted at the starting index.

Here's how:

var guests = ["Albus", "Bharati", "Ciara"];
guests.splice(1, 0, "Dhawal");
console.log(guests); // Output: [ "Albus", "Dhawal", "Bharati", "Ciara" ]

Here, the splice() method is used to insert the element "Dhawal" into the guests array at index 1. The first argument is 1, which is the starting index. The second argument is 0, which means no elements will be removed. And the third argument is "Dhawal", which is the element to be inserted at index 1.

Looping

Arrays can also be looped through using a for loop. The for loop can access each element in the array by using an index.

Here's how:

var fruits = ["apple", "banana", "cherry"];
for (var i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
// Output:
// apple
// banana
// cherry

Arrays can also be looped through using the forEach() method, which takes a callback function as an argument. The callback function is called once for each element in the array and is passed the current element as an argument.

Here's how:

var fruits = ["apple", "banana", "cherry"];
fruits.forEach(function(fruit) {
    console.log(fruit);
    }
);
// Output:
// apple
// banana
// cherry

In this example, the forEach() method is used to loop through the fruits array. The forEach() method takes a callback function as an argument, which is called once for each element in the array.

In each iteration of the loop, the current element is passed to the callback function as an argument and is logged to the console using the console.log() method.

Map, Filter, and Reduce

Map

Arrays can also be transformed into new arrays using the map() method. The map() method takes a callback function as an argument and returns a new array with the results of calling the callback function on each element in the original array.

Here's how:

var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.map(function(number) {
    return number \* 2;
});
console.log(doubled); // Output: [ 2, 4, 6, 8, 10 ]

In this example, the map() method is used to transform the numbers array into a new array called doubled. The map() method takes a callback function as an argument, which is called once for each element in the numbers array. In each iteration of the loop, the current element is passed to the callback function as an argument, and the result of the callback function is added to the doubled array. Finally, the doubled array is logged to the console.

Filter

Arrays can also be filtered into new arrays using the filter() method. The filter() method takes a callback function as an argument and returns a new array with only the elements from the original array for which the callback function returns true.

Here's how:

var numbers = [1, 2, 3, 4, 5];
var evens = numbers.filter(function(number) {
    return number % 2 === 0;
});
console.log(evens); // Output: [ 2, 4 ]

In this example, the filter() method is used to filter the numbers array into a new array called evens.

The filter() method takes a callback function as an argument, which is called once for each element in the numbers array. In each iteration of the loop, the current element is passed to the callback function as an argument, and the result of the callback function is used to determine whether the element should be included in the evens array.

If the result of the callback function is true, the current element is included in the evens array. Finally, the evens array is logged into the console.

Reduce

Arrays can also be reduced to a single value using the reduce() method. The reduce() method takes a callback function as an argument and returns a single value that is the result of the callback function being called on each element in the array, starting with an accumulator value that is specified as the second argument to the reduce() method.

Here's how:

var numbers = [1, 2, 3, 4, 5];
var sum = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 15

Here, the reduce() method is used to reduce the numbers array to a single value, which is the sum of all the numbers in the array. The reduce() method takes a callback function as an argument, which is called once for each element in the numbers array.

The first argument to the callback function is the accumulator, which is initialized to the value of 0 in this case. The second argument to the callback function is the current element in the array.

In each iteration of the loop, the accumulator is updated to be the result of the previous iteration of the callback function, and the current element is added to the accumulator. Finally, the value of the accumulator after all iterations is the value of the sum variable and is logged into the console.

Conclusion

These are just a few of the many ways that arrays can be used in JavaScript. Whether you are working with large amounts of data or just need to store a small list of values, arrays are a fundamental building block of many programs and can help make your code more readable, maintainable, and efficient.

Learning and mastering arrays can be very rewarding as they help you crack the DS part of the DSA, required for interviews.