Notes from this book

Spread operator

// getting the last item without mutating the original array
const peaks = ["Tallac", "Ralston", "Rose"];
const [last] = [...peaks].reverse();
console.log(last); // Rose
console.log(peaks.join(", ")); // Tallac, Ralston, Rose

// getting the remaining items
const fruits = ["apples", "oranges", "pears", "Avocados"];
const [first, ...others] = fruits;
console.log(others.join(", ")); // oranges, pears, Avocados

List Matching using commas

List matching occurs when commas take the place of elements that should be skipped.

const [, , thirdAnimal] = ["Horse", "Mouse", "Cat"];
console.log(thirdAnimal); // Cat

Functional Programming

A function is considered a first-class member when it can be declared as a variable and sent to functions as an argument.

Object.assign()

This method copies all properties from one or more source objects into a target object and then returns the updated target object.

Object.assign(target, source, source2, /*..., */ sourceN);

Here’s a simple example;

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

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

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

This method is especially useful when you don’t want to mutate the original object. For example:

let color_lawn = {
  title: "lawn",
  color: "#00FF00",
  rating: 0,
};

const rateColor = function (color, rating) {
  return Object.assign({}, color, { rating: rating });
};
console.log(rateColor(color_lawn, 5).rating); // 5
console.log(color_lawn.rating); // 0

This works because Object.assign() creates a new copy of the object instead of modifying the original one.

Characteristics of Pure functions

• They take atleast one argument.
• They always return a value or another function.
• They do not cause side effects.
• They do not set global variables.
• They do not change anything about application state

Examples:-

// impure function -> it changes the DOM
function Header(text) {
  let h1 = document.createElement("h1");
  h1.innerText = text;
  document.body.appendChild(h1);
}
Header("Header() caused side effects");

// pure function
const Header = (props) => <h1>{props.title}</h1>;

In React, UI is expressed using pure functions. Pure functions are a core concept of function Programming

Data transformations

A Predicate is simply a function that always returns a boolean value: true or false.

The Array.filter method is a good example of a function that uses a predicate. For each item in the array, the predicate is called, and its return value determines whether that item will be included in the new array.

Array.reduce()

This function takes in two arguments, a callback function and an initial number. The initial value is the starting point for the reduction.

Here’s an example;

const ages = [43, 2, 5, 78, 34, 34];
const maxAge = ages.reduce((max, value) => (value > max ? value : max), 0);

In this example, the callback is executed for every element in the array. On the first iteration the item is 43 and max starts at 0. Since 43 is greater, it becomes the new max. On the next iteration, 43 is compared with 2, and so on.

Array.reduce() can do more than just math:

Getting count

const colors = ["red", "blue", "red", "green", "blue", "blue"];

const colorCount = colors.reduce((count, color) => {
  count[color] = (count[color] || 0) + 1;
  return count;
}, {});

console.log(colorCount);
// Expected output: { red: 2, blue: 3, green: 1 }

Get unique values

const colors = ["red", "red", "green", "blue", "green"];
const uniqueColors = colors.reduce(
  (unique, color) =>
    //   if item does not exist add it otherwise don't
    unique.indexOf(color) !== -1 ? unique : [...unique, color],
  []
);
console.log(uniqueColors);
// ["red", "green", "blue"]