In JavaScript, there are many functions provided to handle arrays of data. In this article, we will introduce some common functions in JavaScript and provide some examples so you can better understand them.
1. The at() function: The at() function allows to retrieve the value at a position in the array.
1 2 3 | let array = ['a', 'b', 'c', 'd']; console.log(array.at(2)); // 'c' |
2. The concat() function: The concat() function allows one or more arrays to be joined together to create a new array.
1 2 3 4 5 6 | let array1 = [1, 2, 3]; let array2 = [4, 5, 6]; let array3 = [7, 8, 9]; let newArray = array1.concat(array2, array3); console.log(newArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9] |
3. The copyWithin() function: The copyWithin() function allows copying part of an array and inserting it into another position in the array.
1 2 3 4 | let array = [1, 2, 3, 4, 5]; array.copyWithin(1, 3, 4); console.log(array); // [1, 4, 3, 4, 5] |
4. entries() function: The entries() function allows to create an array containing all the key/value pairs of the array.
1 2 3 4 5 6 7 | let array = ['a', 'b', 'c']; let iterator = array.entries(); console.log(iterator.next().value); // [0, 'a'] console.log(iterator.next().value); // [1, 'b'] console.log(iterator.next().value); // [2, 'c'] |
5. Every() function: The every() function allows to check all elements in the array whether a condition is satisfied or not.
1 2 3 4 | let array = [1, 2, 3, 4, 5]; let result = array.every(element => element < 10); console.log(result); // true |
6. Fill() function: The fill() function allows to change the value of all elements in the array to a new value.
1 2 3 4 | let array = [1, 2, 3, 4, 5]; array.fill(0); console.log(array); // [0, 0, 0, 0, 0] |
7. filter() function: The filter() function allows to filter the elements of the array according to a certain condition.
1 2 3 4 | let array = [1, 2, 3, 4, 5]; let newArray = array.filter(element => element > 2); console.log(newArray); // [3, 4, 5] |
8. The find() function: The find() function allows to search and return the first element in the array that satisfies a certain condition.
1 2 3 4 | let array = [1, 2, 3, 4, 5]; let result = array.find(element => element > 2); console.log(result); // 3 |
9. The findIndex() function: The findIndex() function allows to search and return the index of the first element in the array that satisfies a condition.
1 2 3 4 | let array = [1, 2, 3, 4, 5]; let result = array.findIndex(element => element > 2); console.log(result); // 2 |
10. The findLast() function: The findLast() function is similar to the find() function, but searches for the last element in the array that satisfies a certain condition.
1 2 3 4 | let array = [1, 2, 3, 4, 5]; let result = array.findLast(element => element > 2); console.log(result); // 5 |
11. The findLastIndex() function: The findLastIndex() function is similar to the findIndex() function, but searches for the index of the last element in the array that satisfies a certain condition.
1 2 3 4 | let array = [1, 2, 3, 4, 5]; let result = array.findLastIndex(element => element > 2); console.log(result); // 4 |
12. flat() function: The flat() function is used to flatten a nested array.
1 2 3 4 | let array = [1, 2, [3, 4], 5, [6, [7, 8]]]; let newArray = array.flat(); console.log(newArray); // [1, 2, 3, 4, 5, 6, [7, 8]] |
13. flatMap() function: The flatMap() function combines map() and flat() functions. It does a map() function on each element in the array and then flattens the array.
1 2 3 4 | let array = [1, 2, 3]; let newArray = array.flatMap(element => [element * 2]); console.log(newArray); // [2, 4, 6] |
14. forEach() function: The forEach() function is used to iterate through each element in the array and perform a certain action on each of them.
1 2 3 4 5 6 7 8 9 | let array = [1, 2, 3]; array.forEach(element => { console.log(element); }); // Output: // 1 // 2 // 3 |
15. from() function: The from() function is used to convert an iterable object to an array. For example, convert a string to an array.
1 2 3 4 | let string = 'hello'; let newArray = Array.from(string); console.log(newArray); // ['h', 'e', 'l', 'l', 'o'] |
16. group() function: The group() function is used to group elements in an array according to a certain condition and return an array containing subarrays.
1 2 3 4 | let array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let newArray = array.group(element => element % 2); console.log(newArray); // [[1, 3, 5, 7, 9], [2, 4, 6, 8]] |
17. groupToMap() function: The groupToMap() function is similar to group() but returns a Map object containing key-value pairs.
1 2 3 4 | let array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let newMap = array.groupToMap(element => element % 2); console.log(newMap); // Map(2) {0 => [2, 4, 6, 8], 1 => [1, 3, 5, 7, 9]} |
18. includes() function: The includes() function checks if a value exists in the array.
1 2 3 4 | let array = [1, 2, 3]; console.log(array.includes(2)); // true console.log(array.includes(4)); // false |
19. indexOf() function: The indexOf() function returns the index of the first element in the array whose value is equal to the value passed in. If not found, the function returns -1.
1 2 3 4 | let array = [1, 2, 3]; console.log(array.indexOf(2)); // 1 console.log(array.indexOf(4)); // -1 |
20. reduce() function: The reduce() function is used to calculate a value based on the elements in the array. This function takes two parameters: a callback function and an initialization value.
1 2 3 4 | let array = [1, 2, 3]; let sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // 6 |
21. The reverse() function: The reverse() function is used to reverse the order of the elements in the array.
1 2 3 4 | let array = [1, 2, 3]; array.reverse(); console.log(array); // [3, 2, 1] |
22. The shift() function: The shift() function is used to remove the first element of the array and return the value of that element.
1 2 3 4 5 | let array = [1, 2, 3]; let firstElement = array.shift(); console.log(firstElement); // 1 console.log(array); // [2, 3] |
23. slice() function: The slice() function is used to create a new array from a given array, by selecting a start element and an end element.
1 2 3 4 | let array = [1, 2, 3, 4, 5]; let newArray = array.slice(1, 4); console.log(newArray); // [2, 3, 4] |
24. Some(): The some() function checks if at least one element in the array satisfies a certain condition.
1 2 3 4 | let array = [1, 2, 3]; console.log(array.some(element => element % 2 === 0)); // true console.log(array.some(element => element > 5)); // false |
25. sort() function: The sort() function is used to sort the elements in an array in a certain order. If a comparison function is not passed, the function will use the < operator to compare elements.
1 2 3 4 | let array = [5, 1, 4, 2, 3]; array.sort(); console.log(array); // [1, 2, 3, 4, 5] |
26. splice() function: The splice() function is used to add or remove elements from the array. This function takes three parameters: the starting position, the number of elements to remove, and the elements to add (optional).
1 2 3 4 | let array = [1, 2, 3, 4, 5]; array.splice(2, 2, 6, 7); console.log(array); // [1, 2, 6, 7, 5] |
27. unshift() function: The unshift() function is used to add one or more elements to the beginning of the array.
1 2 3 4 | let array = [1, 2, 3]; array.unshift(0); console.log(array); // [0, 1, 2, 3] |
28. The values() function: The values() function is used to return an Iterator object containing the values of the elements in the array.
1 2 3 4 5 6 | let array = [1, 2, 3]; let iterator = array.values(); console.log(iterator.next().value); // 1 console.log(iterator.next().value); // 2 console.log(iterator.next().value); // 3 |
29. group() function: The group() function is used to group elements in an array into subgroups based on a callback function.
1 2 3 4 | let array = [1, 2, 3, 4, 5]; let groups = array.group(element => element % 2 === 0); console.log(groups); // [[1, 3, 5], [2, 4]] |
30. groupToMap(): The groupToMap() function is similar to group(), but returns a Map object instead of an array of subarrays.
1 2 3 4 5 | let array = [1, 2, 3, 4, 5]; let map = array.groupToMap(element => element % 2 === 0); console.log(map.get(true)); // [2, 4] console.log(map.get(false)); // [1, 3, 5] |
In this article, we have introduced about commonly used functions in programming with JavaScript such as: at(), concat(), copyWithin(), entries(), every(), fill(), filter( ), find(), findIndex(), findLast(), findLastIndex(), flat(), flatMap(), forEach(), from(), includes(), indexOf(), reduce(), reverse(), shift(), slice(), some(), sort(), splice(), unshift(), values(), group(), and groupToMap().
JavaScript array functions provide many useful features for handling arrays of data in web applications. We can use them to manipulate arrays, search, sort, and group data elements. Each function has its own uses and characteristics, and understanding these functions will help you to code JavaScript more efficiently. Using array functions also makes your code more readable and maintainable. However, to use these functions effectively, you need to understand how each function works, and choose the right function for each situation in your application.
Hope this article will help you better understand JavaScript array functions and apply them effectively in your projects!!!