In Javascript, an array is a data structure that stores a collection of elements.
Arrays can hold values of any data type, including numbers, strings, objects, and other arrays.
We can create an array in several ways:
let numbers = [1, 2, 3, 4, 5, 6, 7];
In the below example, we are creating an array using `new` keyword and passing values in constructor.
let colors = new Array('red', 'purple', 'blue', 'green');
Array elements are accessed using zero-based indices.
let fruits = ['apple', 'dragon fruit', 'orange', 'pineapple']; console.log(fruits[0]); // "apple" console.log(fruits[1]); // "dragon fruit" console.log(fruits[2]); // "orange" console.log(fruits[3]); // "pineapple"
In the below example, we are modifying the array position at index `2` and replacing the `numbers[2]` value which is `3` with `10`.
let numbers = [1, 2, 3, 4, 5]; numbers[2] = 10; // Modify the value at index 2
We can get the length of an array using the "length" property.
let fruits = ['apple', 'dragon fruit', 'orange', 'pineapple']; console.log(fruits.length); // 4
push(): Adds one or more elements to the end of the array.
unshift(): Adds one or more elements to the beginning of the array.
let fruits = ['apple', 'grape'];
fruits.push('pineapple'); // Added 'pineapple' to the end
fruits.unshift('orange'); // Added 'orange' to the beginning
pop(): Removes the last element from the array and returns it.
shift(): Removes the first element from the array and returns it.
let numbers = [5, 4, 3, 2, 1, 5, 6, 7, 8, 9]; let lastNumber = numbers.pop(); // Removes and returns 9 let firstNumber = numbers.shift(); // Removes and returns 5
We can iterate over array elements using loops or array methods like forEach():
let colors = ['red', 'orange', 'blue', 'grey'];
// Using forEach method
colors.forEach(function(color) {
console.log(color);
});
// Using for loop
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
Javascript arrays come with a variety of built-in methods for common operations such as filtering, mapping, and reducing:
forEach(): Executes a provided function once for each array element.
let numbers = [1, 2, 3, 4, 5, 6];
let numberSum = [];
numbers.forEach(function(num) {
numberSum.push(num * num); // 1*1, 2*2, 3*3, 4*4, 5*5, 6*6
});
// with Arrow function
let sumUsingArrow = [];
numbers.forEach((num) => sumUsingArrow.push(num * num));
console.log("numberSum", numberSum) // Output: [1, 4, 9, 16, 25, 36]
console.log("sumUsingArrow", sumUsingArrow) // Output: [1, 4, 9, 16, 25, 36]
map(): Creates a new array with the results of calling a provided function on every element.
let numbers = [1, 2, 3, 4, 5, 6];
let squaredNumbers = numbers.map(function(num) {
return num * num; // 1*1, 2*2, 3*3, 4*4, 5*5, 6*6
}); // [1, 4, 9, 16, 25, 36]
// with Arrow function
let squaredNumbers = numbers.map((num) => num * num); // [1, 4, 9, 16, 25, 36];filter(): Creates a new array with all elements that pass a test implemented by the provided function.
let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(function(num) {
return num % 2 === 0; // 2/4/6 % 2 === 0 // true, then it return 2, 4, 6
}); // [2, 4, 6]
// with Arrow function
let evenNumbers = numbers.filter((num) => num % 2 === 0); // [2, 4, 6]
reduce(): Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.
let numbers = [1, 2, 3, 4, 5, 6];
let sum = numbers.reduce(function(accumulator, current) {
return accumulator + current; // current += accumulator // value of each index.
}, 0); // 21
// with Arrow function
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0); // 21In the below example, we are creating an array using the `new` keyword and filling empty-string up to index `4`.
const arr = new Array(5).fill("")
console.log(arr); // Output: [ '', '', '', '', '' ]