React Intro

Using Node in the Command Line

Summary

To use Node as a REPL, simply type node in the Terminal.

Press the Tab key 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 the node command. For instance, node name-of-script.js.

console.log() happens to use a method called process.stdout.write() under the hood. stdout is short for standard output. Standard input is for data streaming into a program while standard output is for data streaming out of a program.

We can use the require statement 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 = 1
x = 2 + 1

In functional code, we want to always use const like this:

const x = 1
const 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 takes yourName as a parameter has access to the salutation from the outer welcome function:

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

Composition is 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 a canEat() 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 a cat object the ability to eat:

> const cat = canEat("cat");

We can use a function factory to 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.

Categories:

React Javascript

Tags:

React Javascript Beginners Codenewbie

React Intro

Categories:

Tags:

Related Posts