DEV Community

Abhay Yt
Abhay Yt

Posted on

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

2. Accessing Array Elements

Array elements are accessed using zero-based indexing.

Example:

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
console.log(fruits[2]); // Output: Cherry
Enter fullscreen mode Exit fullscreen mode
  • Updating Elements:
fruits[1] = "Blueberry";
console.log(fruits); // Output: ["Apple", "Blueberry", "Cherry"]
Enter fullscreen mode Exit fullscreen mode

3. Common Array Methods

A. Adding and Removing Elements

  • push(): Adds an element to the end of the array.
fruits.push("Mango");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Mango"]
Enter fullscreen mode Exit fullscreen mode
  • pop(): Removes the last element.
fruits.pop();
console.log(fruits); // Output: ["Apple", "Banana"]
Enter fullscreen mode Exit fullscreen mode
  • unshift(): Adds an element to the beginning.
fruits.unshift("Strawberry");
console.log(fruits); // Output: ["Strawberry", "Apple", "Banana"]
Enter fullscreen mode Exit fullscreen mode
  • shift(): Removes the first element.
fruits.shift();
console.log(fruits); // Output: ["Apple", "Banana"]
Enter fullscreen mode Exit fullscreen mode

B. Finding Elements

  • indexOf(): Finds the index of an element.
console.log(fruits.indexOf("Banana")); // Output: 1
Enter fullscreen mode Exit fullscreen mode
  • includes(): Checks if an element exists in the array.
console.log(fruits.includes("Cherry")); // Output: false
Enter fullscreen mode Exit fullscreen mode

C. Transforming Arrays

  • map(): Creates a new array by transforming each element.
const numbers = [1, 2, 3];
const squared = numbers.map((num) => num ** 2);
console.log(squared); // Output: [1, 4, 9]
Enter fullscreen mode Exit fullscreen mode
  • filter(): Creates a new array with elements that pass a test.
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2]
Enter fullscreen mode Exit fullscreen mode
  • reduce(): Reduces the array to a single value.
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 6
Enter fullscreen mode Exit fullscreen mode

D. Combining and Slicing Arrays

  • concat(): Combines two or more arrays.
const moreFruits = ["Peach", "Grape"];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // Output: ["Apple", "Banana", "Peach", "Grape"]
Enter fullscreen mode Exit fullscreen mode
  • slice(): Returns a portion of the array.
const sliced = allFruits.slice(1, 3);
console.log(sliced); // Output: ["Banana", "Peach"]
Enter fullscreen mode Exit fullscreen mode
  • splice(): Adds or removes elements from an array.
allFruits.splice(1, 1, "Orange");
console.log(allFruits); // Output: ["Apple", "Orange", "Peach", "Grape"]
Enter fullscreen mode Exit fullscreen mode

4. Iterating Over Arrays

  • for Loop:
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
Enter fullscreen mode Exit fullscreen mode
  • for...of Loop:
for (let fruit of fruits) {
  console.log(fruit);
}
Enter fullscreen mode Exit fullscreen mode
  • forEach() Method:
fruits.forEach((fruit) => console.log(fruit));
Enter fullscreen mode Exit fullscreen mode

5. Multi-Dimensional Arrays

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

Example:

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

6. Sorting and Reversing Arrays

  • sort(): Sorts the array in place.
const numbers = [3, 1, 4, 1, 5];
numbers.sort();
console.log(numbers); // Output: [1, 1, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode
  • reverse(): Reverses the order of elements.
numbers.reverse();
console.log(numbers); // Output: [5, 4, 3, 1, 1]
Enter fullscreen mode Exit fullscreen mode

7. Array Destructuring

Destructuring allows you to extract values from arrays into variables.

Example:

const [first, second] = fruits;
console.log(first); // Output: Apple
console.log(second); // Output: Banana
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)