JavaScript Arrays
by : Emmersive Learning
Join us :
Telegram : https://t.me/EmmersiveLearning
Youtube : https://www.youtube.com/@EmmersiveLearning/
JavaScript Arrays
Arrays in JavaScript are used to store multiple values in a single variable. Arrays
are one of the most common data structures in JavaScript. Here’s a detailed
guide on how to work with arrays:
1. Creating Arrays
You can create arrays using:
Array literal notation (most common):
const fruits = ["apple", "banana", "cherry"];
Array constructor:
const fruits = new Array("apple", "banana", "berry");
2. Accessing Array Elements
Array elements are accessed by their index. Indexes start from 0 (zero-based
index):
const fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // Output: "apple"
console.log(fruits[2]); // Output: "cherry"
3. Modifying Array Elements
You can modify array elements by accessing their index:
fruits[1] = "orange";
console.log(fruits); // Output: ["apple", "orange", "cherry"]
4. Array Properties
Length: The length property returns the number of elements in the array:
console.log(fruits.length); // Output: 3
5. Common Array Methods
Here are some important array methods:
push(): Adds an element to the end of the array.
fruits.push("grape");
console.log(fruits); // Output: ["apple", "orange", "cherry",
"grape"]
pop(): Removes the last element from the array.
fruits.pop();
console.log(fruits); // Output: ["apple", "orange", "cherry"]
shift(): Removes the first element from the array.
fruits.shift();
console.log(fruits); // Output: ["orange", "cherry"]
unshift(): Adds an element to the beginning of the array.
fruits.unshift("kiwi");
console.log(fruits); // Output: ["kiwi", "orange", "cherry"]
indexOf(): Finds the index of an element.
const index = fruits.indexOf("orange");
console.log(index); // Output: 1
includes(): Checks if the array contains a specific element.
const hasApple = fruits.includes("apple");
console.log(hasApple); // Output: false
slice(): Returns a portion of an array without modifying the original array.
const sliced = fruits.slice(1, 3);
console.log(sliced); // Output: ["orange", "cherry"]
splice(): Adds or removes elements from an array.
fruits.splice(1, 1, "strawberry"); // Replaces 1 element at
index 1
console.log(fruits); // Output: ["kiwi", "strawberry", "cherry"]
6. Iterating Over Arrays
You can loop through an array using different loops:
for loop:
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
forEach(): A higher-order function to iterate over arrays.
fruits.forEach((fruit) => {
console.log(fruit);
});
map(): Returns a new array by transforming every element.
const upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits); // Output: ["KIWI", "STRAWBERRY",
"CHERRY"]
7. Multi-dimensional Arrays
Arrays can hold other arrays (multi-dimensional arrays):
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[1][2]); // Output: 6
8. Destructuring Arrays
You can use destructuring to extract values from an array into variables:
const [first, second] = fruits;
console.log(first); // Output: "kiwi"
console.log(second); // Output: "strawberry"
9. Spread Operator in Arrays
The spread operator (...) can be used to copy and merge arrays:
Copying an array:
const newFruits = [...fruits];
Merging arrays:
const moreFruits = ["grape", "mango"];
const allFruits = [...fruits, ...moreFruits];
console.log(allFruits); // Output: ["kiwi", "strawberry",
"cherry", "grape", "mango"]
10. Array Challenges
Here are a few array challenges for practice:
1. Write a function that returns the largest number in an array.
2. Write a function that removes duplicates from an array.
3. Write a function that finds the sum of all numbers in an array.
4. Write a function that reverses an array.
By mastering arrays, you'll be better equipped to handle collections of data in
JavaScript! Let me know if you'd like more examples or explanations on any part
of arrays.
