DoctorDerek

// Declared array example using typeof:
const declaredArray = []
let isThatAnArray = false
console.log(typeof declaredArray) // object
if (typeof declaredArray === "object") {
  // Alternatively, typeof declaredArray !== "undefined"
  // would screen out undefined & undeclared variables
  isThatAnArray = Array.isArray(declaredArray)
}
console.log(isThatAnArray) // true

DoctorDerek

const emptyArray = []
const fullArray = [777]
const notAnArray = 777

if (Array.isArray(emptyArray)) {
  if (emptyArray.length > 0) {
    console.log("Non-empty array")
  }
}

DoctorDerek

// Make a new Set with new Set():
const myUniqueColors = new Set()
const myObject1 = { color: "🔴" }
const myObject2 = { color: "🔵" }
const myObject3 = { color: "🟢" }
const myObject4 = { color: "🔵" }
const myObject5 = { color: "🟢" }

// Add a value to the Set with .add():
myUniqueColors.add(myObject1.color)

DoctorDerek

const myObjects = [
  { color: "💛" },
  { color: "💛" },
  { color: "💜" },
  { color: "🧡" },
  { color: "💜" },
  { color: "🧡" },
]

// We could use a for...of loop:

DoctorDerek

// One-liner to find unique object properties with Set:
console.log([...new Set(myObjects.map((o) => o.color))])
// Output: Array(3) [ "💛", "💜", "🧡" ]

DoctorDerek

import React from "react"

import DisplayAllProps from "./DisplayAllProps"
import ChildComponent from "./ChildComponent"

const ParentComponent = (props) => (
  <section>
    <h1>ParentComponent's props:</h1>
    <DisplayAllProps {...props}></DisplayAllProps>
    <ChildComponent {...props}></ChildComponent>

DoctorDerek

import React from "react"
import "./styles.css"
import ParentComponent from "./ParentComponent"

const App = () => (
  <div className="App">
    <ParentComponent name="Johnny" job="👨‍🎤">
      🌟
    </ParentComponent>
  </div>

DoctorDerek

import React from "react"

import DisplayAllProps from "./DisplayAllProps"

const ChildComponent = (props) => (
  <React.Fragment>
    <h1>ChildComponent's props:</h1>
    <DisplayAllProps {...props}></DisplayAllProps>
  </React.Fragment>
)

DoctorDerek

import React from "react"

const DisplayAllProps = (props) => (
  <table>
    <tbody>
      {Array.from(Object.entries(props)).map(([key, value]) => (
        <tr key={key + Math.random()}>
          <td>{key}</td>
          <td>{value}</td>
        </tr>

DoctorDerek

import React from "react"

import DisplayAllProps from "./DisplayAllProps"
import ChildComponent from "./ChildComponent"

const ParentComponent = (props) => (
  <section>
    <h1>ParentComponent's props:</h1>
    <DisplayAllProps
      name={props.name}