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!