JavaScript Array.md

JavaScript-Array-JS

Source: Array JavaScript - Udacity Front End Web Development Nanodegree

Table Of Contents:

• a. What is an Array?
• b. Create an Array
• c. Store different types of data
• d. Array Properties and Methods
• e. Property: .length
• f. push() method
• g. pop() method
• h. slice/splice() method
• i. Array Loops
• j. For Loop
• k. Map
• l. 2D Grid(nested array)

a. What is an Array?

• An array [] = ordered collection of elements, enclosed by square brackets [].
• It is one of the most useful data structures in JavaScript, as it stores multiple values into a single, organized data structure.

b. Create an Array

• Define a new array by listing values separated with commas , between square brackets [].
• Example: variable "myArray", assigned to an empty array:

const myArray = [];

• Each element in an array is referenced by a numeric key (index).
• It starts from zero and increments by one for each additional element in the array.
• Example:

const fruits = ['apple', 'banana', 'orange', 'grape', 'lychee'];
console.log(fruits);

// ['apple', 'banana', 'orange', 'grape', lychee]

• To access the first (left-most) element in "fruits", access that element by its index:

fruits[0];

//= 'apple'

• To access the last (right-most) element in "fruits",use its index:

fruits[4];

//= 'lychee'

c. Store different types of data

• Arrays[] can store different types of data, not only strings!

// Create a donuts array with three strings

• A string

var donuts = ["glazed", "powdered", "jelly"];

// Create a mixedData array with mixed data types

• A number
• A boolean

var mixedData = ["abcd", 1, true, undefined, null, "all the things"];

// Create a arraysInArrays array with three arrays:

• Another array nested array: store an array in an array to create a nested array

var arraysInArrays = [[1, 2, 3], ["Julia", "James"], [true, false, true, false]];

• Nested arrays can be hard to read. So, write them on one line, using a newline after each comma:

var arraysInArrays = [
  [1, 2, 3], 
  ["Julia", "James"], 
  [true, false, true, false]
];

d. Array Properties and Methods

built-in methods

e. Array Property: .length (=to find length of an array)

• Find the length of an array by using its length property. .lenght
• To access the length property, type the name of the array, followed by a period .
• The length property will then return the number of elements in the array.

var donuts = ["glazed", "powdered", "sprinkled"];
console.log(donuts.length);

TIP: Strings have a length property too! Use it to get the length of any string. Example

"supercalifragilisticexpialidocious".length 

returns 34.

f. push() method (=to "add" elements to the end of an array.)

• The two most common methods for modifying an array are
  1. push() to add an element to the end of an Array[] = arr.push(element1[, ...[, elementN]])
• Example: Represent the spread of donuts using an array

var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled"];

// Push donuts onto the end of the array using the push() method= pushes "powdered" onto the end of the donuts array

donuts.push("powdered"); 

// the push() method returns 7 because the donuts array now has 7 elements Returns: 7

donuts array: ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled", "powdered"]

var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled"];
donuts.push("powdered"); 

NOTE:

1. with the push() method you need to pass the value of the element you want to add to the end of the array.
2. The push() method returns the length of the array after an element has been added.

g. pop() method (=to "remove" elements from the end of an array)

2. pop() to remove an element from the end of an Array[] = arr.pop()

• Example:

var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled", "powdered"];

donuts.pop(); // pops "powdered" off the end of the `donuts` array
donuts.pop(); // pops "sprinkled" off the end of the `donuts` array
donuts.pop(); // pops "cinnamon sugar" off the end of the `donuts` array

Returns: "cinnamon sugar"

donuts array: ["glazed", "chocolate frosted", "Boston creme", "glazed cruller"]

NOTE:

• With the pop() method there is NO need to pass a value
• pop() will always remove the last element from the end of the array.
• pop() returns the element that has been removed in case you need to use it.

var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled", "powdered"];
donuts.pop(); 

// the pop() method returns "powdered" because "powdered" was the last element on the end of donuts array

• Returns: "powdered"

h. Array: splice() method: (to add and remove elements from anywhere within an array).

• The splice() method = to add and remove elements from anywhere within an array.
• It specify the index location to add new elements
• It specify the number of elements to delete (if any).
• The first argument represents the starting index from where to change the array
• The second argument represents the elements to remove
• The remaining arguments represent the elements to add.
• Using the splice() method adds and removes elements from any location in an array.
• splice() is an incredibly powerful method that allows you to manipulate your arrays in a variety of ways.
• Any combination of adding or removing elements from an array can all be done in one simple line of code.

var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller"];
donuts.splice(1, 1, "chocolate cruller", "creme de leche"); 

// removes "chocolate frosted" at index 1 and adds "chocolate cruller" and "creme de leche" starting at index 1

• Returns: ["chocolate frosted"]

donuts array: ["glazed", "chocolate cruller", "creme de leche", "Boston creme", "glazed cruller"]

i. Array Loops

Use a loop= to efficiently access and manipulate each element in the array without writing repetitive code for each element.

var donuts = ["jelly donut", "chocolate donut", "glazed donut"];

// Manually= make all the same donut types, but only sell them as donut holes instead

donuts[0] += " hole";
donuts[1] += " hole";
donuts[2] += " hole";
donuts array: ["jelly donut hole", "chocolate donut hole", "glazed donut hole"]

• //or Loop through an array
• //use a variable to represent the index in the array, and loop over that index to perform whatever manipulations desired.

var donuts = ["jelly donut", "chocolate donut", "glazed donut"];

• // the variable i is used to step through each element in the array
• // As i is incremented, step over each element in the array starting from 0 until donuts.length - 1 (donuts.length is out of bounds).

