JavaScript Array Tips

1. map() to transform array.

map(fn) applies a function to each item in the array and returns a new array.

const names = ['tom','bob','john'];
const uppercase = names.map((n) => n.toUpperCase());
console.log(uppercase) // ['TOM', 'BOB', 'JOHN']

2. filter() to filter an array

filter(fn) creates a new array by filtering down the items in the array based on the criteria (true/false) returned by the functions.

const numbers = [1,2,3,4];
const isEven = numbers.filter((n) => n % 2 === 0);
console.log(isEven) // [2,4]

3. find() and findIndex() to find an item in an array

find(fn) returns the first item that meets a condition and findIndex(fn) returns the index of that item.

const people = ['Alice', 'Bob', 'Andrew', 'John'];
const firstNameA = people.find((p) => p.startsWith('A'));
const firstNameAIdx = people.findIndex((p) => p.startsWith('A'));
console.log(firstNameA, firstNameAIdx) // Alice, 0

4. some() and every() to check conditions

some(fn) returns true if any one of the item meets the function condition. every(fn) returns true if all items meet the function condition.

const hasEven = [2,4,6].some((n) => n % 2 === 0); // true
const hasOdd = [2,4,6].some((n) => n % 2 !== 0); // false

const allOdds = [1,3,5].every((n) => n % 2 !== 0); // true
const notAllOdds = [1,2,3,4].every((n) => n % 2 !== 0); // false

5. sort() to sort the array in place.

const numbers = [4,2,3];
numbers.sort();
console.log(numbers) // [2, 3, 4]

const people = [
	{ 'name': 'Bob' },
	{ 'name': 'Alice' },
	{ 'name': 'Charlie' },
];
people.sort((a, b) => {
	if (a.name > b.name) return 1;
	if (a.name < b.name) return -1;
	return 0;
})
console.log(people) 
/* [
	{ 'name': 'Alice' },
	{ 'name': 'Bob' },
	{ 'name': 'Charlie' },
];
*/

Note: sorting array in place often can lead to hidden bugs. In UI immutability is often preferred. Often it's best to clone the array first then do the sorting or modification.

6. slice() to create a shallow copy of an array.

const people = ['Alice', 'Bob', 'Andrew', 'John'];
const firstTwoPeople = people.slice(0, 2);
firstTwoPeople[0] = 'Tom';
console.log(people) //  ['Alice', 'Bob', 'Andrew', 'John']
console.log(firstTwoPeople) //  ['Tom', 'Bob']

Note: shallow copy doesn't copy nested objects. If the array has nested objects, I recommend using lodash library and its _.cloneDeep() function.

7. Spread Operator to create a shallow copy of an array.

Alternatively the spread operator ... can be used to create a shallow copy of an array.

const people = ['Alice', 'Bob', 'Andrew', 'John'];
const copied = [...people]
copied[0] = 'Tom';
console.log(people) //  ['Alice', 'Bob', 'Andrew', 'John']
console.log(copied) //  ['Tom', 'Bob', 'Andrew', 'John']

8. Remove duplicates using Set

A quick way to remove duplicates from simple array is using new Set().

const numbers = [1,2,2,3,4,5,5];
const noDup = [...new Set(numbers)];
console.log(noDup) // [1, 2, 3, 4, 5]

9. Combine Arrays with Spread Operator

The spread operator ... is useful to combine arrays into a new array.

const a = [1,2,3]
const b = [4,5,6]
const c = [...a, ...b]
console.log(a) // [1, 2, 3]
console.log(b) // [4, 5, 6]
console.log(c) // [1, 2, 3, 4, 5, 6]