Skip to content
Related Articles

Related Articles

JavaScript Helper Methods
  • Last Updated : 22 Jan, 2021

An array in JavaScript is usually considered as “list-objects”. In simple words, we can say an array is an object that contains some values. But an array is a special object in JavaScript. An array can store heterogeneous data structures. It can store data values of any type like objects and array . 

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const arr = [
  1,                        // Number type
  "Praveen kumar",          // String type
  {                         // Object type
    firstname: "Christopher",
    lastname: 'Nolan'
  },
  [9.1, 9.2, 8.7, 5]        // Array type
];
  
console.log( arr );

chevron_right


In JavaScript, an array is an object. If an array is an object then why we don’t use an object in place of an array”. After a lot of research, we found that we can use an object in place of an array. But it comes with some caveats.

In the above program, both an object and an array store data in exactly the same way. But there is some difference.



The first one is an array that contains a property named length. It tells us the number of elements in an array. This is not the only difference. The main difference comes out when you open the __proto__ property of both an array and an object. An array comes with some great helper methods which we are going to discuss in this article. Let’s discuss some important methods.

1. every() Method: This method is used to check if all elements of an array pass the test that is implemented by the passed higher-order function. What compiler does under the hood is, it iterates over the employees array and check for all employee, if he is a developer or not. As in this case, it should return false.

Input:

 predicate function

Output:

Boolean value

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const employees = [
  { name: "Sam",      age: 25, role: "Developer" },
  { name: "John",     age: 32, role: "Manager"   },
  { name: "Ronaldo",  age: 29, role: "Architect" },
  { name: "Perker",   age: 25, role: "Developer" },
  { name: "Sophia",   age: 38, role: "Director"  },
  { name: "kristine", age: 21, role: "Developer" },
];
  
function isDeveloper(employee) {
  return employee.role === "Developer";
}
console.log(employees.every(isDeveloper));

chevron_right


Output:

false

2. fill() Method: This method fills the array with a static value. It overrides all array values starting from the first element(0th index) and up to the last element(array.length-1 index).

Input:



value

Output:

Modified array

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
          
const newEmployees = employees.fill(
    { name: "Sam", age: 25, role: "Developer" });
console.log(employees);
  
console.log(newEmployees === employees);    // true

chevron_right


Output:

[
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'Sam', age: 25, role: 'Developer' }
]

true

3. filter() Method: This method filters the array that passes the test with the function passed to it. It returns a new array.

Input:

Predicate function

Output:

New Array with filtered elements

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
          
function filterDevEmp(employee) {
  return employee.role === "Developer";
}
const filteredDevEmployees = employees.filter(filterDevEmp);
console.log(filteredDevEmployees);

chevron_right


Output:

[
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'Perker', age: 25, role: 'Developer' },
 { name: 'kristine', age: 21, role: 'Developer' }
]

4. find() Method: This method returns the first element that passes the test with the provided function.

Input:

Predicate function 

Output:

Element that passes the test else undefined

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
  
function searchFirstDevEmployee(employee) {
  return employee.role === "Developer";
}
  
const firstEmployeeDeveloper = 
    employees.find(searchFirstDevEmployee);
  
console.log(firstEmployeeDeveloper);    

chevron_right


Output:

 { name: 'Sam', age: 25, role: 'Developer' }

5. findIndex() Method: This method returns the first element index that passes the test with the provided function. It can be used in the case of primitive and in the case of objects.

Input:

Predicate function

Output:

element index that passes the test else -1

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
  
function searchFirstArchitectEmployeeIndex(employee) {
  return employee.role === "Architect";
}
  
const firstEmpArchitectIndex = 
  employees.findIndex(searchFirstArchitectEmployeeIndex);
  
console.log(firstEmpArchitectIndex);    

chevron_right


Output:

2

6. flat() Method: This method is used to flatten the array or concatenate the array with the sub-array elements recursively.

Input:

 depth(default value is 1)

Output:

New array

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const arr1 = [1, [2, 3, 4], 5];
const flattened1 = arr1.flat();
console.log(flattened1); // [ 1, 2, 3, 4, 5 ]
  
const arr2 = [1, 2, [3, 4, [5, 6]]];
  
const flattened2 = arr2.flat();
console.log(flattened2); // [1, 2, 3, 4, [5, 6]]

chevron_right


Output:

[1, 2, 3, 4, 5]
[1, 2, 3, 4, [5, 6]]

7. forEach() Method: This is one of the most used method. It is used to call or execute the provided/passed function once for each element in an array. It modifies the original array.

Input:

function

Output:

undefined

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
          
function increaseAgeByOne(employee) {
  employee.age += 1;
}
employees.forEach(increaseAgeByOne);
console.log(employees);

chevron_right


Output:

[
 { name: 'Sam', age: 26, role: 'Developer' },
 { name: 'John', age: 33, role: 'Manager' },
 { name: 'Ronaldo', age: 30, role: 'Architect' },
 { name: 'Perker', age: 26, role: 'Developer' },
 { name: 'Sophia', age: 39, role: 'Director' },
 { name: 'kristine', age: 22, role: 'Developer' }
]

