React Intro

Using Node in the Command Line

Summary

• To use Node as a REPL, simply typenodein the Terminal.
• Press theTabkey to get a list of Node commands.
• To exit the REPL, hold down the Ctrl and c keys twice.
• JavaScript scripts can be run in terminal using thenodecommand. For instance,node name-of-script.js.
• console.log()happens to use a method calledprocess.stdout.write()under the hood.stdoutis short forstandard output. Standard input is for data streaming into a program while standard output is for data streaming out of a program.
• We can use therequirestatement to add a script's functionality to the Node REPL. For instance:require('./code-to-be-required.js'). A relative path must be included.

Immutability

Terminology

• Immutability:An immutable object is an object whose state cannot be modified after it is created.

Examples

We can do this if we are writing object-oriented code:

let x = 1x = 2 + 1

In functional code, we want to always useconstlike this:

const x = 1const newX = 2 + x

Imperative Versus Declarative Programming

Terminology

• Imperative programming:Explicitly stating every step the computer needs to take to return a result
• Declarative programming:Telling the computer the result we want and allowing it to decide how to return that result

Pure Functions

Terminology

• Pure function:A function that meets the following criteria:
  • Always returns an output
  • Has no side effects
  • Does not rely on external variables or state
  • Always returns the same answer for a given input

Why pure functions?

• Easier to test * Fewer bugs * No unintended side effects

First Class Citizens

Terminology

• Functions are first class citizens.This means that functions have the same functionality as objects. For example, they can be assigned to variables, passed in as arguments, or returned from a function.
• Callback:A function passed into another function as an argument.

Closures

Terminology

• Closure:An inner function that has access to variables from an outer function.

Here's an example. The anonymous function that takesyourNameas a parameter has access to thesalutationfrom the outerwelcomefunction:

function welcome(salutation) {  return function(yourName) {    return `${salutation}! Nice to meet you, ${yourName}!`  }}

Currying

Terminology

• Currying:Rewriting a function that takes multiple arguments into a series of functions that each take one argument.

Here's an uncurried function that takes three arguments:

function aThingIMaybeLike(howMuchILikeIt, thing, reason) {  return `I ${howMuchILikeIt} ${thing} because ${reason}.`;}

Here's how the function looks after it's been curried:

function aThingIMaybeLike(howMuchILikeIt) {  return function(thing) {    return function(reason) {      return `I ${howMuchILikeIt} ${thing} because ${reason}.`;    }  }}

Recursion

Terminology

• Recursion:A technique in programming in which a function calls itself one or more times before returning.
• Base case:The final condition of a successfully called recursive function.
• Termination Case:A conditional that's called if something goes wrong which prevents an infinite loop.
• Tail Call Optimization:The process by which a compiler can make a call to a function and use no additional stack space.

Here's an example of a recursive function:

const incrementCounter = (counter) => {  if (counter >= 3) {    return counter;  } else {    console.log(counter);    return incrementCounter(counter + 1);  }}incrementCounter(0);

The Problems of Classical Inheritance

Terminology

• Inheritance:When a child object gains the functionality of a parent object.
• Tightly Coupled:Code that is reliant on another piece of code to retain its functionality.
• Loosely Coupled:Code that is not reliant on external code for functionality.

Spread Operator

Terminology

• Spread Operator:A feature of ES6 written as...that is used to do the following:
  • Make shallow copies of objects
  • Merge multiple objects together
  • Combine arrays
  • Pass multiple arguments into a function

Examples

Here is the spread operator is making a shallow copy:

const myCat = {  name: "Murphy",  age: 1}const anotherCat = {...myCat};

Here it is merging three objects together:

const flagColor1 = {  color1: "green"}const flagColor2 = {  color2: "gold"}const flagColor3 = {  color3: "black"}const jamaicanFlag = {...flagColor1, ...flagColor2, ...flagColor3}

Here it is combining arrays:

const array = [1,2];const array2 = [3,4];const array3 = [...array, ...array2];array3[1, 2, 3, 4]

And here it is passing multiple arguments into a function:

const array = [1,2,3];spreadArgs(...array);

Composition

Terminology

• Compositionis the process of "composing" the functionality of an object. Instead of an object inheriting from other objects, we add smaller pieces of functionality to an object.

For instance, here's acanEat()function:

const canEat = function(creature) {  const obj = {    eat: function(food) {      return `The ${creature} eats the ${food}.`    }  }  return obj;}

Here's how we'd use composition to give acatobject the ability to eat:

> const cat = canEat("cat");

We can use afunction factoryto add multiple pieces of functionality to an object. For instance, if we wanted to create a creature that can both eat and sleep, we'd do something like this:

const canEat = (creature) => ({  eat: (food) => {    return `The ${creature.name} eats the ${food}.`  }});const canSleep = (creature) => ({  sleep: () => {    return `The ${creature.name} sleeps.`  }});const sleepingEatingCreature = (name) => {  let creature = {    name  }  return { ...creature, ...canEat(creature), ...canSleep(creature) };};

State

Terminology

• State: Any data we want the computer to remember.
• Store: An object provided by Redux with a few methods on it to hold and manipulate an application's state.
• Observer Pattern: A software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.
• Pubsub Pattern:A pattern similar to an observer pattern, except that there is a mediator between publishers and subscribers (who are unaware about the existence of each other).

Storing State in Closures

Terminology

• Lexical Scope:In a nested group of functions, the inner functions have access to the variables and other resources of their parent scope.