DGL 113: Arrays

## Arrays
---
### Objectives
* explain array concepts
* declare and populate arrays
* manage array contents
* iterate through an array
* use common array methods
* work with m-dimensional arrays
* incorporate arrays in a web application
---
### Arrays
* An array is a special type of object. It stores a list
  of values under a single name.
* Create an empty array:
```javascript
let myArray = []; //array literal notation
let myArray = new Array(); //not recommended
```
* Create an array with initial values:
```javascript
let myArray = ['item1','item2','item3']; // or
let myArray = [10,20,30];
```
* A JS array can contain different types of data,
  even another array:
```javascript
const mixedArray = [null,1,[],'two', true];
```
---
### Using Array Index
* How to access an item in an array?
  Using its index value. The first item's index is 0;
  example:
```javascript
alert(myArray[2]);
```
* Adding/replacing a value in an array
```javascript
myArray[0] = 10;
```
* Technically you can add a value to any position in
  an array, e.g., `myArray[10] = 100;`
* The index positions that don't have a value
  assigned will have the value "undefined".
---
### Using Array Index
* You may sometimes use a string as index. When a
  string is used for array index, it's called an associative
  array.
* JavaScript doesn't support associative arrays.
* When a string is used for an array index, it will
  change the nature of the array (to an object).
  Afterward, some array methods may not work
  anymore.
* ***To keep it simple, we will only use numbers for
  array indices.***
---
### Array Property: length
* Array length property: technically, it returns the
  value of last index + 1.
* If the array has unfilled positions, the length value
  doesn't represent the number of initialized values
  in the array, for example,
```javascript
let myArray = [10,20,30];
myArray[10] = 100;
```
* `myArray.length` returns 11. There are 7 empty
  "undefined" elements from position 3 to 9.
---
### Array Operations
* Delete a value from an array:
```javascript
delete myArray[2];
```
* The value at index 2 will be removed and the
  space becomes empty.
* Assign array element values to variables - other
  than the index method, you can also do these:
```javascript
//assign 1st 3 values to a, b, c
let [a, b, c] = arr;
const [x, y, z] = [10,20,30];// assign
// 10, 20, 30 to x, y, z respectively
[x,y] = [y,x]; //swap x, y values
```
---
### Array Methods
* `concat`: merges elements in multiple arrays and
  returns the merged result; the calling array
  object content is not changed.
* `toString`: returns the string of all items in the
  array separated by comma ,.
* `indexOf`: returns the index of first matching item
  in the array. If no match, returns -1.
* `lastIndexOf`: returns the index of last matching
  item in the array.
---
### Array Methods
* `push`: adds a new value to the end of the array
* `pop`: removes the last item from an array
* `shift`: removes the first item in the array
* `unshift`: inserts a new item to the beginning of
  the array
* Ref.
  * https://javascript.info/array
  * https://www.w3schools.com/js/js_array_methods.asp
---
### Array Methods
```javascript
let arr = [10];  //create an array with value 10;
arr.push(20);    //arr has [10,20]
arr.push(30);    //arr has [10,20,30]
arr.pop();       //returns 30, arr has [10,20]
arr.shift();     //returns 10, arr has [20]
arr.unshift(40); //arr has [40,20]

colors.forEach(showColor);

```javascript
function square(x) {return x * x;}

const numbers=[1, 2, 3];

console.log(numbers.map(square));
```
---
### Array reduce Method
* The `reduce()` method iterates over each value in the
  Array. It cumulatively combines each value and
  then returns just a single accumulated result.
* It takes a callback argument that is used to combine
  each value of the array with the running total.
* The callback usually takes 2 arguments, the
  cumulative result and the array element value at
  each index.
---
### Array reduce Method
```
function sumFunc(result,nextValue) {
    return result + nextValue;
}

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

let sum = numbers.reduce(sumFunc);
```
* In the example, result is the accumulator starting with
  the value of the first array element, by default.
* By the end, sum will have the accumulated total of
  all values in the array, 15.
* In addition to the callback function, reduce() takes
  another argument for the initial value of the
  accumulator