Self-Taught Developer Journal, Day 34: TOP JS Foundations Part 4, Arrays and Loops

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.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