Arrays in JavaScript are used to store multiple values in a single variable. They are a fundamental data structure in JavaScript. This post will explore how to create and manipulate arrays using various methods.
Today we understanding Arrays in JavaScript so let’s start without getting any late
1. What is an Array?
An array is a list-like object that can store multiple values, which can be of different types:
//javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']2. Creating and Accessing Arrays
Arrays can be created using square brackets. Values are accessed using their index, starting from 0:
//javascript
let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // Output: 1
console.log(numbers[3]); // Output: 43. Common Array Methods
JavaScript provides several methods to manipulate arrays:
- push(): Adds a new element to the end of an array.
//javascript
let fruits = ['Apple', 'Banana'];
fruits.push('Cherry');
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']- pop(): Removes the last element from an array.
//javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.pop();
console.log(fruits); // Output: ['Apple', 'Banana']- shift(): Removes the first element from an array.
//javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.shift();
console.log(fruits); // Output: ['Banana', 'Cherry']- unshift(): Adds a new element to the beginning of an array.
//javascript
let fruits = ['Banana', 'Cherry'];
fruits.unshift('Apple');
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']- splice(): Adds/removes elements from an array.
//javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.splice(1, 1, 'Mango');
console.log(fruits); // Output: ['Apple', 'Mango', 'Cherry']- slice(): Returns a new array containing a portion of the original array.
//javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
let citrus = fruits.slice(1, 3);
console.log(citrus); // Output: ['Banana', 'Cherry']4. Looping Through Arrays
Looping through arrays is a common task in JavaScript. You can use various looping constructs to iterate over array elements:
- for Loop:
//javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// Output:// Apple// Banana// Cherry- for…of Loop:
//javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
for (let fruit of fruits) {
console.log(fruit);
}
// Output:// Apple// Banana// Cherry- forEach Method:
//javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.forEach(function(fruit) {
console.log(fruit);
});
// Output:// Apple// Banana// Cherry5. Practical Examples
Let’s see some practical examples of using array methods:
- Filtering an Array:
//javascript
let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4, 6]- Mapping an Array:
//javascript
let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(function(number) {
return number * number;
});
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]- Reducing an Array:
//javascript
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(total, number) {
return total + number;
}, 0);
console.log(sum); // Output: 15Conclusion
Arrays are a powerful data structure in JavaScript, allowing you to store and manipulate multiple values efficiently. By mastering array methods and looping techniques, you can handle a wide range of data operations in your applications.
If you haven’t read our last day blog on the basic introduction to JavaScript, click here to read our Blogs. want to connect me on linkdin.
