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[0]); // Output: Apple
console.log(fruits[2]); // Output: Cherry
- Updating Elements:
fruits[1] = "Blueberry";
console.log(fruits); // Output: ["Apple", "Blueberry", "Cherry"]
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"]
-
pop()
: Removes the last element.
fruits.pop();
console.log(fruits); // Output: ["Apple", "Banana"]
-
unshift()
: Adds an element to the beginning.
fruits.unshift("Strawberry");
console.log(fruits); // Output: ["Strawberry", "Apple", "Banana"]
-
shift()
: Removes the first element.
fruits.shift();
console.log(fruits); // Output: ["Apple", "Banana"]
B. Finding Elements
-
indexOf()
: Finds the index of an element.
console.log(fruits.indexOf("Banana")); // Output: 1
-
includes()
: Checks if an element exists in the array.
console.log(fruits.includes("Cherry")); // Output: false
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]
-
filter()
: Creates a new array with elements that pass a test.
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2]
-
reduce()
: Reduces the array to a single value.
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 6
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"]
-
slice()
: Returns a portion of the array.
const sliced = allFruits.slice(1, 3);
console.log(sliced); // Output: ["Banana", "Peach"]
-
splice()
: Adds or removes elements from an array.
allFruits.splice(1, 1, "Orange");
console.log(allFruits); // Output: ["Apple", "Orange", "Peach", "Grape"]
4. Iterating Over Arrays
-
for
Loop:
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
-
for...of
Loop:
for (let fruit of fruits) {
console.log(fruit);
}
-
forEach()
Method:
fruits.forEach((fruit) => console.log(fruit));
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
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]
-
reverse()
: Reverses the order of elements.
numbers.reverse();
console.log(numbers); // Output: [5, 4, 3, 1, 1]
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
8. Summary
- Arrays are used to store ordered collections of data in JavaScript.
- Access elements using indices.
- Use array methods like
push()
,map()
,filter()
, andreduce()
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)