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
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:
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
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
HTML
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
HTML
const roles = [ "Developer", "Manager", "Architect", "Developer", "Director", "Developer"]; console.log(roles.lastIndexOf("Developer")); |
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
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
HTML
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.
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 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 elment insertion
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 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' }
]
