This is a beginner tutorial on working with Javascript arrays and looping through them.
Javascript Array is a list-like object. It is used to store multiple values in a single variable.
This article deals with creating a Javascript array and using different functions on the array. We also see how we can loop through the arrays and get the values.
Create a Javascript Array
var fruits = ['apple', 'orange', 'mango'];
Here, we have created an array with the name fruits. It has 3 elements (apple, orange, and mango).
Access elements of array
fruits[0]; // apple
fruits[1]; // orange
fruits[2]; // mango
Get key by value
var position = fruits.indexOf('mango');
console.log(position); // 2
Get position of element in the array
// i.e. get index of the item in the array
console.log(fruits.indexOf('mango')); // 2
Get size of the array
console.log(fruits.length); // 3
Change value of any particular key
// change value of 'mango' to 'banana'
fruits[2] = 'banana';
console.log(fruits); // ["apple", "orange", "banana"]
// change the value back to mango
fruits[2] = 'mango';
console.log(fruits); // ["apple", "orange", "mango"]
Check if the variable is an array
var isArray = Array.isArray(fruits);
console.log(isArray); // true
Using foreach loop
fruits.forEach(function(item, index, array) {
console.log(index, item);
});
//0 "apple"
//1 "orange"
//2 "mango"
Using for loop
for (i = 0; i < fruits.length; i++) {
console.log(i, fruits[i]);
}
//0 "apple"
//1 "orange"
//2 "mango"
Add item at the end of the array
fruits.push('banana');
console.log(fruits); // ["apple", "orange", "mango", "banana"]
Add item at the beginning of the array
fruits.unshift('grapes');
console.log(fruits); // ["grapes", "apple", "orange", "mango", "banana"]
Remove item from end of the array
fruits.pop();
console.log(fruits); // ["grapes", "apple", "orange", "mango"]
Remove item from the beginning/front of the array
fruits.shift();
console.log(fruits); // ["apple", "orange", "mango"]
Remove items/elements of the array by their position/index
// below, we delete 1st element of the array
// position = 0 (1st position), number of items to remove = 1
var removedItem = fruits.splice(0, 1);
console.log(removedItem); // ["apple"]
console.log(fruits); // ["orange", "mango"]
Add items to array
// position = 1 (2nd item)
// remove = 0 element (don't remove any element/item)
// add two items = lemon and papayal
fruits.splice(1, 0, 'lemon', 'papaya');
console.log(fruits); // ["orange", "lemon", "papaya", "mango"]
Sort array
console.log(fruits.sort()); // ["lemon", "mango", "orange", "papaya"]
Reverse sort
console.log(fruits.reverse()); // ["papaya", "orange", "mango", "lemon"]
Convert array into string
// using toString() function which converts array into commad separated string
fruitsStr = fruits.toString();
console.log(fruitsStr); // papaya,orange,mango,lemon
// using join function where we can specify custom separator
fruitsStr = fruits.join(' | ');
console.log(fruitsStr); // papaya | orange | mango | lemon
Merge two arrays
fruitsNew = ['apple', 'banana'];
fruitsAll = fruits.concat(fruitsNew);
console.log(fruits); // ["papaya", "orange", "mango", "lemon"]
console.log(fruitsAll); // ["papaya", "orange", "mango", "lemon", "apple", "banana"]
Hope this helps. Thanks.