After an two exhaustive weeks of learning software engineering at Flatiron School, it took me awhile to understand arrays and the appendixes. Here are my takeaways:

Arrays

Array Methods:

Array.push();
Array.pop();
Array.shift();
Array.unshift();
Array.splice();
Array.slice();
Array.forEach();
Array.map();
Array.filter();
Array.reduce();

For…of loop

Array Iteration Methods

.forEach()

An iterative method for arrays, always returns undefined and is not chain-able.

It expects a synchronous function — it does not wait for promises when fetching from an API.

Non-chainable means that .forEach() does not produce a new array that can be used by other methods or processes.

.forEach() is great for manipulating the DOM, updating a external value, or logging to the console.

// Example of DOM Manipulation with array.prototype.forEach();
const books = "books";

const arrayOfBooks = ["The Shining", "Eragon", "The Abolition of Man"];
function displayList(name, array) {
    const newUL = document.createElement("ul");
    document.querySelector("div#dates").append(newUL);
    const nameH2 = document.createElement("h2");
    document.querySelector("h2").textContent = books;
    document.querySelector("ul").append(newH2);
    arrayOfBooks.forEach((array, i) => {
        const newLi = document.createElement("li");
        document.querySelector("ul").append(newLi);
        newLi.textContent = array;
    });
}

displayList(books, arrayOfBooks);

.map()

The map() method of Array instances creates a new array populated with the results of calling a provided function on every element in the calling array. [4]

array.prototype.map((x) => {});

const array1 = [1, 4, 9, 16];

const map1 = array1.map((x) => x * 2);

console.log(map);

.filter()

Uses a condition to return a list of elements that meet that condition using a shallow copy.

A shallow copy contrasts with a deep copy in that a shallow copy can destructively alter the original array whereas a deep copy creates a new array.

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6); 

console.log(result); // ['exuberant', 'destruction', 'present']

console.log(words) // ['spray', 'elite', 'exuberant', 'destruction', 'present']

.reduce()

This method creates a summary or aggregation of values.

.indexOf() and find():

Both methods use a condition to find a first element in an array that meets that condition. On the one hand, .indexOf() is for simple array search tasks while .find() gives capability for complex searching tasks by taking in a callback function.

array.prototype.indexOf()

// Syntax for IndexOf() array iteration method. 

array.prototype.indexOf("Thing to be found", Index to start from);

// Will return -1 if thing cannot be found in array. Otherwise it will return the index number of the thing you are looking for.

// Example:

const numbers = [5, 20, 25, 75, 100];
numbers.indexOf(20); // Return: 1
numbers.indexOf(7); // Return: -1
numbers.indexOf(100, 2); // Return: 4
numbers.indexOf(75, 3); // Return: 3
numbers.indexOf(75, 4); // Return: -1

array.prototype.find();

// Syntax

array.prototype.find(callbackFn);

// i.e. 

const array1 = [5, 12, 8, 130, 44];

const found = array1.find((element) => element > 10);

console.log(found);
// Expected output: 12;

Objects

Object Methods

Object.assign(target, …sources): copies all properties from one or more source objects to a target object and returns the modified target object. [5]

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target); // Object { a: 1, b: 4, c: 5}
console.log(returnedTarget === target); // true

Object.keys(obj) — returns the keys of an object
Object.values(obj) — returns the values of an object
Object.is(value1, value2) — returns boolean (true or false) for two values being equal.

Object Iteration function

for (let sampleKey in sampleObj) { };

This is different from for… of of arrays.

for (let element of array) { };

References

[1] “Array.prototype.filter(),” Mozilla Developer Network, [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter. [Accessed: 6, May, 2024].

[2] Mozilla Developer Network (MDN), “Array.prototype.find() — JavaScript | MDN,” Mozilla. [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find. [Accessed: 6, May, 2024].

[3] Mozilla Developer Network (MDN), “Array.prototype.forEach() — JavaScript | MDN,” Mozilla. [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach. [Accessed: 06-May-2024].

[5] Mozilla Developer Network (MDN), “Object.assign() — JavaScript | MDN,” Mozilla. [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign. [Accessed: 06-May-2024].

[4] Mozilla Developer Network (MDN), “Array.prototype.map() — JavaScript | MDN,” Mozilla. [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map. [Accessed: 06-May-2024].

JS Arrays and Objects