#2: Array methods

 // 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

// 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 []

// 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']

// 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']

// 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

// Create arrays: 

const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']

/// AT:

  // 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!

// Create arrays: 

const countriesSpelled = ['B','r','a','z','i','l']
const countries = ['Brazil', 'Denmark', 'USA', 'Italy', 'Colombia', 'Argentina']

/// For each:

  // 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 -->

// 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]

// 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]

// 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

// 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

/// Find:

  // 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 -->

// 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

/// FindIndex:

  // 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

// 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

// 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

// 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

/// Every:

// 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

// 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]

// 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()

// 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

/// Sort:

// 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);

// 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

/// Fill:

// 1. value — value to fill array section with

// 2. start - index to start filling the array at. If start is negative, it is treated as length+start where length is the length of the array.

// 3. end - index to stop filling the array at. If end is negative, it is treated as length+end.

// In Use:

// A) Change Spelled Countries' array:

console.log(countriesSpelled);
// ['B', 'r', 'a', 'z', 'i', 'l']

// countriesSpelled.fill('Hey');

console.log(countriesSpelled); // ['Hey', 'Hey', 'Hey', 'Hey', 'Hey', 'Hey]

// Specify positions:

//countriesSpelled.fill('Hey', 2);

// Starts at 2:
// ['B', 'r', 'Hey', 'Hey', 'Hey', 'Hey']

countriesSpelled.fill('Hey', 2, 4);

// Starts at 3, ends at 4:
// ['B', 'r', 'Hey', 'Hey', 'i', 'l']

console.log(countriesSpelled);

// Negative:

// countriesSpelled.fill('Hey', -1);

// ['B', 'r', 'a', 'z', 'i', 'Hey']

//countriesSpelled.fill('Hey', -2, -3);
// the same

//countriesSpelled.fill('Hey', -1, 2);

// the same

console.log(countriesSpelled);

// B) Fill an array with 'Hey!'

const arr = [1, 2, 3, 4, 5];

arr.fill('Hey');

console.log(arr); // ['Hey', 'Hey', 'Hey', 'Hey', 'Hey']

// Specify positions:

//arr.fill('Hey', 2); // Starts at 2: [1, 2, 'Hey', 'Hey', 'Hey']
arr.fill('Hey', 2, 4); // Starts at 3, ends at 4: [1, 2, 'Hey', 'Hey', 5]

console.log(arr);

// C) EMPTY ARRAY + FILL

// New arr:
const a = new Array(7);
console.log(a); // [empty × 7]
// Filling it:
a.fill('Hey');
console.log(a);
// ['Hey', 'Hey', 'Hey', 'Hey', 'Hey', 'Hey', 'Hey']

<!-- // 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 -->

<!-- /// Array.from(): -->

<!-- // 1. iterable — An iterable object to convert to an array. -->

<!-- // 1. length -->

<!-- // 2.  mapfn — A mapping function to call on every element of the array. -->

<!-- // 2.1: current element -->
<!-- // 2.1: index -->
<!-- // 2.1: the entire array -->

<!-- // 3.  thisArg — Value of 'this' used to invoke the mapfn. -->

<!-- // Note: _ throwaway variable (we don't need the _ value at all , but we still need to define it 'cuz we need the 2º parameter - the index) -->

<!-- // const z = Array.from({ length: 5 }, (_, i) => i + 1);  -->

<!-- // console.log(z) // [1, 2, 3, 4, 5] -->

<!-- // In Use: -->

<!-- // A) Change Spelled Countries' array: -->

<!-- console.log(countriesSpelled);  -->
<!-- // ['B', 'r', 'a', 'z', 'i', 'l'] -->

<!-- // countriesSpelled.fill('Hey'); -->

<!-- console.log(countriesSpelled); // ['Hey', 'Hey', 'Hey', 'Hey', 'Hey', 'Hey] -->

<!-- // Specify positions: -->

<!-- //countriesSpelled.fill('Hey', 2); -->

<!-- // Starts at 2: -->
<!-- // ['B', 'r', 'Hey', 'Hey', 'Hey', 'Hey'] -->

<!-- countriesSpelled.fill('Hey', 2, 4);  -->

<!-- // Starts at 3, ends at 4: -->
<!-- // ['B', 'r', 'Hey', 'Hey', 'i', 'l'] -->

<!-- console.log(countriesSpelled); -->

<!-- // Negative: -->

<!-- // countriesSpelled.fill('Hey', -1);  -->

<!-- // ['B', 'r', 'a', 'z', 'i', 'Hey'] -->

<!-- //countriesSpelled.fill('Hey', -2, -3); -->
<!-- // the same -->

<!-- //countriesSpelled.fill('Hey', -1, 2); -->

<!-- // the same -->

<!-- console.log(countriesSpelled); -->

<!-- // B) Fill an array with 'Hey!' -->

<!-- const arr = [1, 2, 3, 4, 5]; -->

<!-- arr.fill('Hey'); -->

<!-- console.log(arr); // ['Hey', 'Hey', 'Hey', 'Hey', 'Hey'] -->

<!-- // Specify positions: -->

<!-- //arr.fill('Hey', 2); // Starts at 2: [1, 2, 'Hey', 'Hey', 'Hey'] -->
<!-- arr.fill('Hey', 2, 4); // Starts at 3, ends at 4: [1, 2, 'Hey', 'Hey', 5] -->

<!-- console.log(arr); -->

<!-- labelofTheElement.addEventListener('click', function () { -->
<!-- // Select all elements that have the same class: -->
<!--   const fromUI = Array.from( -->
<!--     document.querySelectorAll('.nameOfTheClassHere'), -->

<!-- // Replace A by B -->
<!--     el => Number(el.textContent.replace('A', 'B')) -->
<!--   ); -->

<!-- // log: -->
<!--   console.log(fromUI); -->

<!--   // Another way to conver to an array:  -->

<!--   // BUT: We'd need to do the mapping separately -->

<!--   // const fromUI2 = [...document.querySelectorAll('..nameOfTheClassHere')]; -->
<!-- } -->