Array Methods

array-methods.md

Array Methods

filter

The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function (true or false).

const filteredItem = items.filter((item) => item.age < 40)

const result = words.filter((word) => word.length < 6)

map

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Use instead of for loop.

const itemNames = items.map((item) => item.name)

const result = words.map((word) => word.length)

find

The find() method returns the value of the first element in the provided array that satisfies the provided testing function (true or false). If no values satisfy the testing function, undefined is returned.

const foundName = items.find((item) => item.name === "Jane")

const foundItem = items.find((item) => item.name === "Bike")

forEach

The forEach() method executes a provided function once for each array element. It replaces the clunky for loop.

forEach() does not return anything. It just loops through the array.

items.forEach((item) => {
	console.log(item.city)
})

// expected output: "New York"
// expected output: "London"
// expected output: "Paris"

some

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value true or false. You can think of as if "any" item passes the test, then true, otherwise false.

const hasInexpensiveItems = items.some((item) => item.price <= 100)

Alternate syntax:

const hasInexpensiveItems = items.some(function (item) {
	return item.price <= 100
})

Alternate syntax:

const hasInexpensiveItems = items.some((item) {
	return item.price <= 100
})

every

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value true or false. You can think of as if "all" items pass the test, then true, otherwise false.

const hasInexpensiveItems = items.every((item) => item.price <= 100)

Alternate syntax:

const hasInexpensiveItems = items.every(function (item) {
	return item.price <= 100
})

Alternate syntax:

const hasInexpensiveItems = items.every((item) {
	return item.price <= 100
})

reduce

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

const total = items.reduce((currentTotal, item) => {
	return item.price + currentTotal
}, 0)

includes

The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

const numbers = [1, 2, 3]

console.log(numbers.includes(2))

Alternate syntax:

const includesTwo = numbers.includes(2)

console.log(includesTwo)

Examples

filter

items = [
	{ name: "John", age: 20, city: "New York" },
	{ name: "Jane", age: 30, city: "London" },
	{ name: "Jack", age: 40, city: "Paris" },
	{ name: "Jill", age: 50, city: "New York" },
]

const filteredItem = items.filter((item) => item.age < 40)

const filteredItem = items.filter((item) => {
	return item.age < 40
})

const filteredItem = items.filter((item) => {
	const isOld = item.age < 40
	return isOld
})

console.log(filteredItem)

//[
//  { name: 'John', age: 20, city: 'New York' },
//  { name: 'Jane', age: 30, city: 'London' }
//]

map

items = [
{ name: "John", age: 20, city: "New York" },
{ name: "Jane", age: 30, city: "London" },
{ name: "Jack", age: 40, city: "Paris" },
{ name: "Jill", age: 50, city: "New York" }
]

const doubleAge = items.map(item => item.age \* 2);

const itemNames = items.filter((item) => item.name);

console.log(itemNames);

// [ 40, 60, 80, 100 ]

find

items = [
{ name: "John", age: 20, city: "New York" },
{ name: "Jane", age: 30, city: "London" },
{ name: "Jack", age: 40, city: "Paris" },
{ name: "Jill", age: 50, city: "New York" }
]

const foundItem = items.find((item) => {
return item.name === 'Jane';
});

console.log(foundItem);

// { name: 'Jane', age: 30, city: 'London' }

constant foundName = items.find((item) => item.name === 'Jane')

console.log(foundItem);

// { name: 'Jane', age: 30, city: 'London' }

const foundCity = items.find((item) => item.city === 'London')

console.log(foundItem);

// { name: 'Jane', age: 30, city: 'London' }

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

forEach

const array1 = ["a", "b", "c"]

array1.forEach((element) => console.log(element))

// expected output: "a"
// expected output: "b"
// expected output: "c"

items = [
	{ name: "John", age: 20, city: "New York" },
	{ name: "Jane", age: 30, city: "London" },
	{ name: "Jack", age: 40, city: "Paris" },
	{ name: "Jill", age: 50, city: "New York" },
]

items.forEach((item) => {
	console.log(item.city)
})

// expected output: "New York"
// expected output: "London"
// expected output: "Paris"
// expected output: "New York"

some

items = [
	{ name: "John", age: 20, city: "New York" },
	{ name: "Jane", age: 30, city: "London" },
	{ name: "Jack", age: 40, city: "Paris" },
	{ name: "Jill", age: 50, city: "New York" },
]

const underThirty = items.some((item) => {
	return items.age < 30
})

// expected output: true

every

items = [
{ name: "John", age: 20, city: "New York" },
{ name: "Jane", age: 30, city: "London" },
{ name: "Jack", age: 40, city: "Paris" },
{ name: "Jill", age: 50, city: "New York" }
]

const underThirty = items.every((item) => {
return items.age < 30;
});

// expected output: false

const underThirty = items.every((item) => {
return items.age < 70;
});

// expected output: true
```

## reduce

```js
const items = [
{ name: "John", age: 20, city: "New York" },
{ name: "Jane", age: 30, city: "London" },
{ name: "Jack", age: 40, city: "Paris" },
{ name: "Jill", age: 50, city: "New York" }
]

const total = items.reduce((currentTotal, item) => {
return item.age + currentTotal
}, 0)

console.log(total)

// expected output: 140

includes

const array1 = [1, 2, 3]

console.log(array1.includes(2))

// expected output: true