8. includes() Method: This method is used to test whether an element is present in an array or not. It checks for a value in primitive and reference in case of an object.

Input: 

value

Output:

Boolean value weather array includes value or not

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const numbers = [1, 6, 8, 11, 5, 9, 4];
console.log( numbers.includes(6) );  
console.log( numbers.includes(3) );

chevron_right


Output:

true
false

In case of an object

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const arch = { name: "Ronaldo", age: 29, role: "Architect" };
  
const employees = [
  { name: "Sam", age: 25, role: "Developer" },
  { name: "John", age: 32, role: "Manager" },
  arch,
  { name: "Perker", age: 25, role: "Developer" },
  { name: "Sophia", age: 38, role: "Director" },
  { name: "kristine", age: 21, role: "Developer" },
];
  
console.log(employees.includes(arch)); 

chevron_right


Output:

true

9. indexOf() Method: This method returns the first element index that passes the test with the provided function. It takes a value as input. It should be used in case of primitive. As in the case of objects, it will check its reference. Check is case-sensitive.

Input:

value

Output:

element index that passes the test else -1

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const names = ["Sam", "John", "Ronaldo"
    "Perker", "Sophia", "kristine"];
names.indexOf("John");    
names.indexOf("john");

chevron_right


Output:

1
-1

10. join() Method: This method concatenates the array values into a string separated by comma(if no separator is provided) or with separator provided.

Input:

separator

Output:

New string

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

const names = ["Sam", "John", "Ronaldo", 
    "Perker", "Sophia", "kristine"];
console.log( names.join() );
  
console.log( names.join(" -> ") );

chevron_right


Output:

'Sam, John, Ronaldo, Perker, Sophia, kristine'
 'Sam -> John -> Ronaldo -> Perker -> Sophia -> kristine'

11. lastIndexOf() Method: It searches for an element in an array and returns the last index of the elements provided in an array. It takes a value as input. It should be used in case of primitive. As in the case of objects, it will check its reference.

Input:

value

Output:

last element index that is equal(test using ===) 
to value provided else -1

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

const roles = [ "Developer", "Manager", "Architect",
    "Developer", "Director", "Developer"];
  
console.log(roles.lastIndexOf("Developer"));

chevron_right


Output:

5

12. map() Method: This method call the provided function and execute this function for each element. It returns a new array.

Input:

function

Output:

new array

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
  
function getName(employee) {
  return employee.name;
}
  
const names = employees.map(getName);
console.log(names);    
  
function concetenateNameWithAge(employee) {
  return employee.name + " " + employee.age;
}
const nameWithAge = employees.map(concetenateNameWithAge);
console.log(nameWithAge);

chevron_right


Output:

 [ 'Sam', 'John', 'Ronaldo', 'Perker', 'Sophia', 'kristine' ]
[
 'Sam 25',
 'John 32',
 'Ronaldo 29',
 'Perker 25',
 'Sophia 38',
 'kristine 21'
]

13. pop() Method: It removes the last element from an array and returns the removed element.

Output:

Removed element

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
  
const removedEmployee = employees.pop();
console.log(removedEmployee);    
console.log(employees.length);    

chevron_right


Output:

{ name: 'kristine', age: 21, role: 'Developer' }
 5

14. push() Method: It adds or pushes an element as the last element in an array.

Input:

Array element

Output:

new length of an array

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
  
const totalEmployees = employees.push({ 
    name: "Donald", age: 21, role: "Manager" });
console.log(employees);
console.log( totalEmployees );

chevron_right


Output:

[
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'John', age: 32, role: 'Manager' },
 { name: 'Ronaldo', age: 29, role: 'Architect' },
 { name: 'Perker', age: 25, role: 'Developer' },
 { name: 'Sophia', age: 38, role: 'Director' },
 { name: 'kristine', age: 21, role: 'Developer' },
 { name: 'Donald', age: 21, role: 'Manager' }
]
7

15. reduce() Method: The array reduce() method executes the reducer function that you pass on each element and it always returns a single value. The reducer function takes 4 parameters

  • Accumulator
  • Current value
  • Array current index
  • Source array

Note: Reducer function always returns value and the value get assigned to accumulator in next iteration.

Input: 

First argument is reducer function that takes minimum 
2 value i.e. accumulator and current value. Second 
argument is initial value of accumulator.

Output:

A single value.

If accumulator value is not provided then the source array first value or initial value is taken as the second argument of the reduce method and iteration starts from next to the initial value of the source array.

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
  
function getRoleReducer(acc, currentValue) {
  acc.push(currentValue.role);
  return acc;
}
const roles = employees.reduce(getRoleReducer, []);
console.log(roles);

chevron_right


Output:

[
 'Developer',
 'Manager',
 'Architect',
 'Developer',
 'Director',
 'Developer'
]

16. reduceRight() Method: It is exactly the same as the Array reduce method but the iteration starts from right to left.

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
  
