Array

Create Empty Array with sizes

const arr = [...Array(3)];
arr.forEach((val)=>{console.log(val);});
// undefined
// undefined
// undefined

// Generate a sequence of numbers
// Since the array is initialized with `undefined` on each position,
// the value of `v` below will be `undefined`
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]

Filter and Find

• Get the ideal value based on the condition

• Find is used to get the first ideal value from the array

• Filter is used to return new array that is ideal based on the condition

const array1 = [1, 2, 3];

const array2 = array1.find(eachArray=> eachArray > 1);

console.log(array2); //2


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

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3


const array3 = array1.filter(eachArray => eachArray > 1);

console.log(array3); // [2,3]

console.log(array1); // [1,2,3]

Splice

• Insert new value into original array on specific position and delete certain number of array on specific location

const array1 = ['a', 'b', 'c'];

array1.splice(3, 0, 'd');

console.log(array1); // abcd

array1.splice(2, 1);

console.log(array1); // abd

array1.splice(0, 2, 'e');

console.log(array1); // ed

For Each and Map

Common

• Both can use to run void function and have the same output

const array1 = [{id:"test1",number:1}, {id:"test2",number:2}, {id:"test3",number:3}];

array1.map(eacharray=>{console.log(eacharray);});
array1.forEach(eacharray=>{console.log(eacharray);});
// Output:
// > Object { id: "test1", number: 1 }
// > Object { id: "test2", number: 2 }
// > Object { id: "test3", number: 3 }

Difference

• For Each focus on affecting the original array, while map focus on creating new array

const array1 = [{id:"test1",number:1}, {id:"test2",number:2}, {id:"test3",number:3}];

array1.forEach((element, index) => {return array1[index] = element.id});

array1.map(eacharray=>{console.log(eacharray);});

// Output: 
// test1
// test2
// test3

const array1 = [{id:"test1",number:1}, {id:"test2",number:2}, {id:"test3",number:3}];

const array2 = array1.map(element => element.id);

array1.map(eacharray => {console.log(eacharray);});
// Output: 
// test1
// test2
// test3

Conclusion

• When doing logic on original array, use for Each

• When creating new array instead of affecting original array, use map

Sort

var stringArray = ["b","a","e","d"];
// The default is sorted by letter
stringArray.sort();
// a b d e
console.log(stringArray);
var points = [40, 100, 1, 5, 25, 10];
// Sort by number in ascending order
points.sort(function(a, b){return a - b});
// 1 5 10 25 40 100
console.log(points);
// Sort by number in descending order
points.sort(function(a, b){return b - a});
// 100 40 25 10 5 1
console.log(points);

Includes

• arr.includes(valueToFind , fromIndex) and return boolean

• if from Index is smaller than 0, for example: -1 . the from Index will be the size of array - 1

const pets = ['cat', 'dog', 'bat','snake'];

console.log(pets.includes('cat'));
// true
console.log(pets.includes('at'));
// false

// [dog,bat,snake]
console.log(pets.includes('cat',1));
// false
console.log(pets.includes('dog',1));
// true

// dog bat,snake
console.log(pets.includes('dog',-3));
// true
console.log(pets.includes('cat',-3));
// false

Reduce

• Example 1:

 const test = [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  console.log(accumulator, currentValue , currentIndex, array);
  return accumulator + currentValue
})

 console.log(test);

 const test2 = [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  console.log(accumulator, currentValue);
  return accumulator + currentValue
},10)

 console.log(test2);

 //Output: 
// 0 1 1 Array [0, 1, 2, 3, 4]
// 1 2 2 Array [0, 1, 2, 3, 4]
// 3 3 3 Array [0, 1, 2, 3, 4]
// 6 4 4 Array [0, 1, 2, 3, 4]
// 10
// 10 0
// 10 1
// 11 2
// 13 3
// 16 4
// 20

• Example 2

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

Checking

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

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

// checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array.some(even));
// expected output: true

Concat and join

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

Keys and values

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key);
}
// expected output: 0
// expected output: 1
// expected output: 2

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
}

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

FlatMap

const arr1 = [1, 2, 3, 4];

arr1.map((x) => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap((x) => x * 2);
// [2, 4, 6, 8]

arr1.flatMap((x) => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr1.flatMap((x) => [[x * 2]]);
// [[2], [4], [6], [8]]