Self-Taught Developer Journal, Day 34: TOP JS Foundations Part 4, Arrays and Loops
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-01-09 00:35:14

Today I learned...

## Arrays
An array is a global list-like object. It is a common practice to create arrays using the **const** variable declaration.

    const arrayExample = [1, 2, 3];

Reminder, you can still change the elements inside of the array when it's declared with **const**, but the array cannot be reassigned.

Another method to create an array is using the new keyword:

    const arrayExample = new Array(1, 2, 3);

This is equivalent to the array literal method (const array = []). The array literal method is preferred over the new keyword for simplicity, readability, and execution time.

### Accessing Elements

    // First element
    let firstElem = arrayExample[0] = 1;

    // Last element
    let lastElem = arrayExample[arrayExample.length - 1];
    
## Adding Elements in Arrays
Use the **push()** method:

    const arrayExample = [1, 2, 3];
    arrayExample.push(4);

Use **.length** or **indexes**, but beware of undefined holes:

    const arrayExample = [1, 2, 3];
    // Remember, length is calculated starting from 1 but arrays are indexed starting from 0
    arrayExample[arrayExample.length] = 4;

    // holes are made in the array with the elements not explicitly assigned are given the value undefined
    arrayExample[6] = 10; // [1, 2, 3, 4, undefined, undefined, 10]

## Associative Array
*Arrays with named indexes are called associative arrays (or hashes)*

JavaScript does NOT support array with named indexes and always use **numbered indexes**.

**"If you use named indexes, JavaScript WILL REDEFINE THE ARRAY TO AN OBJECT."** This will result in incorrect results.

    const pets = [];
    const["dog"] = "Duke";
    const["cat"] = "Agatha";
    pets.length; // returns 0
    pets[0]; // returns undefined

**In JavaScript, arrays (a special kind of object) use numbered indexes and objects use named indexes.**
* Use objects when you want the element names to be strings.
* Use arrays when you want the element names to be numbers.

## [] vs new Array()
Some different behavior:

    const array = [10]; // returns [10]

    const array = new Array(10); returns array with 10 undefined elements

## Recognizing Arrays
**typeof()** operator will return an array as the type object.

    const array = [1, 2, 3];
    typeof(array); // returns object

Instead use **isArray()** or **instanceof**:

    const array = [1, 2, 3];
    Array.isArray(array); // returns true

    array instanceof Array; // returns true

## Loops
The **map()** method performs an action to each item in a collection and creates a new collection from it.

    const dogs = ["Husky", "Dachshund", "Poodle"];
    
    const upperDogs = dogs.map(dog => dog.toUpper())

    console.log(upperDogs); 
    // return ["HUSKY", "DACHSCHUND", "POODLE"]

The **filter()** method creates a NEW array if the elements in the collection pass a test by the provided function.

    const dogs = ["Husky", "Dachshund", "Poodle"];
    
    const hDogs = dogs.filter(dog => dog.startsWith("H"))

    console.log(hDogs); 
    // return ["Husky"]

map() and filter() are often used with function expressions.

## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)
https://www.w3schools.com/js/js_array_methods.asp
https://www.w3schools.com/js/js_arrays.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code