JavaScript Helper Methods

Difficulty Level : Medium
Last Updated : 26 May, 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 .

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Javascript

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 );

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

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));

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

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

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

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);

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

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);   

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

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);   

Output:

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

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]]

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

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);

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

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

Output:

true
false

In case of an object

Javascript

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));

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

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

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

Javascript

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

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

Javascript

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

Output:

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

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);

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

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);   

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

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 );

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

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);

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

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);

Output:

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

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

Output:

Same array but with reversed elements

Javascript

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);

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

    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);

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

    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);

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

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

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

Javascript

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

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.

Javascript

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);

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 element insertion

Javascript

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);

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' }
]

My Personal Notes

Related Articles

Related Articles

JavaScript Helper Methods

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

HTML

Javascript

Javascript

Javascript

Javascript