#1: Basic Array methods
#1: Notes on Basic Array methods
By Larissa Cury in R
April 28, 2023
Shall we start with notes on Array methods?
Ps: Notes based on Jonas Schmedtmann’s course on Udemy – No credits intended
#1: .slice()
- Aim: Extract parts of an array
- Mutates the array? No.
- Input: an array
- Returns: Returns a copy of a section of an array
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
/// Slice
// Parameters:
// 1. start: The beginning index of the specified portion of the array. If start is undefined, then the slice // // begins at index 0.
// 2. The end index of the specified portion of the array. This is exclusive of the element at the index 'end'. // If end is undefined, then the slice extends to the end of the array. (not included in the output)
// In use:
console.log(countries.slice(3)) // ['Italy', 'Colombia', 'Argentina']
console.log(countries.slice(3,5)) // returns ['Italy', 'Colombia'] (Argentina not included)
console.log(countries.slice(-1)) // returns ['Argentina']
console.log(countries.slice(-5)) // returns ['Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
console.log(countries.slice(-5, -4)) // returns ['Denmark']
// Creating a shallow copy of the array:
console.log(countries.slice()); // Call with no arguments
console.log([...countries]); // With spread operator
#2: .splice()
- Aim: Change the original array and delete the extracted elements. If necessary, inserts new elements in their place, returning the deleted elements.
- Mutates the array? Yes!
- Input: an array
- Returns: An array containing the elements that were deleted.
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
/// Splice:
// Parameters:
// 1. Start: The zero-based location in the array from which to start removing elements.
// 2. End: The number of elements to remove.
// In Use:
console.log(countries.splice(1)); // ['Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
console.log(countries.splice(-4)); // ['Brazil']
console.log(countries.splice(5)); // Returns []
console.log(countries.splice(3, 4)); // Returns []
#3: .reverse()
- Aim: Reverses the elements in an array in place.
- Mutates the array? Yes!
- Input: an array
- Returns: Returns a reference to the same array.
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
/// Reverse:
// Can be used without arguments
// In Use:
console.log(countries.reverse()); // ['Argentina', 'Colombia', 'Italy', 'USA', 'Denmark', 'Brazil']
console.log(countriesSpelled.reverse()); // ['l', 'i', 'z', 'a', 'r', 'B']
#4: .concat()
- Aim: Combines two or more arrays
- Mutates the array? No!
- Input: an array
- Returns: Returns a new array without modifying any existing arrays.
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
/// Concat:
// 1. items: Additional arrays and/or items to add to the end of the array.
// In Use:
console.log(countries.concat(countriesSpelled)); // ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina', 'B', 'r', 'a', 'z', 'i', 'l']
// Using spreed:
console.log([...countries, ...countriesSpelled]); // ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina', 'B', 'r', 'a', 'z', 'i', 'l']
#5: .join()
- Aim: Adds all the elements of an array into a string, separated by the specified separator string.
- Mutates the array? No!
- Input: an array
- Returns: Returns a new string
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
/// At:
// 1. separator: A string used to separate one element of the array from the next in the resulting string. If omitted, the array elements are separated with a comma.
// In Use:
console.log(countries.join()); // Brazil,Denmark,USA,Italy,Colombia,Argentina
console.log(countries.join('-')); // Brazil-Denmark-USA-Italy-Colombia-Argentina
console.log(countries.join(' and ')); // Brazil and Denmark and USA and Italy and Colombia and Argentina
#6: .at()
- Aim: Takes values out of the array
- Mutates the array? No!
- Input: an array
- Returns: Returns a new string with the extracted values
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
/// Join:
// 1. the index
// In Use:
console.log(countries.at(0)); // Brazil
console.log(countries.at(1)); // Denmark
console.log(countries.at(-1)); // Argentina
console.log(countries.at(-2)); // Colombia
console.log(typeof countries.at(-2)); // STRING!
#7: .forEach()
- Aim: Performs the specified action for each element in an array (it loops over the arr)
- Mutates the array? No!
- Input: an array
- Returns: It returns undefined
// Note: You CANNOT break a for each loop! It will ALWAYS loop over the ENTIRE array and there’s nothing you can do about it! // Note 2: Use when we want a new array with the same length as the original. We just want to take sth out of the original array and put it in the new array
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
/// Join:
// 1. callbackfn — A function that accepts up to three arguments. forEach calls the callbackfn function one time // for each element in the array:
// country - current element
// i - current index
// arr - the entire array that we are looping over
// 2. thisArg — An object to which the this keyword can refer in the callbackfn function. If thisArg is // omitted, undefined is used as the this value.
// In Use:
// A)
countries.forEach((country, i, arr) => console.log(country, i, arr));
// returns:
<!-- Denmark 1 (6) ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']0: "Brazil"1: "Denmark"2: "USA"3: "Italy"4: "Colombia"5: "Argentina"length: 6[[Prototype]]: Array(0) -->
<!-- USA 2 (6) ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina'] -->
<!-- Italy 3 (6) ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina'] -->
<!-- Colombia 4 (6) ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina'] -->
<!-- Argentina 5 (6) ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina'] -->
// B)
countries.forEach((country, i, arr) =>
console.log(`${country} is the ${i}º element of the array`)
);
// returns
<!-- Brazil is the 0º element of the array -->
<!-- Denmark is the 1º element of the array -->
<!-- USA is the 2º element of the array -->
<!-- Italy is the 3º element of the array -->
<!-- Colombia is the 4º element of the array -->
<!-- Argentina is the 5º element of the array -->
#8: .map()
- Aim: The map method calls the callbackfn function one time for each element in the array.
- Mutates the array? No!
- Input: an array
- Returns: Returns a brand new array which contains in each position the result of the callback function
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
const countriesPOP = [214.3, 5.857, 331.9, 59.11, 51.52, 45.81] // in milions of people
/// Map:
// 1. callbackfn — A function that accepts up to three arguments.
// country - current element
// i - current index
// arr - the entire array that we are looping over
// 2. thisArg — An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
// In Use:
const toBilion = 1000;
const countriesBigPop = countriesPOP.map(
(country, i, arr) => country / toBilion
);
// milion to bilion:
console.log(countriesBigPop);
// returns: [0.21430000000000002, 0.005857, 0.3319, 0.05911, 0.05152, 0.045810000000000003]
#9: .filter()
- Aim: The map method calls the callbackfn function one time for each element in the array.
- Mutates the array? No!
- Input: an array
- Returns: Returns an array containing the elements of the original array that met the condition specified in a callback function.
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
const countriesPOP = [214.3, 5.857, 331.9, 59.11, 51.52, 45.81] // in milions of people
/// Map:
// 1. predicate — A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array.
// country - current element
// i - current index
// arr - the entire array that we are looping over
// 2. thisArg — An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
// In Use:
const veryBigPopulation = countriesPOP.filter(
(country, i, arr) => country > 200
);
console.log(veryBigPopulation); // returns: [214.3, 331.9]
#10: .reduce()
- Aim: Calls the specified callback function for all the elements in an array.
- Mutates the array? No!
- Input: an array
- Returns: The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
const countriesPOP = [214.3, 5.857, 331.9, 59.11, 51.52, 45.81] // in milions of people
/// Reduce:
// 1. callbackfn — A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.
// 1. Accumulator
// 2. country - current element
// 3. i - current index
// 4. arr - the entire array that we are looping over
// 2. initialValue — If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
// In Use:
// acc = keep track of the current sum!
const countriesSUM = countriesPOP.reduce(
(acc, country, i, arr) => acc + country,
0
);
console.log(countriesSUM); // 708.4970000000001
console.log(typeof countriesSUM); // number
const countriesSUM = countriesPOP.reduce(
(acc, country, i, arr) => acc + country,
-100
);
console.log(countriesSUM); // 608.4970000000001
// acc = Keep track of the current maximum value!
const max = countriesPOP.reduce((acc, country) => {
if (acc > country) {
return acc;
} else {
return country;
}
}, countriesPOP[0]);
console.log(max); // 331.9
#11: .find()
- Aim: Retrieve an element from an array based on a condition
- Mutates the array? No!
- Input: an array
- Returns: Returns the value of the first element in the array where predicate is true, and undefined otherwise.
// Note: .find()
x .filter()
// 1. .filter()
returns ALL the elements that match a condition, while .find()
only returns the FIRST one
// 2. Filter returns a NEW ARRAY that match a condition, while .find()
only returns the element itself and not a condition
// 3. When condition is T, .find()
returns the first element that satisfies it
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
const countriesPOP = [214.3, 5.857, 331.9, 59.11, 51.52, 45.81] // in milions of people
/// Reduce:
// 1. predicate - find calls predicate once for each element of the array, in ascending order, until it finds one where predicate returns true. If such an element is found, find immediately returns that element value. Otherwise, find returns undefined.
// 1. country - current element
// 2. i - current index
// 3. arr - the entire array that we are looping over
// 2. @param thisArg - If provided, it will be used as the this value for each invocation of predicate. If it is not provided, undefined is used instead.
// In Use:
const firstSmallCountry = countriesPOP.find(country => country < 100);
console.log(firstSmallCountry); // 5.857
// FIND OBJECT IN AN ARRAY BASED ON SOME PROPERTY OF THAT OBJECT
const country1 = {
name: 'Brazil',
population: 214.3,
code: 'BRA',
cities: ['Rio', 'São Paulo', 'Porto Alegre', 'Belo Horizonte'],
};
const country2 = {
name: 'Denmark',
population: 5.857,
code: 'DK',
cities: ['Copenhagen', 'Aalborg', 'Randers', 'Aarhus'],
};
const country3 = {
name: 'United States of America',
population: 331.9,
code: 'USA',
cities: ['Denver', 'Dallas', 'NYC', 'Ohio'],
};
const country4 = {
name: 'Italy',
population: 59.11,
code: 'IT',
cities: ['Rome', 'Cecina', 'Firenze', 'Veneza'],
};
const countriesObjs = [country1, country2, country3, country4];
console.log(countriesPOP);
console.log(countriesObjs);
// Finding 'Italy' OBJECT:
const getIT = countriesObjs.find(country => country.code === 'IT');
console.log(getIT);
// returns Italy's object:
<!-- {name: 'Italy', population: 59.11, code: 'IT', cities: Array(4)} -->
<!-- cities: (4) ['Rome', 'Cecina', 'Firenze', 'Veneza'] -->
<!-- code: "IT" -->
<!-- name: "Italy" -->
<!-- population: 59.11 -->
<!-- [[Prototype]]: Object -->
#12: .findIndex()
- Aim: Retrieve an index of an element in an array
- Mutates the array? No!
- Input: an array
- Returns: Returns the index of the first element in the array where predicate is true, and -1 otherwise.
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
const countriesPOP = [214.3, 5.857, 331.9, 59.11, 51.52, 45.81] // in milions of people
/// Reduce:
// 1. predicate - find calls predicate once for each element of the array, in ascending order, until it finds one where predicate returns true. If such an element is found, findIndex immediately returns that element index. Otherwise, findIndex returns -1.
// 2. @param thisArg - If provided, it will be used as the this value for each invocation of predicate. If it is not provided, undefined is used instead.
// In Use:
// FIND INDEX OF OBJECT IN AN ARRAY OF OBJECTS:
const country1 = {
name: 'Brazil',
population: 214.3,
code: 'BRA',
cities: ['Rio', 'São Paulo', 'Porto Alegre', 'Belo Horizonte'],
};
const country2 = {
name: 'Denmark',
population: 5.857,
code: 'DK',
cities: ['Copenhagen', 'Aalborg', 'Randers', 'Aarhus'],
};
const country3 = {
name: 'United States of America',
population: 331.9,
code: 'USA',
cities: ['Denver', 'Dallas', 'NYC', 'Ohio'],
};
const country4 = {
name: 'Italy',
population: 59.11,
code: 'IT',
cities: ['Rome', 'Cecina', 'Firenze', 'Veneza'],
};
const countriesObjs = [country1, country2, country3, country4];
// Returns:
const getIt = countriesObjs.findIndex(country => country.code === 'IT');
console.log(getIt); // returns 3
const getBR = countriesObjs.findIndex(country => country.code === 'BRA');
console.log(getBR); // returns 0
const getDK = countriesObjs.findIndex(country => country.code === 'DK');
console.log(getDK); // returns 1
// TO DELETE AN ELEMENT FROM AN ARRAY, WE NEED THE SPLICE METHOD. HOWEVER, TO USE IT, WE NEED THE INDEX OF THE ELEMENT THAT WE WANT TO DELETE
// Exclude Italy:
console.log(countriesObjs); // ALL 4 COUNTRIES
countriesObjs.splice(getIt, 1);
console.log(countriesObjs); // ONLY BRA, DK AND USA
// On the whole array:
console.log(countriesObjs.splice(countriesObjs, 1)); // BRA
console.log(countriesObjs.splice(countriesObjs, 2)); // DK and USA
#13: .includes()
- Aim: Determines whether an array includes a certain element
- Mutates the array? No!
- Input: an array
- Returns: Returns a BOOLEAN as approppriate (returns T if ANY value in the array is EXACTLY equal to x)
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
const countriesPOP = [214.3, 5.857, 331.9, 59.11, 51.52, 45.81] // in milions of people
/// Includes:
// 1. searchElement — The element to search for.
// 2. fromIndex — The position in this array at which to begin
// In Use:
// Note: only exact same word (ex: Bra doesn't work)
console.log(countries.includes('Brazil')); // T
console.log(countries.includes('India')); // F
#14: .some()
- Aim: Determines whether the specified callback function returns true for ANY element of an array.
- Mutates the array? No!
- Input: an array
- Returns: Returns a BOOLEAN as approppriate (returns T if ANY value in the array meets the condition)
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
const countriesPOP = [214.3, 5.857, 331.9, 59.11, 51.52, 45.81] // in milions of people
/// Some:
// 1. predicate - A function that accepts up to three arguments. The some method calls the predicate function for each element in the array until the predicate returns a value which is coercible to the Boolean value true, or until the end of the array.
// 2. thisArg - An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
// In Use:
console.log(countriesPOP); // [214.3, 5.857, 331.9, 59.11, 51.52, 45.81]
// 2 values : T
const isBig = countriesPOP.some(pop => pop > 200);
console.log(isBig); // RETURNS T
// 1 value: T
const isBig = countriesPOP.some(pop => pop > 300);
console.log(isBig); // RETURNS T
// No value T:
const isBig = countriesPOP.some(pop => pop > 3000);
console.log(isBig); // RETURNS F
#15: .every()
- Aim: Determines whether ALL the members of an array satisfy the specified test.
- Mutates the array? No!
- Input: an array
- Returns: Returns a BOOLEAN as approppriate (returns T if ALL values in the array meet the condition)
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
const countriesPOP = [214.3, 5.857, 331.9, 59.11, 51.52, 45.81] // in milions of people
/// Some:
// 1. predicate - A function that accepts up to three arguments. The every method calls the predicate function for each element in the array until the predicate returns a value which is coercible to the Boolean value false, or until the end of the array.
// 2. thisArg - An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
// In Use:
const isBig = countriesPOP.every(pop => pop > 300);
console.log(isBig); // RETURNS F
const isBig2 = countriesPOP.every(pop => pop < 5000);
console.log(isBig2); // RETURNS T
#16: .flat()
- Aim: Obtain a shallow copy of the array containing the sub-array elements and its elements
- Mutates the array? No!
- Input: an array
- Returns: Returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
const countriesPOP = [214.3, 5.857, 331.9, 59.11, 51.52, 45.81] // in milions of people
// Create Nested array of countries - 1 NESTED LEVEL:
const countriesCodes = ['BRA', 'DK', 'USA', 'IT', 'COL', 'ARG'];
const countriesNested = countries.map((country, i, arr) => [
country,
countriesCodes[i],
]);
console.log(countriesNested);
// output:
<!-- [["Brazil","BRA"],["Denmark","DK"],["USA","USA"],["Italy","IT"],["Colombia","COL"],[ "Argentina","ARG"]] -->
// Create Nested array of countries - 2 NESTED LEVELS:
const countriesCodes2 = ['BRA', 'DK', 'USA', 'IT', 'COL', 'ARG'];
const countriesNested2 = countries.map((country, i, arr) => [
country,
[countriesCodes[i], countriesPOP[i]],
]);
console.log(countriesNested2);
// output:
<!-- [["Brazil",["BRA",214.3]],["Denmark",[ "DK",5.857]],["USA",["USA",331.9]],["Italy",[ -->
<!-- "IT",59.11]],["Colombia",["COL",51.52]],[ "Argentina",["ARG",45.81]]] -->
/// Flat:
// 1. depth — The maximum recursion depth
// In Use:
// Getting countries' names + code as elements in a new array
console.log(countriesNested.flat()); // ['Brazil', 'BRA', 'Denmark', 'DK', 'USA', 'USA', 'Italy', 'IT', 'Colombia', 'COL', 'Argentina', 'ARG']
// Getting all elements in the same array:
// Wrong Way //
console.log(countriesNested2.flat());
// ['Brazil', Array(2), 'Denmark', Array(2), 'USA', Array(2), 'Italy', Array(2), 'Colombia', Array(2), 'Argentina', Array(2)]
// 0:"Brazil"
// 1:(2) ['BRA', 214.3]
// 2:"Denmark"
// 3:(2) ['DK', 5.857]
// 4:"USA"
// 5:(2) ['USA', 331.9]
// 6:"Italy"
// 7:(2) ['IT', 59.11]
// 8:"Colombia"
// 9:(2) ['COL', 51.52]
// 10:"Argentina"
// 11:(2) ['ARG', 45.81]
// length:12
// [[Prototype]]: Array(0)
// Getting all elements in the same array:
// Right Way //
console.log(countriesNested2.flat(2));
// ['Brazil', 'BRA', 214.3, 'Denmark', 'DK', 5.857, 'USA', 'USA', 331.9, 'Italy', 'IT', 59.11, 'Colombia', 'COL', 51.52, 'Argentina', 'ARG', 45.81]
#17: .flatMap()
- Aim: Calls a defined callback function on each element of an array. Then, flattens the result into a new array. This is identical to a map followed by flat with depth 1.
- Mutates the array? No!
- Input: an array
- Returns: Returns a new flattered array with the elements results from the
.map()
callbackfn
Note: It only goes ONE level deep, if you want to go deeper, you still need .flat()
! Using .map()
followed by .flat()
is a really used operation
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
const countriesPOP = [214.3, 5.857, 331.9, 59.11, 51.52, 45.81] // in milions of people
// Create Nested array of countries - 1 NESTED LEVEL:
const countriesCodes = ['BRA', 'DK', 'USA', 'IT', 'COL', 'ARG'];
const countriesNested = countries.map((country, i, arr) => [
country,
countriesCodes[i],
]);
console.log(countriesNested);
// output:
<!-- [["Brazil","BRA"],["Denmark","DK"],["USA","USA"],["Italy","IT"],["Colombia","COL"],[ "Argentina","ARG"]] -->
// Create Nested array of countries - 2 NESTED LEVELS:
const countriesCodes2 = ['BRA', 'DK', 'USA', 'IT', 'COL', 'ARG'];
const countriesNested2 = countries.map((country, i, arr) => [
country,
[countriesCodes[i], countriesPOP[i]],
]);
console.log(countriesNested2);
// output:
<!-- [["Brazil",["BRA",214.3]],["Denmark",[ "DK",5.857]],["USA",["USA",331.9]],["Italy",[ -->
<!-- "IT",59.11]],["Colombia",["COL",51.52]],[ "Argentina",["ARG",45.81]]] -->
/// FlatMap:
// 1. callback - A function that accepts up to three arguments. The flatMap method calls the callback function one time for each element in the array.
// 2. thisArg - An object to which the this keyword can refer in the callback function. If thisArg is omitted, undefined is used as the this value.
// In Use:
// With map + flat()
const sumUpPop = countriesObjs
.map(country => country.population) // [214.3, 5.857, 331.9, 59.11]
.flat() // [214.3, 5.857, 331.9, 59.11]
.reduce((acc, country, i, arr) => acc + country, 0);
console.log(sumUpPop); // 611.167
// With flatMap()
const sumUpPop2 = countriesObjs
.flatMap(country => country.population) // [214.3, 5.857, 331.9, 59.11]
.reduce((acc, country, i, arr) => acc + country, 0);
console.log(sumUpPop2); // 611.167
// Nested random array:
const a = [[10, 20], [67, 70], 50, [30, 90]];
// With map + flat()
const sumUpPop = a
// .map(a => a) // [Array(2), Array(2), 50, Array(2)]
.flat() // [10, 20, 67, 70, 50, 30, 90]
.reduce((acc, a, i, arr) => acc + a, 0); // 337
// Note: works the same without .map()
#18: .sort()
- Aim: Sorts an array in place.
- Mutates the array? Yes!
- Input: an array
- Returns: Returns a reference to the same array. Returns the sorted original array.
// Create arrays:
const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']
const countriesPOP = [214.3, 5.857, 331.9, 59.11, 51.52, 45.81] // in milions of people
/// Some:
// 1. compareFn - Function used to determine the order of the elements. It is expected to return a negative value if the first argument is less than the second argument, zero if they're equal, and a positive value otherwise. If omitted, the elements are sorted in ascending, ASCII character order.
// EX: [11,2,22,1].sort((a, b) => a - b)
// In Use:
// A) SORTING STRINGS => WORKS ALPHABETICALLY
const sortedCountries = countries.sort(); // ['Argentina', 'Brazil', 'Colombia', 'Denmark', 'Italy', 'USA']
console.log(sortedCountries);
// B) Numbers => It doesn't work properly
const sortedPop = countriesPOP.sort(); // [214.3, 331.9, 45.81, 5.857, 51.52, 59.11]
console.log(sortedPop);
// INSTEAD:
// ASCENDING ORDER:
const sortedPop2 = countriesPOP.sort((a, b) => a - b); // [5.857, 45.81, 51.52, 59.11, 214.3, 331.9]
console.log(sortedPop2);
// DECREASING ORDER:
const sortedPop3 = countriesPOP.sort((a, b) => b - a); // [331.9, 214.3, 59.11, 51.52, 45.81, 5.857]
console.log(sortedPop3);
🐕 Au-au! Our array’s methods cheatsheet is getting pretty cool!