vocab-review.md

Destructuring

Taking out elements from an array or properties from an object and saves them in new variables.

const someObject = {
  someKey: "Some value",
  anotherKey: Another value",
}

const { someKey } = someObject
const someKey = someObject.key

const { someKey, anotherKey } = someObject
const someKey = someObject.key
const anotherKey = someObject.anotherKey

function SomeComponent({ message, anotherKey, yetAnotherKey }){
  return <p>{message}</p>
}

<SomeComponent
  message={message}
  anotherKey="Some static value"
  yetAnotherKey={yetAnotherKey}
/>

function SomeComponent({ allTheStuff }){
  const { message, anotherKey, yetAnotherKey } = allTheStuff
  return <p>{message}</p>
}

function SomeOtherComponent(){
    const [message, setMessage] = useState(null)
    const yetAnotherKey = "Aloha!"

    return (
      <SomeComponent
        allTheStuff={{
          message: message,
          anotherKey: "Some static value",
          yetAnotherKey: yetAnotherKey,
        }}
      />
    )
}

const someArray = [1, 2, 3, 4]
const [one, two] = someArray

const one = someArray[0]
const two = someArray[1]
const three = someArray[2]
const four = someArray[3]

const [message, setMessage] = useState(null)

const hook = useState(null)
const message = hook[0]
const setMessage = hook[1]

const person = {
  firstName: "Kyle",
  lastName: "Coberly",
}
const someTuple = ["Kyle", "Coberly"]

Promise

Part of async JavaScript, promise to return the result of something from a process, like a fetch request. It represents an eventual value.

console.log("1")
fetch(someUrl)
  .then(result => {
    console.log("3")
    // Do something with the result
  }).catch(error => {
    // Do something with the error
  })
console.log("2")
console.log("2.5")

async function getSomething(){
  try {
    const result = await fetch(someUrl)
    // Do something with the result
  } catch(error){
    // Do something with the error
  }
}

function ListPokemon({pokemonName}){
  const [pokemon, setPokemon] = useState(null)

  useEffect(() => {
    fetch(`${pokemonUrl}/${pokemonName}`)
      .then(response => {
        setPokemon(response)
      })
  }, [])
}

Spreading

Spreading is extracting all of the properties or elements in some object or array. Allows you to work with them as individual arguments rather than a collection.

const numbers = [1, 2, 3]
...numbers // 1, 2, 3
numbers.push(4) // Don't do this
const newNumbers = [...numbers, 4]
const maybeNewNumbers = [numbers, 4] // [[1, 2, 3], 4]

const someObject = {
  someKey: "Some value",
  anotherKey: Another value",
}
...someObject // someKey: "Some value", anotherKey: "Another value"

const someOtherObject = {
  ...someObject,
  someNewProperty: "someNewValue"
  someKey: "some clobbered value"
}

sum(...numbers)

Template Literal

Uses backticks to create a string. Instead of a "string", use backticks and you can have as many lines as you want. You can interpolate JavaScript variables in the template with ${}.

const someString = `Hello, world!`
const someString = `Hello,
world!`
const someString = `Hello, ${someVariable}!`

const someString = "Hello" + " " + message
const someString = `Hello ${message}`

Use this instead of string concatenation.

Ternary Expression

Shorthand for if/else control structure. Only two branches.

if (someCondition){
  return "a"
} else {
  return "b"
}

return someCondition ? "a" : "b"

function SomeComponent({ someBoolean }){
  return (
    <p>{
      someBoolean
        ? "Hello"
        : "Goodbye"
    } world!</p>
  )
}

ESM

Syntax for import and export statements.

import ComponentName from "./ComponentName"
import { useState, useEffect } from "react"

export default function ComponentName() {
}

Node.js

JavaScript runtime. Open-source. Lets JavaScript run outside the browser. Used to build React apps.

function SomeComponent(){
  return (
    <p>Hello, world!</p>
  )
}

function SomeComponent(){
  return React.createComponent("p", "Hello, world!")
}

DOM

Document object model, how JavaScript interacts with web pages.

DOM Event

Something that happens in the DOM that can be triggered by user interaction or the browser that may effect what code is executed.

Higher-Order Function

Passing a function to a function as a parameter, or having a function return a function, or both.

• Reduce
• Map
• Filter
• Find
• forEach
• addEventListener