JavaScript Arrays 101

What arrays are and why we need them ?

An array is a special type of variable in programming that can store multiple values in single variable. Imagine you to store 100 values so it is not possible to create 100 variables so we need array we can store multiple values in one variable.

1. To Store Multiple Values in One Variable

2. To avoid repetition of code

   Without arrays, code becomes long and messy.

3. To Use loops easily

4. To Perform operations easily You can:

   • Add values

   • Remove values

   • Find values

   • Sort values

   • Filter values

How to create an array ?

We can create array using these methods

1. Using Array Literal

2. Using the Array constructor
   Using Array Literal:- This is the easiest and most readable method, where you define the elements inside square brackets []. Elements are separated by commas and can be of any data type (strings, numbers, objects). For example:- const fruits = ['apple', 'banana', 'cherry']; const mixedArray = ['John Doe', 24, true];

Using the Array constructor:- You can also use the Array() constructor with the new keyword. For example:- let colors = new Array('red', 'green', 'blue');

Accessing elements using index

You can access array elements using their numeric index with two primary methods: Square bracket notation [] and at() method. Array indexing is zero-based, meaning the first element is at index 0.

Square Bracket Notation []:- This is the most common and traditional way to access elements. You append the index number inside square brackets to the array variable name.

For example:-

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let firstFruit = fruits[0]; // "Banana"

The at() method provides a modern way to access elements and is particularly useful for counting from the end of the array using negative indices. This was introduced to solve the problem of not being able to use negative indices with the square bracket notation.

For example:-

With negative index

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let lastFruit = fruits.at (-1); // "Mango" (last element)

let secondLast = fruits.at (-2); // "Apple" (second to last element)

With positive index

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let secondFruit = fruits.at(1); // "Orange"

Updating elements

You can update elements in array using the splice() method or iterative methods like map() and forEach(). The best method depends on whether you need to modify the original array (mutation) or create a new one (immutability).

The splice() method

The splice() method can add, remove, and replace elements in place. To update, you specify the starting index, the number of elements to remove, and the new elements to add.

The forEach() method

You can iterate through the array using forEach() and modify elements based on a condition or their index. This method modifies the original array.

The map() method

The map() method is useful when you want to update elements without modifying the original array, as it returns a new array with the transformed elements.

Array length property

The length property tells you how many elements are there in array.

For example:-

let array = [10, 20, 30, 40];

console.log(array.length); //Output 4

Key pints of Length property:-

• If you increase length, empty slots are created.

• If you decrease length, extra elements are removed.

• If you assign a value to a high index, length increases accordingly.

• You can manually change the length value

• It is a property, not a function.

Basic looping over arrays

You can loop over arrays using following methods:-

The for Loop method

The for....of Loop method

The forEach() method

The for Loop method:- The for loop provides fine-grained control over the iteration process and index management.

The for....of Loop method:- The for...of loop provides a cleaner, more readable syntax for iterating directly over the value of an array.

The forEach() method:- The forEach()method is an array-specific method that executes a provided callback function once for each element in the array.