With arrays, there are usually a set number of specific things you want to achieve. Below is a list of pretty much any action you would want to perform on an array, and how to do it in Javascript. If you have any more, let me know in the comments below!
1. Find Index of an Element by Value
Use indexOf:
let arr1 = [ 'potato', 'banana', 'ravioli', 'carrot' ];
// Returns 1
console.log(arr1.indexOf('banana'));
// Returns -1 since not found
console.log(arr1.indexOf('beetroot'));
2. Delete at Index
Use splice(). More detail instructions on deleting items from a Javascript array can be found here too!.
let arr1 = [ 'potato', 'banana', 'ravioli', 'carrot' ];
// Returns [ 'banana', 'ravioli', 'carrot' ], since potato has index 0.
arr1.splice(0, 1);
console.log(arr1);
3. Delete at Index by Value
Use splice() and indexOf:
let arr1 = [ 'potato', 'banana', 'ravioli', 'carrot' ];
let itemIndex = arr1.indexOf('ravioli');
// Returns [ 'potato', 'banana', 'carrot' ], since ravioli has an index of 2
arr1.splice(itemIndex, 1);
console.log(arr1);
4. Get the last element of an array
Use arr.length() - 1:
let arr1 = [ 'potato', 'banana', 'ravioli', 'carrot' ];
// Returns carrot
console.log(arr1[arr1.length - 1]);
5. Insert at Index
Use splice(). You can also read about inserting at an index in detail here.
let arr1 = [ 'potato', 'banana', 'ravioli', 'carrot' ];
// Inserts broccoli at position 2, after deleting 0 items
arr1.splice(2, 0, 'broccoli');
// Returns [ 'potato', 'banana', 'ravioli', 'brccoli', 'carrot' ]
console.log(arr1);
6. Remove the last element of the array
Use pop():
let arr1 = [ 1, 2, 3, 4, 5, 6 ];
// Returns 6
console.log(arr1.pop());
// Returns [ 1, 2, 3, 4, 5 ] - last element is removed
console.log(arr1);
7. Change all values of an array in the same way
Use map():
let arr1 = [ 1, 2, 3, 4, 5, 6 ];
let newArr = arr1.map(function(arrElement) {
return arrElement + 3;
})
// ES6 version for modern browsers and NodeJS
let anotherVersion = arr1.map( el => el + 3);
// Returns [ 4, 5, 6, 7, 8, 9 ] for both
console.log(newArr);
console.log(anotherVersion);
8. Turn a string, map, or set into an array
Use Array.from():
let newSet = new Set([ 'orange', 'apple', 'potato', 'spinach' ]);
let newMap = new Map([ 'orange', 'apple', 'potato', 'spinach' ]);
let newString = 'apple';
console.log(Array.from(newSet)); // Returns [ 'orange', 'apple', 'potato', 'spinach' ]
console.log(Array.from(newMap)); // Returns [ 'orange', 'apple', 'potato', 'spinach' ]
console.log(Array.from(newString)); // Returns [ 'a', 'p', 'p', 'l', 'e' ]
9. Check if it is an array
Use Array.isArray():
let arr1 = [ 'orange', 'apple', 'potato', 'spinach' ];
let obj1 = { myKey: "myValue" }
console.log(Array.isArray(arr1)); // Returns true
console.log(Array.isArray(obj1)); // Returns false
10. Check every element in an Array
Use forEach:
let arr1 = [ 'orange', 'apple', 'potato', 'spinach' ];
arr1.forEach(function(item) {
console.log(item); // Returns each array item individually
});
11. Merge two arrays
Use ... or concat:
let arr1 = [ 'orange', 'apple' ];
let arr2 = [ 'potato', 'spinach' ];
// For legacy browsers (ES5);
// Returns [ 'orange', 'apple', 'potato', 'spinach' ];
let someArray = arr1.concat(object);
// For modern Javascript (ES6/NodeJS)
// Returns [ 'orange', 'apple', 'potato', 'spinach' ];
let someOtherArray = [ ...arr1, ...arr2 ];
12. Turn object names into array
Use Object.keys:
let object = {
name1: "value",
name2: "value",
name3: "value"
};
// Returns [ 'name1', 'name2', 'name3' ];
let array = Object.keys(object);
13. Turn object values into arrays
Use Object.values:
let object = {
name1: "value",
name2: "value",
name3: "value"
};
// Returns [ 'value', 'value', 'value' ];
let array = Object.values(object);
14. Reverse an Array
Use reverse():
let arr1 = [ 'potato', 'banana', 'carrot' ];
arr1.reverse();
// Returns [ 'carrot', 'banana', 'potato' ]
console.log(arr1);
15. Sum all Elements in an Array
Use reduce():
let arr1 = [ 1, 2, 3, 4, 5 ];
// For legacy browsers
let getTotal = arr1.reduce(function (accumulator, currentNumber) {
return accumulator + currentNumber
});
// ES6 for modern browsers and NodeJS
let theTotal = arr1.reduce((accumulator, currentNumber) => accumulator + currentNumber);
// Returns 15
console.log(getTotal);
16. Add an Elements to the end of an array
Use push():
let arr1 = [ 'banana', 'potato' ];
arr1.push('broccoli');
// Returns [ 'banana', 'potato', 'broccoli' ]
console.log(arr1);
17. Check if every element of an array passes a test
Use every()
let arr1 = [ 1, 2, 3, 4, 5, 6, 7 ];
// Will return true and console log 'great'
if(arr1.every(value => value < 10)) {
console.log('great!')
}
Top comments (1)
In Javascript it is also quite important to know about the concept of sparse arrays. Because an array can have empty slots (which differs from slots "filled" with undefined) that not even get iterated, this is the case eg. if you call the Array constructor.
Create a new Array with n entries: