JavaScript Array.prototype.group()

Syntax of JavaScript Array.prototype.group()

We have seen the overview of the javascript group() by function, now let’s move to the syntax of the javascript group() by function.

callbackfn is the callback function and this could be an arrow function, an inline function, or a user-defined function. Let’s see a different set of syntaxes we can use with different types of parameters for the javascript group by in the next section.

Parameters of JavaScript Array.prototype.group()

The callbackfn is a function that is the first parameter of the javascript group function and it can accept three arguments but none of them is compulsory :

• the value of the element
• the index of the element
• the object being traversed or the array which invoked the group() function.

callbackfn is called on every array element in ascending order.

If the thisArg parameter is provided, it will be used as the this value for each invocation of callbackfn. If thisArg is not provided, the this object is set to undefined.

The parameters are the value of the array, the element's index, and the array object being traversed.

Let's see some different sets of syntax possible for the javascript group by function based on the different parameters.

Return Value of JavaScript Array.prototype.group()

The return value of the JavaScript group function is an object. The object returned from this function will contain the keys as the groups, returned by the callback function and these key elements contain the array values.

Exceptions of JavaScript Array.prototype.group()

If the object is passed to the group() function and is not a callable object, then the TypeError exception is thrown. In other words, if the object is not a function, the Uncaught TypeError: object is not a function exception is thrown by the javascript group by function.

Examples

We have seen the basic concept of the javascript group function, now let’s understand its syntax and working by an example.

In this example, we are taking an array that contains the objects and each object will contain some information about the students that as their names and gender. We are going to apply group function over it and divide the students based on gender.

Output

Explanation

In the above example, we have used a function that returns the gender of a student. The return value is used to group the students. The arrow function was used as a callback function and at each iteration, it has taken the current value as a parameter and returned its gender by using Javascript group by the function we have divided elements based on the gender.

What is JavaScript Array.prototype.group() ?

Array grouping is a typical operation a developer might come across. Array.prototype.group() is inspired by the SQL GROUP BY statement. JavaScript doesn’t have this mechanism built in. But fortunately, the group() method is being proposed for Array objects, and currently, it is in Stage 3.

We can use the group() method on arrays to group array elements based on the return value of a function. Array.prototype.group() returns an object with the keys as grouped values, and the values of this object are array elements corresponding to that group.

The Javascript group() function only works if the callback function returns the string value, if the callback function returns arbitrary values, better to use the groupToMap() function. If the array calling to javascript group function contains empty slots or they don’t have value based on which we are going to create the group then those elements are marked as undefined.

More Examples

Example 1 :

In this example, we have an array of real numbers and we are going to divide the number into groups based on their integer value. We will use the Math.floor method to get return the integer part of the number and divide the elements using javascript group by function.

Output

Explanation

Here we're passing a built-in function Math.floor to group the integers based on their integer value. Here for '1.1' and '1.4' we got 1 as the integer value and 2 for the remaining numbers.

Example 2:

In this example, we have an array of objects which contains a person's name and the city of the person. Some of the indexes are empty and some of the elements don’t have the city defined, we will use the Javascript group by function here.

Output

Explanation

In the above code, all the objects of the array have the name and city but one element is missing completely while one doesn’t have the city in it. In the output, we got the undefined key and its value as ‘undefined’ because of the empty second index. As the fourth index doesn’t contain the city, it is ignored and not contained in any group.

Supported Browsers

Currently, only Firefox Nightly supports this feature. But this might be supported by most browsers after the proposal gets accepted.