In JavaScript, Array is an ordered collection which can store multiple values of different data types at once. For example.
let arr = ['Abhishek', true, 21];
console.log(arr);
// prints ['Abhishek', true, 21]
They can be declared using 2 ways.
// using array literals []
let users = ['Abhishek','Rahul','Karan'];
console.log(users);
// prints ['Abhishek','Rahul','Karan']
// using new keyword
let nums = new Array(1, 2, 3, 4, 5);
console.log(nums);
//prints [1,2,3,4,5]
Array indexes are zero-based meaning the first element in the array is 0, the second is 1, and so on. For example.
let sports = ['Football','Cricket','Hockey','Basketball'];
console.log(sports[0]);
console.log(sports[1]);
// prints
// Football
// Cricket
The full use of arrays can be found by using its methods which are built-in functions that performs some action to a given array. Let's now look some of the array methods.
length
Returns the length of an array i.e total number of elements in the array.
let sports = ['Football','Cricket','Hockey'];
console.log(sports.length);
// prints 3
push()
Adds an element at the end of an array and returns the new length of the array.
let sports = ['Football','Cricket','Hockey'];
sports.push('Basketball');
console.log(sports);
// prints ['Football','Cricket','Hockey','Basketball']
pop()
Removes the last element of an array and returns that element.
let sports = ['Football','Cricket','Hockey'];
sports.pop();
console.log(sports);
// prints ['Football','Cricket']
shift()
Removes the first element from an array and returns that element.
let sports = ['Football','Cricket','Hockey'];
sports.shift();
console.log(sports);
// prints ['Cricket','Hockey']
unshift()
Adds an element at the start of the array and return the new length of the array.
let sports = ['Football','Cricket','Hockey'];
sports.unshift('Basketball');
console.log(sports);
// prints [ 'Basketball', 'Football', 'Cricket', 'Hockey' ]
includes()
Checks if an element exists or not in the array. Returns a boolean value.
let sports = ['Football','Cricket','Hockey'];
console.log(sports.includes('Basketball'));
// prints false
console.log(sports.includes('Football'));
// prints true
forEach()
Loops through each element of the given array.
let arr = [1,2,3,4];
arr.forEach(elem => {
console.log(elem * 2);
});
// prints
// 2
// 4
// 6
// 8
concat()
Merges two or more arrays and returns a new array, without changing the existing arrays.
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = arr1.concat(arr2);
console.log(arr3);
// prints [1,2,3,4,5,6]
slice()
Removes all the element between the start and end index. It does not change the original array, instead returns a new array with the element.
Syntax - Array.slice(start, end)
let arr1 = [1,2,3,4,5];
let arr2 = arr1.slice(0,4);
console.log(arr2);
// prints [1,2,3,4]
join()
Adds all the elements in an array separated by the specified separator.
const arr = ['Abhishek','loves','football'];
console.log(arr.join(' '));
// prints Abhishek loves football
console.log(arr.join(' * '));
// prints Abhishek * loves * football
map()
Applies a given function on all elements of the array and returns the updated array.
const arr = [5,3,7,4,2];
function double(x) {
return x * 2;
}
const output = arr.map(double);
console.log(output);
// prints [10,6,14,8,4]
filter()
Applies a given function on all elements of the array and only filters(returns) elements that satisfy the condition.
const arr = [5,3,7,4,2];
function isEven(x) {
if (x % 2 === 0) {
return x;
}
}
const output = arr.filter(isEven);
console.log(output);
// prints [4,2]
reduce()
Reduces an array of values down to just 1 value. To get the output value, it runs a reducer function on each element of the array.
Syntax - Array.reduce(function(acc, curr ) {...}, initialValue)
- accumulator
acc- The initialValue or the previous returned value of the function which gets accumulated which is returned at the end. - currentValue
curr- The value of the current element. - initialValue - A value to be passed to the function as the initial value before the first iteration.
const arr = [5,3,7,4,2];
const sum = arr.reduce(function(acc, curr) {
acc = acc + curr;
return acc;
}, 0);
console.log(sum);
// prints 21
In the above code, first acc value would be 0, and curr value would be 5. Next acc = acc + curr i.e acc = 0 + 5. So acc value now would be 5. Next value of curr would be 3, so acc = 5 + 3 and so on it will iterate through every element in the array and then return the acc.
find()
Returns the first element that satisfies the condition. If the condition is not met undefined is returned.
const arr = ['hello','World','football','Abhishek'];
const find5 = arr.find(x => x.length === 5);
const find10 = arr.find(x => x.length === 10);
console.log(find5);
console.log(find10);