for (var i = 0; i < donuts.length; i++) {
    donuts[i] += " hole";
    donuts[i] = donuts[i].toUpperCase();
}
donuts array: ["JELLY DONUT HOLE", "CHOCOLATE DONUT HOLE", "GLAZED DONUT HOLE"]

j. The forEach() loop

• Arrays have special methods to help iterate over and perform operations on collections of data.
• The forEach() method gives an alternative way to iterate over an array, and manipulate each element in the array with an inline function expression.

var donuts = ["jelly donut", "chocolate donut", "glazed donut"];

• //donut corresponds to the element in the array itself.

donuts.forEach(function(donut) {
  donut += " hole";
  donut = donut.toUpperCase();
  console.log(donut);
});

Prints:

• JELLY DONUT HOLE
• CHOCOLATE DONUT HOLE
• GLAZED DONUT HOLE NOTE: the forEach() method iterates over the array without an explicitly defined index.
• This is different from a for or while loop, where an index is used to access each element in the array:

for (var i = 0; i < donuts.length; i++) {
  donuts[i] += " hole";
  donuts[i] = donuts[i].toUpperCase();
  console.log(donuts[i]);
}

Parameters

• The function that you pass to the forEach() method can take up to three parameters (element, index, and array).
• The forEach() method call this function once for each element in the array (forEach.)
• Each time, it call the function with different arguments.
• The element parameter get = the value of the array element.
• The index parameter get = the index of the element (starting with zero).
• The array parameter get = reference to the whole array (to modify the elements). Example:

words = ["cat", "in", "hat"];
words.forEach(function(word, num, all) {
  console.log("Word " + num + " in " + all.toString() + " is " + word);
});

Prints:

• Word 0 in cat,in,hat is cat
• Word 1 in cat,in,hat is in
• Word 2 in cat,in,hat is hat _ NOTE_
• Using forEach() will not be useful if you want to permanently modify the original array.
• forEach() always returns undefined.

k. The map() method

• Use the map() method, to create a new array from an existing array.
• To take an array, perform an operation on each element of the array, and return a new array.
• The map() method accepts one argument (=a function expression, to manipulate each element in the array).
• No longer iterate over the indices, because the map() does all that already.

var donuts = ["jelly donut", "chocolate donut", "glazed donut"];

var improvedDonuts = donuts.map(function(donut) {
  donut += " hole";
  donut = donut.toUpperCase();
  return donut;
});
donuts array: ["jelly donut", "chocolate donut", "glazed donut"]
improvedDonuts array: ["JELLY DONUT HOLE", "CHOCOLATE DONUT HOLE", "GLAZED DONUT HOLE"]

l. 2D Grid(nested array)= Multi-dimensional arrays

• Arrays can be nested= an array can contain another array as an element.
• Using this characteristic of JavaScript arrays, multi-dimensional arrays can be created.

The following code creates a two-dimensional array.

var a = new Array(4);
for (i = 0; i < 4; i++) {
  a[i] = new Array(4);
  for (j = 0; j < 4; j++) {
    a[i][j] = '[' + i + ', ' + j + ']';
  }
}

This example creates an array with the following rows:

Row 0: [0, 0] [0, 1] [0, 2] [0, 3]
Row 1: [1, 0] [1, 1] [1, 2] [1, 3]
Row 2: [2, 0] [2, 1] [2, 2] [2, 3]
Row 3: [3, 0] [3, 1] [3, 2] [3, 3]

• Example:
• Use an array of arrays that has the name of each donut associated with its position in the box.
• //Create a two dimensional grid with rows and columns.

var donutBox = [
  ["glazed", "chocolate glazed", "cinnamon"],
  ["powdered", "sprinkled", "glazed cruller"],
  ["chocolate cruller", "Boston creme", "creme de leche"]
];

• //Loop over the donut box and display each donut (along with position in the box!)
• //step 1: Write a for loop to loop over each row of the box of donuts:

var donutBox = [
  ["glazed", "chocolate glazed", "cinnamon"],
  ["powdered", "sprinkled", "glazed cruller"],
  ["chocolate cruller", "Boston creme", "creme de leche"]
];

• // here, donutBox.length refers to the number of rows of donuts

for (var row = 0; row < donutBox.length; row++) {
  console.log(donutBox[row]);
}

_ Prints:

• ["glazed", "chocolate glazed", "cinnamon"]

• ["powdered", "sprinkled", "glazed cruller"]

• ["chocolate cruller", "Boston creme", "creme de leche"]

• //step 2: Each row is an array of donuts. Set up an inner-loop to loop over each cell in the arrays.

for (var row = 0; row < donutBox.length; row++) {

• // here, donutBox[row].length refers to the length of the donut array currently being looped over

  for (var column = 0; column < donutBox[row].length; column++) {
    console.log(donutBox[row][column]);
  }
}

• Prints:
• "glazed"
• "chocolate glazed"
• "cinnamon"
• "powdered"
• "sprinkled"
• "glazed cruller"
• "chocolate cruller"
• "Boston creme"
• "creme de leche"

Resources

• Array
• Push()
• Pop()
• Splice()
• forEach()
• map()
• 2D Grid/nested array/Multi-dimensional arrays

Take Away

• An array[] = ordered collection of elements, enclosed by [].
• It stores multiple values into a single, organized data structure.
• push()method: add elements to the end of an array
• pop()method: remove elements from the end of an array
• splice()method: add and remove elements from anywhere within an array.
• forEach() method call the function once for each element in the array (forEach.), with different arguments:
  • element parameter get = the value of the array element.
  • index parameter get = the index of the element (starting with zero).
  • array parameter get = reference to the whole array (to modify the elements).
• map() method: create a new array from an existing array.
• Arrays[] can be nested= an array can contain another array as an element.