| id | arrays-in-javascript | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| title | Arrays in JavaScript for Beginners | |||||||||||||||||
| sidebar_label | Arrays | |||||||||||||||||
| sidebar_position | 15 | |||||||||||||||||
| tags |
|
|||||||||||||||||
| description | In the JavaScript programming language, arrays are used to store multiple values in a single variable. In this section, you will learn how to create and manipulate arrays in JavaScript. You will also learn about the different methods that can be used to manipulate arrays. We are going to cover the following topics in this section: |
Arrays are used to store multiple values in a single variable. They are written with square brackets.
let fruits = ["Apple", "Banana", "Mango", "Orange"];You can access an array element by referring to the index number.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Mango
console.log(fruits[3]); // OrangeYou can change the value of an array element by referring to the index number.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
fruits[0] = "Cherry";
console.log(fruits); // ["Cherry", "Banana", "Mango", "Orange"]You can add an element to an array using the push() method.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
fruits.push("Cherry");
console.log(fruits); // ["Apple", "Banana", "Mango", "Orange", "Cherry"]You can remove an element from an array using the pop() method.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
fruits.pop();
console.log(fruits); // ["Apple", "Banana", "Mango"]The length property returns the length of an array (number of elements).
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.length); // 4You can use a for loop to loop through all the elements of an array.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}JavaScript has a number of built-in methods for working with arrays.
The toString() method converts an array to a string of (comma separated) array values.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.toString()); // Apple,Banana,Mango,OrangeThe join() method joins all the elements of an array into a string.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.join(" * ")); // Apple * Banana * Mango * OrangeThe pop() method removes the last element from an array.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
let lastFruit = fruits.pop();
console.log(lastFruit); // Orange
console.log(fruits); // ["Apple", "Banana", "Mango"]The push() method adds a new element to an array (at the end).
let fruits = ["Apple", "Banana", "Mango", "Orange"];
fruits.push("Cherry");
console.log(fruits); // ["Apple", "Banana", "Mango", "Orange", "Cherry"]The shift() method removes the first element from an array.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
let firstFruit = fruits.shift();
console.log(firstFruit); // Apple
console.log(fruits); // ["Banana", "Mango", "Orange"]The unshift() method adds a new element to an array (at the beginning).
let fruits = ["Apple", "Banana", "Mango", "Orange"];
fruits.unshift("Cherry");
console.log(fruits); // ["Cherry", "Apple", "Banana", "Mango", "Orange"]The concat() method joins two or more arrays, and returns a new array.
let fruits1 = ["Apple", "Banana", "Mango", "Orange"];
let fruits2 = ["Cherry", "Grapes", "Pineapple"];
let allFruits = fruits1.concat(fruits2);
console.log(allFruits); // ["Apple", "Banana", "Mango", "Orange", "Cherry", "Grapes", "Pineapple"]The slice() method slices out a piece of an array into a new array.
let fruits = ["Apple", "Banana", "Mango", "Orange", "Cherry", "Grapes", "Pineapple"];
let citrusFruits = fruits.slice(2, 5);
console.log(citrusFruits); // ["Mango", "Orange", "Cherry"]The splice() method adds/removes items to/from an array, and returns the removed item(s).
let fruits = ["Apple", "Banana", "Mango", "Orange", "Cherry", "Grapes", "Pineapple"];
fruits.splice(2, 2, "Lemon", "Kiwi");
console.log(fruits); // ["Apple", "Banana", "Lemon", "Kiwi", "Cherry", "Grapes", "Pineapple"]The sort() method sorts the elements of an array.
let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.sort()); // ["Apple", "Banana", "Mango", "Orange"]The reverse() method reverses the order of the elements in an array.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.reverse()); // ["Orange", "Mango", "Banana", "Apple"]The indexOf() method searches the array for an element and returns its position.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.indexOf("Mango")); // 2The lastIndexOf() method searches the array for an element, starting at the end, and returns its position.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.lastIndexOf("Banana")); // 1The includes() method checks if an array contains a specified element.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.includes("Mango")); // true
console.log(fruits.includes("Cherry")); // falseThe find() method returns the value of the first element in an array that passes a test (provided as a function).
let ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
console.log(ages.find(checkAdult)); // 18The findIndex() method returns the index of the first element in an array that passes a test (provided as a function).
let ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
console.log(ages.findIndex(checkAdult)); // 2The every() method checks if all elements in an array pass a test (provided as a function).
let ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
console.log(ages.every(checkAdult)); // falseThe some() method checks if some elements in an array pass a test (provided as a function).
let ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
console.log(ages.some(checkAdult)); // trueThe filter() method creates a new array with all elements that pass a test (provided as a function).
let ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
console.log(ages.filter(checkAdult)); // [32, 33, 40]The map() method creates a new array with the result of calling a function for each array element.
let numbers = [4, 9, 16, 25];
function myFunction(value) {
return value * 2;
}
console.log(numbers.map(myFunction)); // [8, 18, 32, 50]The reduce() method reduces the array to a single value (going left-to-right).
let numbers = [175, 50, 25];
function myFunction(total, num) {
return total - num;
}
console.log(numbers.reduce(myFunction)); // 100The reduceRight() method reduces the array to a single value (going right-to-left).
let numbers = [175, 50, 25];
function myFunction(total, num) {
return total - num;
}
console.log(numbers.reduceRight(myFunction)); // -50The forEach() method calls a function once for each array element.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
fruits.forEach(function (value, index, array) {
console.log(value);
});The isArray() method checks if an object is an array.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(Array.isArray(fruits)); // trueThe from() method creates a new Array instance from an array-like or iterable object.
let myArr = Array.from("ABCDEFG");
console.log(myArr); // ["A", "B", "C", "D", "E", "F", "G"]The of() method creates a new Array instance with a variable number of arguments.
let myArr = Array.of(1, 2, 3, 4, 5);
console.log(myArr); // [1, 2, 3, 4, 5]The fill() method fills the elements of an array with a static value.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.fill("Cherry")); // ["Cherry", "Cherry", "Cherry", "Cherry"]The copyWithin() method copies array elements within the array, to and from specified positions.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.copyWithin(2, 0)); // ["Apple", "Banana", "Apple", "Banana"]The entries() method returns a new Array Iterator object that contains the key/value pairs for each index in the array.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
let iterator = fruits.entries();
for (let e of iterator) {
console.log(e);
}The keys() method returns a new Array Iterator object that contains the keys for each index in the array.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
let iterator = fruits.keys();
for (let e of iterator) {
console.log(e);
}The values() method returns a new Array Iterator object that contains the values for each index in the array.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
let iterator = fruits.values();
for (let e of iterator) {
console.log(e);
}Array destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
let [first, second, third, fourth] = fruits;
console.log(first); // Apple
console.log(second); // Banana
console.log(third); // Mango
console.log(fourth); // Orange:::info 📝 Note Best Practice
It is best practice to use the const keyword when declaring arrays, as the array values are not expected to change.
```js title="index.js"
const fruits = ["Apple", "Banana", "Mango", "Orange"];
```
:::
In this section, you learned how to create and manipulate arrays in JavaScript. You also learned about the different methods that can be used to manipulate arrays. You can now use arrays to store multiple values in a single variable and perform various operations on them.