What is and how to use JavaScript Array

JavaScript Arrays are one of the most fundamental data structures in JavaScript programming. They allow you to store multiple values ​​in a single variable, facilitating the organization and manipulation of large sets of data.

With diverse methods and functionalities, Arrays in JavaScript offer a wide range of operations, from simple addition and removal of elements to complex transformations and filtering. Understanding how to use Arrays efficiently is essential for any developer who wants to create robust and performant applications.

1. What is an Array?

An Array in JavaScript is a data structure used to store multiple values in a single variable. It is a collection of elements where each element has an index (position).

2. How to create an Array?

How to use Brackets ([]) in JavaScript Array

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

Using the Array constructor

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

3. Accessing Array elements

Array elements are accessed using their index, which starts at 0.

let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits[0]); // Output: Apple
console.log(fruits[1]); // Output: Banana
console.log(fruits[2]); // Output: Orange

4. Basic Array methods

push()

Adds one or more elements to the end of the Array.

let fruits = ["Apple", "Banana"];
fruits.push("Orange");
console.log(fruits); // Output: ["Apple", "Banana", "Orange"]

pop()

Removes the last element from the Array.

let fruits = ["Apple", "Banana", "Orange"];
fruits.pop();
console.log(fruits); // Output: ["Apple", "Banana"]

shift()

Removes the first element from the Array.

let fruits = ["Apple", "Banana", "Orange"];
fruits.shift();
console.log(fruits); // Output: ["Banana", "Orange"]

unshift()

Adds one or more elements to the beginning of the Array.

let fruits = ["Banana", "Orange"];
fruits.unshift("Apple");
console.log(fruits); // Output: ["Apple", "Banana", "Orange"]

5. Iterating over Arrays

for

let fruits = ["Apple", "Banana", "Orange"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
// Output:
// Apple
// Banana
// Orange

for…of

let fruits = ["Apple", "Banana", "Orange"];
for (let fruit of fruits) {
    console.log(fruit);
}
// Output:
// Apple
// Banana
// Orange

Using forEach

let fruits = ["Apple", "Banana", "Orange"];
fruits.forEach(function(fruit) {
    console.log(fruit);
});
// Output:
// Apple
// Banana
// Orange

6. Array transformation methods

map()

Creates a new Array with the results of calling a function for every Array element.

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(function(num) {
    return num * 2;
});
console.log(doubled); // Output: [2, 4, 6, 8]

filter()

Creates a new Array with all elements that pass the test implemented by the provided function.

let numbers = [1, 2, 3, 4];
let evenNumbers = numbers.filter(function(num) {
    return num % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4]

reduce()

Applies a function against an accumulator and each element in the Array (from left to right) to reduce it to a single value.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce(function(total, num) {
    return total + num;
}, 0);
console.log(sum); // Output: 10

7. Array search methods

find()

Returns the first element in the Array that satisfies the provided testing function.

let numbers = [1, 2, 3, 4];
let greaterThanTwo = numbers.find(function(num) {
    return num > 2;
});
console.log(greaterThanTwo); // Output: 3

findIndex()

Returns the index of the first element in the Array that satisfies the provided testing function.

let numbers = [1, 2, 3, 4];
let indexGreaterThanTwo = numbers.findIndex(function(num) {
    return num > 2;
});
console.log(indexGreaterThanTwo); // Output: 2

8. Other useful methods

concat()

Merges two or more Arrays and returns a new Array.

let array1 = ["A", "B"];
let array2 = ["C", "D"];
let newArray = array1.concat(array2);
console.log(newArray); // Output: ["A", "B", "C", "D"]

slice()

Returns a shallow copy of a portion of an Array into a new Array object.

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

splice()

Adds/removes elements from an Array.

let fruits = ["Apple", "Banana", "Orange"];
fruits.splice(1, 1, "Grape");
console.log(fruits); // Output: ["Apple", "Grape", "Orange"]

9. Multidimensional Array

An Array that contains other Arrays.

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

10. Checking if it’s an Array

Array.isArray()

let fruits = ["Apple", "Banana", "Orange"];
console.log(Array.isArray(fruits)); // Output: true

let notArray = "Hello";
console.log(Array.isArray(notArray)); // Output: false

This is an overview of JavaScript Array, covering basic creation and manipulation to more advanced methods. Arrays are a part of JavaScript programming and understanding how to work with them is crucial to developing effective applications.