Understanding Arrays in JavaScript

Arrays in JavaScript

In JavaScript, an array is a special type of object used to store ordered collections of data. Arrays can hold multiple values of different data types, including numbers, strings, objects, or even other arrays.

---

1. Creating Arrays

A. Using Array Literal

The most common way to create an array is by using square brackets [].

Example:

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

B. Using new Array() Constructor

This method creates an empty array or an array with specified elements.

Example:

const numbers = new Array(5); // Creates an array with 5 empty slots
console.log(numbers.length); // Output: 5
const colors = new Array("Red", "Green", "Blue");
console.log(colors); // Output: ["Red", "Green", "Blue"]

---

2. Accessing Array Elements

Array elements are accessed using zero-based indexing.

Example:

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

• Updating Elements:

const numbers = new Array(5); // Creates an array with 5 empty slots
console.log(numbers.length); // Output: 5
const colors = new Array("Red", "Green", "Blue");
console.log(colors); // Output: ["Red", "Green", "Blue"]

---

3. Common Array Methods

A. Adding and Removing Elements

• push(): Adds an element to the end of the array.

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
console.log(fruits[2]); // Output: Cherry

• pop(): Removes the last element.

fruits[1] = "Blueberry";
console.log(fruits); // Output: ["Apple", "Blueberry", "Cherry"]

• unshift(): Adds an element to the beginning.

fruits.push("Mango");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Mango"]

• shift(): Removes the first element.

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

B. Finding Elements

• indexOf(): Finds the index of an element.

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

• includes(): Checks if an element exists in the array.

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

C. Transforming Arrays

• map(): Creates a new array by transforming each element.

console.log(fruits.indexOf("Banana")); // Output: 1

• filter(): Creates a new array with elements that pass a test.

console.log(fruits.includes("Cherry")); // Output: false

• reduce(): Reduces the array to a single value.

const numbers = [1, 2, 3];
const squared = numbers.map((num) => num ** 2);
console.log(squared); // Output: [1, 4, 9]

D. Combining and Slicing Arrays

• concat(): Combines two or more arrays.

const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2]

• slice(): Returns a portion of the array.

const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 6

• splice(): Adds or removes elements from an array.

const moreFruits = ["Peach", "Grape"];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // Output: ["Apple", "Banana", "Peach", "Grape"]

---

4. Iterating Over Arrays

• for Loop:

const sliced = allFruits.slice(1, 3);
console.log(sliced); // Output: ["Banana", "Peach"]

• for...of Loop:

allFruits.splice(1, 1, "Orange");
console.log(allFruits); // Output: ["Apple", "Orange", "Peach", "Grape"]

• forEach() Method:

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

---

5. Multi-Dimensional Arrays

Arrays can contain other arrays, creating a matrix or multi-dimensional structure.

Example:

for (let fruit of fruits) {
  console.log(fruit);
}

---

6. Sorting and Reversing Arrays

• sort(): Sorts the array in place.

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

• reverse(): Reverses the order of elements.

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

---

7. Array Destructuring

Destructuring allows you to extract values from arrays into variables.

Example:

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

---

8. Summary

• Arrays are used to store ordered collections of data in JavaScript.
• Access elements using indices.
• Use array methods like push(), map(), filter(), and reduce() for manipulation and transformation.
• Arrays are versatile and essential for handling dynamic collections of data in JavaScript.

Hi, I'm Abhay Singh Kathayat!
I am a full-stack developer with expertise in both front-end and back-end technologies. I work with a variety of programming languages and frameworks to build efficient, scalable, and user-friendly applications.
Feel free to reach out to me at my business email: kaashshorts28@gmail.com.

The above is the detailed content of Understanding Arrays in JavaScript. For more information, please follow other related articles on the PHP Chinese website!