TIL/2020–01–02&03

Day 21 and Day 22: Treehouse Full Stack JavaScript Techdegree

Today I learned about the different JavaScript Array Iteration Methods. I learned about .filter(), .map(), .reduce, .forEach() and more. Prior to this lesson, I was only using the for loop to iterate over arrays and even objects. Learning these new methods are definitely useful, especially when using it to return or retrieve certain data. For example, using .filter() or .map() to return a new array of data without changing or touching the original array. I’m sure i’ll use these a lot in the future!

These are my notes:

Arrays

  • Best way to group similar data together in a sequence such as a list of customers, photos, dates, etc
  • Sequence collection of data
  • Often referred to as list-like objects
  • You can store strings, numbers, objects, arrays, and booleans

Iteration: Looking through an array

— — -

for vs .forEach()

For loop

.forEach()

arrayName.forEach(singleItemName => commandtoExecute )

Forloop involves more code than the .forEach() method

.forEach():

Good

  • Easier to read and understand
  • Bugs easier to avoid
  • Infinite loops impossible
  • Avoids incrementing mistakes
  • Wrong condition
  • Every array element will be visited when using forEach

Bad

  • Can’t let you break out of the loop early unlike for loop

Using the .charAt(positionOfTheLetter)

Using the index parameter of .forEach()

— — — — — — — -

filter(): returns a new array

Remove array items with filter()

Remainder operator

— —

.map() — transform each item in an array into something else

  • Returns a new array leaving the original array unchanged
  • Returns a new array with the same number of array elements

Basically adjusting/changing the current array’s values

Using .toFixed(2) is basically providing a fixed format for the numbers that there should be two digits after the decimal point. If there is none, then a 0 will be added to the missing value.

We can do this so that we can assign the function everytime we need so

.substring(index, index) — returns the values in between the two indexes provided including the start and except the 2nd index

— — — —

reduce() — return a single value from an array

  • Use the elements of an array to compute and return any value you want
  • Let’s you turn all the items in an array into one value

Accumulator — running total of the value of the reduce method returns

  • Like a grocery basket, the container of the groceries

Current — current array item -

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

let sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {

return accumulator + currentValue

}, 0)

// sum is 6

The 0 after currentValue is the default value set, if the default value isn’t set, it takes the first item in the array as the default value and the currentValue will be the second item in the array

The accumulator is like the basket and currentValue is each value inside the array. At the end of the array, the accumulator is the one that is returned

— — —

Chaining Array Methods -

Because the map method returns an array, you can call another array method directly after it. The same is true for the filter method. This is commonly called chaining methods, because each call is like a link in a chain.

As long as a method returns an array, you can call another array method at the end

  • Method chaining because each method resembles a link in a chain

Challenge

— — -

Working with objects in arrays

Reduce

The accumulator parameter is the object we want to build on — so the default can be any data-type, string, number, object {} and arrays []

Always have to return the accumulator to add it up

— —

Combining filter() and map()

Or use an object literal

Combining filter() and reduce()

— — —

Nested Data and Additional Exploration

When you have arrays in an array and you want to get all the values of each array and place them into one big array — this is called flattening, putting all elements into one level

Or

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

— — -

Or

Inner call of map returns an array of strings

Outer call of map returns an array of arrays of objects

Now after the inner map it is one array containing many arrays

Using reduce flattens it

— — -

Or

Challenge

— —

.forEach code challenges workshop