djD-REK

import "./styles.css";

const cards = [[["♠️"], "♣"], ["♥", "♦️"]];

console.log(cards.flat()); // flat() implies a maximum depth of 1
// result: [Array[1], "♣", "♥", "♦️"]

console.log(cards.flat(2)); // Here we use a maximum depth of 2
// result: ["♠️", "♣", "♥", "♦️"]

djD-REK

import "./styles.css";

const cards = [["♠️", "♣️"], ["♥️", "♦️", ["🃏", ["🎴"], "🀄️", ["👁‍"]]]];

console.log(cards.flat(Infinity)); // Infinity is a variable in global scope
// result: ["♠️", "♣️", "♥️", "♦️", "🃏", "🎴", "🀄️", "👁‍"]

djD-REK

const suits = ["♠️", "♣️", "♥️", "♦️", "🃏"];
const ranks = ["A", "K", "Q", "J", "🃏"];

console.log(suits.map((suit, index) => [ranks[index], suit]));
// result: [["A", "♠️"], ["K", "♣️"], ["Q", "♥️"], ["J", "♦️"], ["🃏", "🃏"]]

console.log(suits.flatMap((suit, index) => [ranks[index], suit]));
// result: ["A", "♠️", "K", "♣️", "Q", "♥️", "J", "♦️", "🃏", "🃏"]

// If for some reason you needed to use a depth > 1 for flat, you can't use flatMap

djD-REK

const myObject = {
  dog: "🐕",
  cat: "🐈",
  koala: "🐨",
  count: 3
};

console.log(JSON.stringify(myObject));
// result: {"dog":"🐕","cat":"🐈","koala":"🐨","count":3}

djD-REK

const user = {
  id: 101010,
  name: "Derek",
  email: "[email protected]"
};
function replacer(key, value) {
  if (typeof value === "number") {
    return undefined;
  }
  if (key === "email") {

djD-REK

const user = {
  id: 101010,
  name: "Derek",
  email: "[email protected]"
};

function replacer(key, value) {
  if (typeof value === "number") {
    return undefined;
  }

djD-REK

// This is called the object constructor function for the "object type" or class Person
function Person(firstName, lastName, age, eyeColor) {
  // Person will be the parent class or superclass for a child class called Employee (defined later)
  this.firstName = firstName; 
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeLastName = function (name) {
    // The changeLastName() function assigns the value of name to the person's lastName property.
    // Since this function is defined in the construct, all Person objects will inherit it:

djD-REK

// Imperative Programming Example: Using Iterator
var sum = 0;
var array = [1, 2, 3];
for (var i in array) {
  // Iterate (loop) over each item in the list
  sum += array[i]; // Mutate (change) the sum variable each iteration
}
console.log(sum); // Result: 6

// Declarative Programming Example: Using Arrow Function

djD-REK

// Before React Hooks: Imperative Programming Paradigm
// This is an ES6 class extending from React.Component, with an internal state:
import React, { Component } from "react";
export default class Button extends Component {
  constructor() {
    super(); // Prototypal inheritance is explicit here
    this.state = { buttonText: "Click me, please" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {

djD-REK

// Tarot Card Deck example by Dr. Derek Austin 🥳 (Github master)
// Credit Paul Henckel for the original code
// Source: https://codesandbox.io/s/j0y0vpz59?from-embed

import { render } from 'react-dom'
import React, { useState } from 'react'
import { useSprings, animated, interpolate } from 'react-spring'
import { useGesture } from 'react-use-gesture'
import './styles.css'