RGB logo

RGB Studios.org

A web development company

January 4, 2024

Array Methods in JavaScript - Part 3: New Methods in 2024

Justin Golden

web
javascript
Photo credit @mannyb on Unsplash

Length: Long

Level: X Beginner ✓ Intermediate ✓ Advanced


If you haven’t yet, read part one on the basic JavaScript array methods, or read part two on JavaScript array iteration methods!


Group By

Groups an array into an object with key-value pairs based on group condition.

const cars = [
	{ type: 'Volvo', year: 2016 },
	{ type: 'Saab', year: 2001 },
	{ type: 'BMW', year: 2010 },
	{ type: 'BMW', year: 2012 }
];

const grouped = Object.groupBy(cars, (car) => car.type);
console.log(grouped);

Returned: {BMW: [{…}, {…}], Saab: [{…}], Volvo: [{…}]}

Map.groupBy will return a Map.

We can also group by something more complex, for example:

const grouped = Object.groupBy(cars, (car) => car.type[0]);

This will group by the first letter of the car type, so Honda and Hyundai would be grouped together for example.

Returned: {V: [{…}], S: [{…}], B: [{…}, {…}]}

With

Creates a new array with the value at the specified index changed to the given value.

const cars = [
	{ type: 'Volvo', year: 2016 },
	{ type: 'Saab', year: 2001 },
	{ type: 'BMW', year: 2010 }
];

const carsWith = cars.with(1, { type: 'Ford', year: 2002 });
console.log(carsWith);
console.log(cars);

with does not mutate the array.

Cars With: [{type: 'Volvo', year: 2016}, {type: 'Ford', year: 2002}, {type: 'BMW', year: 2010}]

You can also use a negative index to change the values starting at the end.

At

Similar to bracket notation (cars[2]), but it allows negative numbers. We can use cars.at(-1) to get the last element.

Fill

Allows you to fill the entire array with a value.

const names = ['Jack', 'Jace', 'Jane', 'Josh', 'Kai', 'Kevin', 'Ken', 'Kyle'];
names.fill('Joe');

This mutates the original array:

Names: ['Joe', 'Joe', 'Joe', 'Joe', 'Joe', 'Joe', 'Joe', 'Joe']

You can also provide a second parameter for the index to start at (and optionally a third for the index of fill to end), so for example:

names.fill('Joe', 2);

Would return ['Jack', 'Jace', 'Joe', 'Joe', 'Joe', 'Joe', 'Joe', 'Joe']

names.fill('Joe', 2, 4);

Would return ['Jack', 'Jace', 'Joe', 'Joe', 'Kai', 'Kevin', 'Ken', 'Kyle']

toSorted, toReversed, toSpliced

These are the same as reverse, splice, and sort, but they do not mutate the original array and return a new array.

const names = ['Jack', 'Jace', 'Jane', 'Josh', 'Kai', 'Kevin', 'Ken', 'Kyle'];
const reversed = names.toReversed();

Reversed: ['Kyle', 'Ken', 'Kevin', 'Kai', 'Josh', 'Jane', 'Jace', 'Jack']

Names: ['Jack', 'Jace', 'Jane', 'Josh', 'Kai', 'Kevin', 'Ken', 'Kyle']

Note that names is not mutated, unlike if we called reversed.

Is Array

If you have a variable and you want to check if it’s an array, you might think to do the following:

const names = ['Jack', 'Jace', 'Jane', 'Josh'];
console.log(typeof names);

However, this will return 'object', since arrays are objects in JavaScript.

We can use Array.isArray:

console.log(Array.isArray(names)); // true

Sets

At time of writing (Dec 2023), these do not work in most major browsers. Feel free to learn about them for use in the coming months, or if you’re a reader from the future, then hello future reader!

These methods also work on Maps.

chart of javascript set functions

Check out the MDN docs on sets for more. Image above from the MDN docs.


Did you learn anything new from these articles? Consider sharing them with your friends or posting online with the buttons below!


Further Reading


More Blog Articles
  Share   Tweet   Pin   Share   Post   Post   Share   Email