JS Arrays

Overview

Arrays in JavaScript are versatile and fundamental data structures used to store and manage collections of values. They are ordered, indexed, and can hold various data types, including numbers, strings, objects, and even other arrays. Arrays play a crucial role in data manipulation and storage in JavaScript.

Creating Arrays

You can create an array in JavaScript using various methods:

        
            let fruits = ["apple", "banana", "orange"];
        
    

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

Accessing Elements

Array elements are accessed using zero-based indices, with the first element at index 0.

        
            let fruits = ["apple", "banana", "orange"];

console.log(fruits[0]);  // "apple"
console.log(fruits[1]);  // "banana"

        
    

Array Length

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

        
            let fruits = ["apple", "banana", "orange"];

console.log(fruits.length);  // 3
        
    

Adding and Removing Elements

Arrays provide methods for adding or removing elements.

• push(): Adds one or more elements to the end of the array.
• pop(): Removes the last element from the end of the array.
• unshift(): Adds one or more elements to the beginning of the array.
• shift(): Removes the first element from the beginning of the array.

        
            let fruits = ["apple", "banana", "orange"];

let push_result = fruits.push("grape");       // ["apple", "banana", "orange", "grape"]
let pop_result = fruits.pop();                // ["apple", "banana", "orange"]
let unshift_result = fruits.unshift("pear");  // ["pear", "apple", "banana", "orange"]
let shift_result = fruits.shift();            // ["apple", "banana", "orange"]

console.log(push_result);    // ["apple", "banana", "orange", "grape"]
console.log(pop_result);     // ["apple", "banana", "orange"]
console.log(unshift_result); // ["pear", "apple", "banana", "orange"]
console.log(shift_result);   // ["apple", "banana", "orange"]


        
    

Iterating Through Arrays

You can loop through arrays using for loops or methods like forEach(), map(), and filter().

        
            let fruits = ["apple", "banana", "orange"];

fruits.forEach(function(fruit) { // with regular function
    console.log(fruit);
});

fruits.forEach((fruit) => {      // with arrow function
    console.log(fruit);
});

let numbers = [1, 2, 3, 4, 5];
let doubled1 = numbers.map(function(number) {  // with regular function
    return number * 2;
});

console.log(doubled1);

let doubled2 = numbers.map((number) => {       // with arrow function
    return number * 2;
});

console.log(doubled2);

        
    

Array Methods

JavaScript provides numerous array methods for manipulation and transformation.

• concat(): Combines arrays.
• join(): Converts an array into a string.
• slice(): Extracts a portion of an array.
• splice(): Adds or removes elements from an array.
• indexOf(): Searches for elements
• lastIndexOf(): Searches for elements.
• sort(): Sorts array elements.
• reverse(): Reverses array elements.
• filter(): Creates a new array with filtered elements.
• map(): Creates a new array with transformed elements.
• reduce(): Accumulate values.
• reduceRight(): Accumulate values.
• every(): Check array elements against a condition.
• some(): Check array elements against a condition.
• find(): Find elements by condition.
• findIndex(): Find elements by condition.
• isArray(): Checks if a value is an array.
• includes(): Checks if an array includes a specific element.
• some(): Checks if at least one element satisfies a condition.
• fill(): Fills all or part of an array with a static value.
• from(): Creates a new array from an iterable object.

Multidimensional Arrays

Arrays can contain other arrays, creating multidimensional arrays.

        
            let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

        
    

Array Destructuring (ES6)

ES6 introduced array destructuring for easily extracting values from arrays.

        
            const fruits = ["apple", "banana", "orange"];

// 1. CASE Destructuring assignment
const [first, second] = fruits;  // Destructuring assigns "apple" to first and "banana" to second.


const colors = ["red", "green", "blue"];

// 2. CASE Destructuring assignment
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor);  // "red"
console.log(secondColor); // "green"
console.log(thirdColor);  // "blue"


const fruits2 = ["apple", "banana", "cherry", "date"];

// 3. CASE Destructuring assignment
const [, , thirdFruit] = fruits2;

console.log(thirdFruit); // "cherry"


        
    

Summary

Arrays are versatile and fundamental data structures in JavaScript, allowing you to store and manipulate collections of data efficiently. Understanding array methods and techniques is essential for effective data management and manipulation.