Exploring JavaScript Arrays: Fundamentals and Practical Uses

Array is a data structure that lets you store and organize multiple values in a single variable. In JavaScript, it can be of any type, such as numbers, strings, objects, or even other arrays. Arrays are ordered collections, meaning each value has a specific position, known as an index, starting from 0 for the first element. With its ordered structure and a variety of built-in methods, arrays enable developers to manipulate data with ease, whether it's iterating through elements, adding or removing items, or transforming the content.

Initializing Arrays

let dataStructures = ['array', 'linkedList', 'tree', 'graph'];
let numbers = new Array(1, 2, 3);
let lettersFromName = Array.from('Subham'); // Creates ['S', 'u', 'b', 'h', 'a', 'm']
let numArray = Array.of(1, 2, 3); // Creates [1, 2, 3]

Array methods

• Iteration: forEach, map, filter , for..of

let arr = [1, 2, 3, 4, 5];

//forEach method
arr.forEach(function(number) {
    console.log(number);
});


//map method
let updatedArr = arr.map(function(number) {
    return number + 10; // Creates a new array with current element + 10
});
console.log(updatedArr); 


//filter method
let evenNumbers = arr.filter(function(number) {
    return number % 2 === 0; // Filters out odd numbers
});
console.log(evenNumbers);


//for..of (also known as Symbol.Iterator)
for (let number of arr) {
    console.log(number);
}

• Adding elements: push, unshift

let numbers = [1,2,3];

/*unshift - adds one or more elements to the beginning of an 
array and returns the new length of the array*/
numbers.unshift(0); // [0,1,2,3]
console.log(numbers.unshift(-1)); // 5  (returns the size of updated array)
//updated array : numbers = [-1,0,1,2,3]


//push - adds element to the end of the array
numbers.push(4); // [-1,0,1,2,3,4]
console.log(numbers.push(5)); // 7  (returns the size of updated array)
//updated array : numbers = [-1,0,1,2,3,4,5]

• Modifying elements: splice, fill

let arr= [1, 2, 3, 4, 5];

//splice
//Removing elements
arr.splice(0, 2); //removes 2 elements starting from index=0
console.log(arr); // [3,4,5]

//Replacing elements
arr.splice(1, 1, 10, 11, 12); // Replace 1 element at index 1 with new values
console.log(arr); // [ 1, 10, 11, 12, 3, 4, 5 ]

/* Note: first value will decide the index, second will decide the number of
    element starting from the index to be replaced, all the elements after 
    that will be used as values to be replaced.
*/


//fill
arr.fill(0); // fills the entire array with the value 0
console.log(arr); // [0, 0, 0, 0, 0]

arr.fill(0, 1, 3); // fills the array with the value 0 from index 1 to 2
console.log(arr); // [1, 0, 0, 4, 5]

• Removing elements: pop, shift

let arr = [1,2,3,4,5];

//pop
arr.pop(); // removes an element from the end. arr = [1,2,3,4]
let removedElement = arr.pop();
console.log(removedElement); // 4

arr = [1,2,3,4,5];
//shift
arr.shift(); // removes an element from the beginning. arr = [2,3,4,5]
removedElement = arr.shift();
console.log(removedElement); // 2

• Combining arrays : concat

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combinedArray = arr1.concat(arr2);

console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

Array Properties

let arr = [1,2,3,4,5];

//length
console.log(arr.length); // 5 

//constructor
console.log(arr.constructor); // Array()

//isArray
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(3)); // false

//prototype
Array.prototype.update = function() {
    this.fill(0); // access array using `this` keyword
};
let numbers = [1, 2, 3];
numbers.update();
console.log(numbers); // [0,0,0]

In conclusion, mastering arrays grants you a crucial skill set to construct dynamic and responsive JavaScript applications.