What is Array
An array enables storing a collection of multiple elements (Items) in a single variable.
How to declaring arrays
In Javascript, we can declare an array in two ways.
Array literal notation
Array literal notation is you define a new array using empty brackets or values in brackets. If we don't declare values array will be empty.
const names = ["bruce","kent"]
new Array()
In new Array() we will specify the elements we want to exist in the array.
let arr = new Array("anson")
Array Methods
1 push
push() method adds new elements (items) to the end of Array. push method changes array length on every push.
const arr = ["car","bike"]
arr.push("bus")
console.log(arr) // [ 'car', 'bike', 'bus' ]
2 pop
pop() method remove the last element of array.
const arr = ["car","bike"]
arr.pop()
console.log(arr) // [“car”]
3 unshift
unshift() add elements beginning of an array. unshift method changes the array length on every unshift.
const arr = ["car","bike"]
arr.unshift("bus")
console.log(arr) // [“bus”,”car”,”bike”]
4 shift
shift() method remove the first element of array.
const arr = ["car","bike"]
arr.shift()
console.log(arr) // [“bike”]
5 forEach
forEach() method calls for each element in an array. forEach calls a provided callbackFn function once for each element in an array in ascending-index order. forEach return is undefined.
const array1 = ['a', 'b', 'c'];
array1.forEach(elm => console.log(elm));
// a
// b
// c
6 map
The map() method allows you to iterate over an array and modify its elements using a callback function. The callback function will then be executed on each of the array's elements. map return a new array.
let arr = [3, 4, 5, 6];
let newArr = arr.map((elm)=>{
return elm *2;
});
console.log(newArr); // [ 6, 8, 10, 12 ]
7 concat
The concat() method concatenates two or more arrays together. The returned array will contain all of the elements from the original arrays, in the order they were passed in.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
console.log(arr3); //[ 1, 2, 3, 4, 5, 6 ]
8 splice
The splice() method is a general-purpose method for changing the contents of an array by removing, replacing, or adding elements in specified positions of the array. This section will cover how to use this method to add an element to a specific location.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits) // [ 'Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango' ]
9 slice
The slice() method returns a new array that contains a portion of the original array. The original array will not be modified.
const animals = ['dog', 'cat', 'camel', 'duck', 'elephant'];
console.log(animals.slice(1,4)); // [ 'cat', 'camel', 'duck' ]
10 filter
The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.
const num = [1,2,3,11,5,21,55,21,4,10];
const result = num.filter(elm => elm > 10);
console.log(result); //[ 11, 21, 55, 21 ]
11 indexOf
The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
const animals = ['cat', 'dog', 'camel', 'duck', 'bears'];
console.log(animals.indexOf('bears')); // 4
console.log(animals.indexOf('giraffe')); // -1
12 reduce
The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.
const arr1 = [1, 2, 3, 4,5];
//1+2+3+4+5
const total = arr1.reduce((prev, curr) => prev + curr, 0
);
console.log(total) // 15
13 sort
The sort() method sorts the elements of an array in place and returns the reference to the same array, now sorted.
let months = ['March', 'Jan', 'Dec','Feb'];
months.sort();
console.log(months); // ["Dec", "Feb", "Jan", "March"]
14 find
The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.
const arr = [5, 13, 10, 110, 22];
const elm = arr.find(elm => elm > 10 );
console.log(elm); //13
15 includes
includes() return true if the array contains the specified value.
const array = [1, 2, 3, 4, 5];
console.log(array.includes(5)) // true
console.log(array.includes(6)) // false