JavaScript Array

In JavaScript, When we need to store multiple values in a single variable. We define variable as Array. Array is very important part of any programming language. It is also know as Non-Primitive data types. We can easily manage & manipulate collections of data using Array. In this article, we will learn about JavaScript Array, their methods in depth with the help of examples.

What is an Array?

A unique variable that can store multiple values at once is called an array. Arrays store ordered collections of values, unlike simple data types like strings or numbers. Any data type, such as numbers, strings, objects, or even additional arrays (nested arrays), may be used for these values.

Creating an Array

There are multiple ways to create an array in JavaScript:

Using an Array Literal

let fruits = ["Apple", "Banana", "Cherry"];

Using the new Array() Constructor

let numbers = new Array(1, 2, 3, 4, 5);

Creating an Empty Array

let emptyArray = [];

let anotherEmptyArray = new Array();

Accessing Array Elements

Array elements are accessed using their index, starting from 0.

Example

console.log(fruits[0]);
console.log(fruits[1]);

Output

Apple

Banana

If you try to access an index that does not exist, JavaScript returns undefined.

Example

console.log(fruits[10]);

Output

undefined

Modifying Arrays

Changing an Element

fruits[1] = "Blueberry";

console.log(fruits);

Output

["Apple", "Blueberry", "Cherry"]

Adding Elements

Using push() (Adds to the End)

Example

fruits.push("Orange");

console.log(fruits);

Output

["Apple", "Blueberry", "Cherry", "Orange"]

Using unshift() (Adds to the Beginning)

Example

fruits.unshift("Grapes");

console.log(fruits);

Output

["Grapes", "Apple", "Blueberry", "Cherry", "Orange"]

Removing Elements

Using pop() (Removes the Last Element)

Example

fruits.pop();

console.log(fruits);

Output

["Grapes", "Apple", "Blueberry", "Cherry"]

Using shift() (Removes the First Element)

Example

fruits.shift();

console.log(fruits);

Array Length

The length property gives the number of elements in an array.

Example

console.log(fruits.length);

Output

Iterating Over Arrays

Using for Loop

Example

for (let i = 0; i < fruits.length; i++) 
{
    console.log(fruits[i]);
}

Using forEach()

Example

fruits.forEach((fruit) => console.log(fruit));

Using map() (Creates a New Array)

let uppercasedFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(uppercasedFruits);

Searching and Filtering

indexOf() (Finds Index of an Element)

Example

console.log(fruits.indexOf("Cherry"));

Output

includes() (Checks if an Element Exists)

Example

console.log(fruits.includes("Banana"));

Output

false

find() (Finds the First Match)

Example

let numbers = [10, 20, 30, 40, 50];
let found = numbers.find(num => num > 25);
console.log(found);

Output

filter() (Finds All Matches)

Example

let filteredNumbers = numbers.filter(num => num > 25);
console.log(filteredNumbers);

Output

[30, 40, 50]

Transforming Arrays

map() (Creates a New Transformed Array)

Example

let squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers);

Output

[100, 400, 900, 1600, 2500]

reduce() (Reduces to a Single Value)

Example

let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum);

Output

150

Sorting and Reversing

sort() (Alphabetical Sorting)

Example

fruits.sort();
console.log(fruits);

Output

["Apple", "Blueberry", "Cherry"]

reverse() (Reverses the Order)

Example

fruits.reverse();
console.log(fruits);

Output

["Cherry", "Blueberry", "Apple"]

Combining and Slicing Arrays

concat() (Combines Two Arrays)

Example

let fruits = ["Apple", "Banana"];
let vegetables = ["Carrot", "Broccoli"];
let food = fruits.concat(vegetables);
console.log(food);

Output

[ 'Apple', 'Banana', 'Carrot', 'Broccoli' ]

slice() (Extracts a Portion of an Array)

Example

let fruits = ["Apple", "Banana", "Orange"];
let someFruits = fruits.slice(1, 3);
console.log(someFruits);

Output

[ 'Banana', 'Orange' ]

splice() (Modifies an Array)

Example

let fruits = ["Apple", "Banana", "Orange"];
fruits.splice(1, 1, "Peach");
console.log(fruits);

Output

[ 'Apple', 'Peach', 'Orange' ]

Working with Nested Arrays

Example

let nestedArray = [[1, 2], [3, 4], [5, 6]];
console.log(nestedArray[1][0]);

Output

Flattening a nested array

Example

let nestedArray = [[1, 2], [3, 4], [5, 6]];
console.log(nestedArray.flat());

Output

[ 1, 2, 3, 4, 5, 6 ]

Conclusion

JavaScript arrays have great flexibility and power. They offer a variety of integrated techniques for effective data manipulation and transformation. Your proficiency with handling data in JavaScript apps will be greatly enhanced by learning these array methods. Continue honing your skills and using JavaScript arrays to their best potential!