function getRoleReducer(acc, currentValue) {
  acc.push(currentValue.role);
  return acc;
}
const roles = employees.reduceRight(getRoleReducer, []);
console.log(roles);

chevron_right


Output:

[
 'Developer',
 'Director',
 'Developer',
 'Architect',
 'Manager',
 'Developer'
]

17. reverse() Method: This method reverses the array elements.

Output: 

Same array but with reversed elements

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
  
const reversedEmployees = employees.reverse();
console.log(reversedEmployees);
console.log(employees === reversedEmployees);

chevron_right


Output:

[
 { name: 'kristine', age: 21, role: 'Developer' },
 { name: 'Sophia', age: 38, role: 'Director' },
 { name: 'Perker', age: 25, role: 'Developer' },
 { name: 'Ronaldo', age: 29, role: 'Architect' },
 { name: 'John', age: 32, role: 'Manager' },
 { name: 'Sam', age: 25, role: 'Developer' }
]
true

18. shift() Method: It removes the first element from an array and returns the removed element.

Output: 

removed element or if an array is empty returns undefined

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

    const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
  
const removedEmployee = employees.shift();
console.log(removedEmployee);
console.log(employees);

chevron_right


Output:

{ name: 'Sam', age: 25, role: 'Developer' }
[
 { name: 'John', age: 32, role: 'Manager' },
 { name: 'Ronaldo', age: 29, role: 'Architect' },
 { name: 'Perker', age: 25, role: 'Developer' },
 { name: 'Sophia', age: 38, role: 'Director' },
 { name: 'kristine', age: 21, role: 'Developer' }
]

19. slice() Method: The slice() method returns the new array with the elements specified within the starting and ending index. The new array contains the element at the starting index but does not include the element at the end index. If the end index is not provided then it is considered as an array.length-1. The slice method doesn’t change the original array.

Input: 

Start index and end index

Output:

 New array

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

    const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
  
const someEmployees = employees.slice(1, 3);
console.log(someEmployees);
console.log(employees);

chevron_right


Output:

[
 { name: 'John', age: 32, role: 'Manager' },
 { name: 'Ronaldo', age: 29, role: 'Architect' }
]
[
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'John', age: 32, role: 'Manager' },
 { name: 'Ronaldo', age: 29, role: 'Architect' },
 { name: 'Perker', age: 25, role: 'Developer' },
 { name: 'Sophia', age: 38, role: 'Director' },
 { name: 'kristine', age: 21, role: 'Developer' }
]

20. some() Method: This method checks if any one of the elements in the array passes the test provided by the predicate function. If in any array index the test pass some method returns true else false. It just checks the element exists in an array. It returns as soon as the predicate function returns true.

Input: 

predicate function

Output: 

Boolean

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

function checkIfDevExist(employee) {
  return employee.role === "Developer";
}
const isDeveloperExist = employees.some(checkIfDevExist);
console.log(isDeveloperExist);

chevron_right


Output:

true

21. sort() Method: This method sorts the array in ascending order(default behavior if compare function is not specified). This method mutates the original array.

Input: 

optional comparer function

Output:

sorted array

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

const names = ["Sam", "John", "Ronaldo", "Perker", "Sophia", "kristine"];
names.sort();
console.log(names);

chevron_right


Output:

 [ 'John', 'Perker', 'Ronaldo', 'Sam', 'Sophia', 'kristine' ]

22. splice() Method: The splice() method in an array is used to add, remove, or replace elements in an array. It mutates the original array.

Input:

Starting index from where chages will takes place.
(optional) No of element to delete or remove from the start index.
(optional) The elements to add at starting index.    

Output: 

array with removed elements.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
          
const removedElements = employees.splice(3, 1, {
    name: "kristine",
    age: 21,
    role: "Developer",
});
  
console.log(removedElements);
console.log(employees);

chevron_right


Output:

[ { name: 'Perker', age: 25, role: 'Developer' } ]
[
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'John', age: 32, role: 'Manager' },
 { name: 'Ronaldo', age: 29, role: 'Architect' },
 { name: 'kristine', age: 21, role: 'Developer' },
 { name: 'Sophia', age: 38, role: 'Director' },
 { name: 'kristine', age: 21, role: 'Developer' }
]

23. unshift() Method: It adds or inserts an element at the starting position of an array.

Input: 

Element to insert

Output: 

Array length after elment insertion

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
          
const totalNoOfemployees = employees.unshift({
    name: "kristine",
    age: 21,
    role: "Developer",
});
  
console.log(totalNoOfemployees);
console.log(employees);

chevron_right


Output:

7
[
 { name: 'kristine', age: 21, role: 'Developer' },
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'John', age: 32, role: 'Manager' },
 { name: 'Ronaldo', age: 29, role: 'Architect' },
 { name: 'Perker', age: 25, role: 'Developer' },
 { name: 'Sophia', age: 38, role: 'Director' },
 { name: 'kristine', age: 21, role: 'Developer' }
]

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :