Today is my sixth day learning with the Treehouse Full Stack JavaScript Techdegree. I learned about arrays — how to access the different elements in each array, how to use methods and properties of arrays and more.

These are my notes for today:

Arrays: A collection of values you can assign to a single variable

  • Data Structure
  • Way to store and organize data
  • Way of storing more than one value in a single place
  • Like a list of items — shopping list
  • Can store any combination of primitive values or data types (Strings, Numbers, Booleans)

Assigning an array:

const shoppingList = [ ‘ strings ‘ , 12 ] ; — The square brackets [ ] represents an array literal

[ ] empty array

And I can call/access each item in the array by their index value = pk or id:

Zero based or Zero indexed: first item in the array starts with 0

If you try to access an index in the array that does not exist, it will return undefined.

Getting a length of items in an array:

Arrayname.length

And it will return 8

Adding elements into an array:

.push = Pushing an item into the LAST item of an array

arrayname.push ( “ item you want to add ”,” Item you want to add ” )

.unshift = Adding an item to the BEGINNING of the array

arrayname.unshift( “ ”, “ “ );

Guitar and flute are now at the beginning of the array

Removing elements from an array:

.pop = Removing the LAST item of an array // Does not accept any arguments ( )

arrayname.pop();

And as you can see ‘trumpet’ is removed from the array because the .pop() removes the LAST item in the array

.pop() also returns the last element of the array — so we can actually assign to it a variable to retrieve the last time

.shift = removing the FIRST element of an array — Does not take any arguments

arrayname.shift()

.shift() removed piano since it is the FIRST item on the array

We can also assign it to a variable calling the first item of the array

Copy and combine arrays with the Spread Operator

The spread operator expands an array or places an array into another array

We want to create a single array

The spread operator is “…” you add …arrayname to the array you want to include inside another array

Here we added the middle array using …middle inside the burger array

Values from the middle array gets unpacked and spread out into where you placed the spread operator

Creating a new array variable while adding different arrays in it using … spread operator

Returns all 6 items into one array — the spread operator each element inside each array and placed it in they new array

The … spread method creates a copy of the array but if we add an item in the original array (VipList1) it won’t be added to vipList — we are basically preserving the values of the original array.

In this case I added Name 4 to vipList by using .push so it should be at the end

First array is vipList1 so “Name 4” is added

Second array is vipList (the array that combines vipList1 and vipList2) but as you can see, it does not add Name 4 to the array because Name 4 is only added to vipList1.

And the same goes for removing an element inside the array. For example, using .shift() method to remove the first element in vipList2 which is “Vip4”.

And as you can see in the results, “Vip 4” is removed on the vipList2 but is kept on vipList.

Another reason for this is because shift() or push() is executed before the vipList array.

If I put it before the array, it will reflect the changes made — since it was made before the array

Now it is removed from both arrays

We can also use the … spread operator to pass an array as an argument

For example

For Math.max it returns the largest number given to it

This will only return NaN = Not a Number because it is an array

By using the spread operator we are basically unpacking the values inside an array which is then a number

The max is 7

Now let’s try min or the minimum

And it returns 1

— — -

Using a for loop to iterate over an array

Remember the condition in the for loop is “how many times do you want the loop to execute”. We used .length because if ever students are added (either through .push or .unshift) or removed (through .pop or .shift) the for loop will adjust to its length.

Since each element inside the array starts with 0 = it matches the counter which also starts with 0 so we are basically calling it each time. Students[ i ] is replaced to 0, 1 , 2 , 3 and so on.. We are basically calling it each time our loop runs. And the value of i is replaced each time which also calls the element’s pk inside the array.

Next Challenge: playlist array into a song list

Or with a function:

— -

Another example

Other array methods

.join(): Takes an array and returns a string containing all the elements in an array separated by the supplied character. The supplied character is what you place inside the (“ “ ) like a space (“ “) or comma (“,”) or even a comma and a space (“, “)

Now the value returned is not a array anymore but a string each containing a , and space because of the join method.

First line is an array and second is the array with the .join(“, “)

The comma and space appears after each element except the last one

.includes(): Determines whether an array includes a certain value among its entries and returns either true or false. If the value you pass in the .includes() method is in the array then it returns true, if not then false.

And it will return true

But if I change the first character to lowercase into “monday” — it returns false. SO this means that it has to be exactly the same as the one on the array. What we put on .includes has to be exactly the same.

.indexOf(): return the index/position of an element inside an array

And it returns 0

And it returns 3

.indexOf() returns -1 only when it cannot find the element inside the array

Other methods for arrays: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

  • sort() — Sort the elements of an array in place and return the sorted array.
  • isArray() — Determine whether the passed value is an Array — returns true or false
  • concat() — Merge two or more arrays.
  • splice() — Change the contents of an array by removing or replacing existing elements and/or adding new elements in place. So basically in the example below, there is no “Wednesday” element. By making use of .splice(index, numberthatyouwillremoveafteraddingthevalue, “value to add”). So in this case I said on the second index I will add “Wednesday” with 0 that means without removing the following elements. If I do .splice(2, 1, “Wednesday”) then I will remove thursday
  • slice() — Return a portion of an array into a new array.

Examples of “falsy” values are null, empty strings, 0, false, NaN, undefined — considered false when encountered in a Boolean context https://developer.mozilla.org/en-US/docs/Glossary/Falsy

Challenge

.toLowerCase()

— — -

Multidimensional Arrays: Array in an array (Two-dimensional array)

A list containing other lists — nested arrays

const randomArray = [ “ Hi ”, 23, true, [ “ Treehouse ”, “ cool ” ] ];

const grades = [ [ 1, 2, 3 , 4 ], [ 5, 6, 7 , 8 ], [ 2, 4, 5, 7 ] ]

Each array is an index so the first array is 0, second is 1, and so on..

To access each element in a certain array you just have to add another square bracket and put the index of what you want to retrieve

Challenge:

Create a multidimensional array

In the for loop, [ i ] represents the current count the for loop is currently in. Our parameter is then called each time the counter changes. Basically what is happening is arr[ 0 ] then arr [ 2 ]

And so on. Since our parameter(the array playlist) is now a multidimensional array. [ i ] calls on all of the arrays in playlist since each array is now represented as an index. For this, we have to add another square bracket to access the specific element in the array. Thus the sequence being arr[ 0 ] [ 0 ] then arr [ 1 ] [ 0 ] to get the song names. Then the process just repeats itself with the artist and minutes.

Remember: when accessing two-dimensional arrays we need two square brackets. One for the outer array and the inner element you want to access.

Challenge: Multidimensional Array

Now as an additional challenge, let’s keep track of what we got right and wrong

Remember: placing the variable outside or in the global scope, it adds up. But if you place it inside the for loop, it adds only within the loop. Since we are using two arrays for the for loop, placing the variable outside only adds what you returned from correct AND wrong. But if we place it inside the for loop, it only adds up in its own function. For example, it only adds up when we call that specific array — it restarts once we call a different array.

Another practice for myself: