This article explores the importance of arrays in the JS.

In the world of programming, an array is a cluster of elements or items. It stores data as elements and provides you when you need them. It is popularly used in all programming languages and can be called - array data structure. I hope this blog helps in understanding the basics of an array.

What is an Array in JS?

Represented by a pair of square brackets, the elements in it are separated through a comma in the array.

Example- Array- [ ] Elements- [ , ]

Index is the position of the element in the array. In JS, 0 is used to start the array index. The length of the array is determined by the elements in it. JS does not have any fixed length arrays, giving you the flexibility of changing the length anytime when you require it.

What is an Array Method?

Now, the array methods determine the strength of JS arrays. Array methods are functions built-in to JS. These functions apply to arrays so that as a developer you do not have to write common functions from the scratch. Each method brings with it a unique function that performs or calculates the array.

JS Array Methods

Map()

This method creates a new array with the results of a callback function on every element in this array. There will no change in the array after the method operates. It does not mutate the array in which the method was called. A callback function remains the same.

const array1 = [1, 4, 9, 16];


const map1 = array1.map(x => x * 2);

console.log(map1);

filter()

This method makes a new array only when the elements are able to pass the condition when the provided function is available inside. The condition of the callback operates here as well and is pretty same as it works in map (). This method as well does not mutate.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);

sort()

This method is used to sort the elements in the descending or ascending order. The default way of sort is ascending, that is structured on converting the elements into strings and then comparing their sequences of UTF-16 code units values.


const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);

forEach ()

This method provides a callback function for each array element. It means it implements a callback function mentioned for each element in the array present in an ascending index order. forEach() implements the callback function once for every element in the array, unlike map() or reduce().

const array1 = ['m', 'n', 'o'];

array1.forEach(element => console.log(element));

concat()

This method is used to submerge two or more arrays. After doing that, it returns with a new array without changing the existing arrays. And because of this, it is also known as immutable method.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);

every ()

This method makes sure that every element passes the condition or the test implemented by the callback function.

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));

Some ()

This method checks if one element (minimum) out of all the elements in the array passes the condition and then responds appropriately as true or false.

const array = [1, 2, 3, 4, 5];

const even = (element) => element % 2 === 0;

console.log(array.some(even));

includes()

In this one, the method checks if an array includes the element and passes the given condition and responding it as true and false accordingly. Explaining it a bit further, you are able to figure the presence on an element through this method. If the response is found appropriate, meaning the element is present, the method comes as true otherwise false.

const array1 = [1, 2, 3];

console.log(array1.includes(2));


const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));


console.log(pets.includes('at'));

join()

This method returns with a new string but it is different from concat () method as it merges all the array’s elements but separated with a separator. In a well defined term, it is known as specified separator string. One can also pass the separator of one's choice when wanting to join the elements. Also, if the array has only one element, it will come in a new string without using the separator.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());


console.log(elements.join(''));


console.log(elements.join('-'));

reduce()

This method helps in accumulating the value on each element through the execution of a reducer function . The elements are reduced to a single output value.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;


console.log(array1.reduce(reducer));


console.log(array1.reduce(reducer, 5));

splice ()

The splice () changes the elements in the array either by adding or replacing existing elements. It is in the slice() method where the elements are accessed without any modification.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');

console.log(months);


months.splice(4, 1, 'May');

console.log(months);

push ()

This method adds one or more elements to the array and returns back with the new length of the array.

const animals = ['cow', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);

console.log(animals);


animals.push('chickens', 'cats', 'dogs');
console.log(animals);

pop()

This method removes the last element and by doing so, changes the length of the array. By doing so, it returns the last element as its output.

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());


console.log(plants);


plants.pop();

console.log(plants);

indexof ()

The indexOf () method comes back with the first index allotted to an element in the array. If there is no element, -1 turns up.

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));



console.log(beasts.indexOf('bison', 2));


console.log(beasts.indexOf('giraffe'));

find ()

The find () method returns the value of that first element that passes the test of the callback function. If there no value like that, undefined is returned.

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));



console.log(beasts.indexOf('bison', 2));


console.log(beasts.indexOf('giraffe'));

Conclusion-

Array methods are used to keep the coding clean and ease the work as it makes the coding fast as well.

Codersline