DEV Community

loading...
Cover image for 😬 10 Must Know Javascript Array Methods

😬 10 Must Know Javascript Array Methods

Satish Naikawadi
I am Satish.I have been persuing my Computer Science degree from 2020.I love to learn new Technologies in dev world.I really like to share my knowledge with dev community and also learn myself.
Originally published at satishnaikawadi.me ・4 min read

In this article , we will see 10 important javascript array methods which almost needed everywhere in javascript projects. We will quickly take a look at each method with example. Below is the data with which we will be working while taking examples of first 8 method.


const studentData = [
    { name: 'John', marks: 634, passed: true },
    { name: 'Mark', marks: 467, passed: true },
    { name: 'Randy', marks: 390, passed: true },
    { name: 'Leo', marks: 149, passed: false },
    { name: 'Chris', marks: 564, passed: true },
    { name: 'Apu', marks: 456, passed: true },
    { name: 'Naty', marks: 567, passed: true },
    { name: 'James', marks: 98, passed: false },
    { name: 'Andy', marks: 478, passed: true },
    { name: 'Frank', marks: 180, passed: false },
    { name: 'Don', marks: 123, passed: false }
];

Enter fullscreen mode Exit fullscreen mode

filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.
Let us say we have to get only those students who have passed. So we will filter them as below

const passedStudents = studentData.filter((student) => {
    return student.passed;
});
console.log(passedStudents);

Enter fullscreen mode Exit fullscreen mode

Output :

[
{ name: 'John', marks: 634, passed: true },
{ name: 'Mark', marks: 467, passed: true },
{ name: 'Randy', marks: 390, passed: true },
{ name: 'Chris', marks: 564, passed: true },
{ name: 'Apu', marks: 456, passed: true },
{ name: 'Naty', marks: 567, passed: true },
{ name: 'Andy', marks: 478, passed: true }
]

map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
Say we want to get array of name of every student. So we can get it as follows

const studentNames = studentData.map((student) => {
    return student.name;
});
console.log(studentNames);
Enter fullscreen mode Exit fullscreen mode

Output:

[
'John', 'Mark',
'Randy', 'Leo',
'Chris', 'Apu',
'Naty', 'James',
'Andy', 'Frank',
'Don'
]

find()

The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned. Say we want to get data of student whose name is 'Leo' then

const dataOfLeo = studentData.find((student) => {
    return student.name === 'Leo';
});
console.log(dataOfLeo);
Enter fullscreen mode Exit fullscreen mode

Output:

{ name: 'Leo', marks: 149, passed: false }

reduce()

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value. It takes first parameter as reducer function and second parameter is initial value
Say we want to calculate sum of marks of all students then

const totalMarksOfAll = studentData.reduce((currentTotal, student) => {
    return student.marks + currentTotal;
}, 0);
console.log(totalMarksOfAll);

Enter fullscreen mode Exit fullscreen mode

Output:

4106

findIndex()

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise , it returns -1, indicating that no element passed the test. Say we want to find the index of Leo's Data then

const indexOfLeo = studentData.findIndex((student) => student.name === 'Leo');
console.log(indexOfLeo);
Enter fullscreen mode Exit fullscreen mode

Output:

3

forEach()

The forEach() method executes a provided function once for each array element. It works similar to for loop. Say we want to print result status for each student then

studentData.forEach((student) => {
    console.log(
        `${student.name} has ${
            student.passed ? 'passed' :
            'failed'} !`
    );
});

Enter fullscreen mode Exit fullscreen mode

Output:

John has passed !
Mark has passed !
Randy has passed !
Leo has failed !
Chris has passed !
Apu has passed !
Naty has passed !
James has failed !
Andy has passed !
Frank has failed !
Don has failed !

some()

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array. Say we want to know if data have some failed students in it or not then

const hasFailedStudents = studentData.some((student) => {
    return !student.passed;
});
console.log(hasFailedStudents);

Enter fullscreen mode Exit fullscreen mode

Output:

true

every()

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value. It is similar to some() method the only difference is that the some() method will return true if any predicate is true while every() method will return true if all predicate are true. Say we want to check if all the students are passed or not then

const hasAllPassed = studentData.every((student) => {
    return student.passed;
});
console.log(hasAllPassed);
Enter fullscreen mode Exit fullscreen mode

Output:

false

New Data

Now , for remaining two methods lets use below data ,

const languages = [
    'java',
    'cpp',
    'python',
    'javascript'
];
Enter fullscreen mode Exit fullscreen mode

includes()

The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.
Say we want to check if python and ruby are in above languages array or not then

const includesRuby = languages.includes('ruby');
console.log(includesRuby)
const includesPython = languages.includes('python');
console.log(includesPython);

Enter fullscreen mode Exit fullscreen mode

Output:

false
true

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.
Say we want to find index of python then

const indexOfPython = languages.indexOf('python');
console.log(indexOfPython);
Enter fullscreen mode Exit fullscreen mode

Output:

2

And that is it for this article. You can visit satishnaikawadi.me for more articles related to programming.Thanks for reading.

Discussion (4)

Collapse
rishitkhandelwal profile image
Rishit Khandelwal

Ya could try: () => returnValue

Collapse
shaijut profile image
Shaiju T

Nice πŸ˜„ , read with examples.

Collapse
arvindsridharan profile image
arvindsridharan

Very good article on arrays. At the root I can say function plays an important role be it for filter, map, reduce etc...

Great article.

Collapse
pankajpatel profile image
Pankaj Patel

Good collection of Array methods πŸ™Œ

Thanks for writing about them