Can you really call it a date night if you are learning technical skills?? Idk, but we had fun & plan on doing this again!

Recipe for a Coding Delight

1. Choose a public API. We used this list. Bill got first pick, but I’m up next!
2. Set a timer & stick to it! We decided on ~2 hours for our trial run, but will probably stick with 1 hour in the future.
3. Move fast and break things!
4. When the timer goes off, it’s time to share and discuss! We showed each other what we built & our code. Then we talked through any challenges we ran into, things we’d do differently next time and provided any feedback we had for each other.

So how did it go?

We used the Rock, Paper, Scissors 101 API for our first attempt — it provides you with 101 different Rock, Paper, Scissors tools to use and an endpoint to hit when you want to see who wins/loses in a match up, we’ll call this the ‘match result’. We both used Vite + React + React Query + Chakra. I coded all in one file (like a complete monster), Bill used a couple components. Then we were off!

Difficulties

We both hit the same bump in the road, hitting the match result endpoint, after both tools had been chosen. With React Query, all hooks must be called at the top level of a functional component. This means doing something like the code shown below wouldn’t work.

const handleGamePlay = () => {
  const { data: results, refetch } = useQuery({
    queryKey: ["results"],
    queryFn: () => {
      return axios.get(
        `https://rps101.pythonanywhere.com/api/v1/match?object_one=${playerChoice}&object_two=${computerChoice}`
      );
    },
  });
}

<Button onClick={handleGamePlay}>Let's Play!</Button>

I admit, this was not a super challenging problem to solve, however, it was something neither of us had come across before. The solution? The refetch method! We set the default setting to NOT fetch the data automatically using the key enabled & setting it to false. Refetch is a method that comes with useQuery so don’t forget to extract that!

const { data: results, refetch } = useQuery({
    queryKey: ["results"],
    queryFn: () => {
      return axios.get(
        `https://rps101.pythonanywhere.com/api/v1/match?object_one=${playerChoice}&object_two=${computerChoice}`
      );
    },
    enabled: false,
  });

Then when the button is clicked you can call the refetch method.

<Button onClick={() => refetch()}>Let's Play!</Button>

Take Aways

• We both agreed that 1-hour is probably going to be the sweet spot now that we have 1 attempt under our belt.
• We are going to try to stick to unique API’s like this Rock, Paper, Scissors one to avoid making 1 CRUD app after another.

Check out a quick walk through of my app here: https://youtu.be/6TxWBGsdAkk

Articles that helped me during this challenge:
- https://www.calvintorra.com/blog/how-to-trigger-usequery-with-a-button-click-react-query

Alright, now let’s get into the real meat and potatoes of the thing.

Redux Toolkit + RTK Query

My Capstone project requirements were pretty straightforward — manage state using something like useContext or Redux. I had used useContext for my previous 2 projects and loved it so much that I wrote a blog on it. However, I wanted to expand my knowledge so I decided to go the Redux route this time around. I was excited about the possibilities of the combo of Redux & RTK Query (so long handling complex state management–coincidentally another blog post of mine). But that excitement died pretty quickly after spending some time trying to get everything up and running smoothly. Here are some of the problems I ran into:

1. THE LEARNING CURVE
   I found the Redux learning curve to be intense. The docs were confusing and when I would look to other sources for examples it seemed like everyone was doing it a completely different way. It made it challenging to figure out which parts were 100% necessary to get it up and running successfully.
2. BOILERPLATE CODE
   My goodness there is A LOT of boilerplate code that goes into Redux Toolkit (what’s crazy is Toolkit is the “cut down” version of Redux). This adds unnecessary confusion. And I say unnecessary because it really didn’t take much to get the libraries I did use working. This leads me to my “final straw”.
3. RTK QUERY IS WORDY
   Much like the contestants on the Bachelor/Bachelorette, RTK Query uses A LOT of words…to say very little. That’s really all that needs to be said here.

Why I Avoided useContext This Time

Like I said before, despite loving the ease of useContext, I still wanted to use something new for this project. I also discovered, while reading around that useContext isn’t always the best answer. It turns out that once your context grows too large then you have entire re-renders every time anything within that context object changes. This isn’t great for performance.

What I Did Use

STATE MANAGEMENT

1. Jotai — a state management library that is simple and flexible. Jotai also solves the re-rendering issues surrounding Context by optimizing re-renders based on atom dependency. Bonus points, it has a fun ghost mascot!

I used Jotai to store my user state. Once the atom is created, you can use it in any component. Using atoms looks and functions similarly to useState, however instead of the state living in that component, atoms are global.

// atoms.ts
import { atom } from 'jotai'

export const userAuthAtom = atomWithStorage('userAuth', initialState)

// SignIn.tsx
import { userAuthAtom } from "../StateManagement/store"
import { useAtom } from "jotai"

const [currentUser, setCurrentUser] = useAtom(userAuthAtom)

2. useReducer — instead of useState to handle my form state, I went with useReducer for this project. This simplified handling my form components and I felt like it was easier to read as well.

I defined my initial SignIn State object and wrote a reducer function (this can include other cases such as radio changes, select changes, etc). The reducer function takes in the initial state and an action then returns the new state.

// SignIn.tsx
import React, { useReducer } from "react";

const initialSignInState = {
    username: '',
    password: '',
}

const signInReducer = (state, action) => {
  switch (action.type) {
    case 'HANDLE INPUT TEXT':
      return {
        ...state,
        [action.field]: action.payload,
      }
    default:
      return state 
  }
}

const [signInState, dispatch] = useReducer(signInReducer, initialSignInState)

const handleInputChange = (e) => {
  dispatch({
    type: 'HANDLE INPUT TEXT',
    field: e.target.name,
    payload: e.target.value,
  })
}

FETCHING DATA

1. React Query — a server-state library that manages remote data fetching in React Apps, handles automatic refetching of stale data, and so much more. While I also found the docs challenging at times, once I got the hang of handling Queries and Mutations, there is very little code needed to get the job done. Another star feature of React Query — it completely handles the state of items that would be stored in Redux/Context, allowing you to keep your client-side state fairly small.

In this sign in example, I am using a mutation instead of a query. The useMutation hook takes the mutation function and provides a mutation object. I used the data returned to setCurrentUser (this is the atom from above). In addition to onSuccess, you can also use the onError callback to handle any errors that may occur.

// SignIn.tsx
import { useMutation } from '@tanstack/react-query';
import axios from 'axios';

const signUserIn = useMutation({
    mutationFn: (user) => {
      return axios.post('/signin', user)
      .then((res) => {
        setCurrentUser(res.data)
      })
    },
    onSuccess: () => {
        navigate('/')
      }
  })
  
  const handleSignInClick = (e) => {
    e.preventDefault()
    signUserIn.mutate(signInState)
  }

There are many other libraries out there that are comparable, but these are the ones that I decided worked best for me and weren’t to crazy to figure out!

As I was working on my 4th project for my Flatiron Software Engineering program, I found myself constantly having to look up the syntax for Rails Generators (many other things too, but we won’t go there, ha! Any other new coders have like a million tabs open while they work??) So I figured creating a Rails Generator syntax guide would not only be helpful for me, but hopefully for you too since you are reading this. So without further ado, all aboard the Rails[road] Train.

What Are Rails Generators and Why Use Them?

If you are reading this post, you are likely already familiar with the full-stack framework, Rails. Rails has ready-to-use tools called generators that make creating, updating, migrating, etc., simple. Rails generators allow you to develop via the command line in your terminal rather than having to manually create files and write out any code for the additions/changes you want to make.

Here’s what your generator should look like:

Rails generator [name of generator] [options]

Or, to save yourself a few keystrokes, you can type ‘g’ instead of ‘generator’:

Rails g [name of generator] [options]

I’ll dive more into what goes in each of those brackets below. For now, sit back and enjoy the ride.

Generators: The Basics

Alright, the train is leaving the station — let’s talk the basics.

MODELS
Naming Conventions–models should be capitalized and singular, ie. User. If the model name requires that you use more than one word, you should use CamelCase, ie. QuiltPattern.

Creating a Model–To generate a model using a generator, you want to use this syntax:

Rails g model [model name] [attribute:data type]

You’ll use the naming convention mentioned above for the model name. The default data type for an attribute is ‘string’, so you do not have to type that out. However, you will need to specify the data type if it is anything other than a string. Let’s look at an example:

Rails g model Event event_name user_id:integer event_date:date image_url

Note, once you run the above command, a model file and migration file will also be generated–more on that later. The model file will look like this:

class Event < ApplicationRecord
 
end

*Don’t forget to run rails db:migrate to migrate any changes made.

CONTROLLERS
Naming Conventions–capitalized and plural. ie. Users or QuiltPatterns.

Creating a Controller–To generate a controller, you want to use the following syntax:

Rails g controller [PluralName] [list of actions]

The list of actions are optional, but if you choose to include them, they will update the routes.rb file as well. Let’s look at an example:

Rails g controller Events index show

Your controller file will look something like this:

class EventsController < ApplicationController
  def index
  end
  
  def show
  end
end

SERIALIZERS
Naming Conventions–singular and snake_case. ie. user or quilt_pattern

Creating a serializer–To generate a serializer, you want to use the following syntax:

Rails g serializer [name]

Let’s look at an example:

Rails g serializer event

This will generate a serializer.rb file that looks something like this:

class EventSerializer < ActiveModel::Serializer

end

Generators: Migrations

We’re almost to our destination–let’s talk migrations.

Naming Conventions–for the following migrations, the naming conventions are the same. You want to use CamelCase and the plural table name when generating migrations.

CREATE A TABLE
Use the word “Create” in your generator to create a new table. Like creating a model–discussed above–you can include attributes and their data types (remember ‘string’ is the default data type). This also generates a migration file populated with the new table info.

Rails g migration Create[tableName] [attribute:data type]

Example:
Generator

Rails g migration CreateVendors vendor_name vendor_type rating:integer website_url

Migration File

class CreateVendors < ActiveRecord::Migration[6.1]
  def change
    create_table :vendors do |t|
      t.string :name
      t.string :vendor_type
      t.integer :rating
      t.string :website_url

      t.timestamps
    end
  end
end

DELETE A TABLE
Use the word “Drop” in your generator to delete a table. This will create an empty migration file.

Rails g migration Drop[tableName]

Example:
Generator

Rails g migration DropVendors

Migration File
You’ll need to fill in this migration file using drop_table :table_name

class DropVendors < ActiveRecord::Migration[6.1]
  def change
    drop_table :vendors
  end
end

ADD A COLUMN

Rails g migration Add[columnName]To[tableName] [attribute:data type]

Example:
Generator

Rails g migration AddReviewToVendors review:text

Migration File
That will generate a migration file filled in with the column addition wanted. It will look something like this:

class AddReviewToVendors < ActiveRecord::Migration[6.1]
  def change
    add_column :vendors, :review, :text
  end
end

CHANGE A COLUMN NAME

Rails g migration Change[columnName]Column

Example:
Generator

Rails g migration ChangeWebsiteUrlColumn

Migration File
You’ll need to fill in this migration file using rename_column :table_name, :old_column_name, :new_column_name. It should look something like this:

class ChangeWebsiteUrlColumn < ActiveRecord::Migration[6.1]
  def change
    rename_column :vendors, :website_url, :web_address
  end
end

DELETE COLUMN

Rails g migration Remove[columnName]From[tableName] [attribute:data type]

Example:
Generator

Rails g migration RemoveWebAddressFromVendors web_address

Migration File
This automatically generates a migration file with the info for the column you want removed.

class RemoveWebAddressFromVendors < ActiveRecord::Migration[6.1]
  def change
    remove_column :vendors, :web_address, :string
  end
end

**To lock in any changes you make via migrations, be sure to run:

rails db:migrate

Generators: The One-and-Done Command

As we pull into the station (we made it!) I can’t leave out the one and done command that generates everything I talked about above. But, of course, it doesn’t come with out its own list of pros and cons.

Run the command below, will create the following:

Rails g resource [model name] [attribute:data type]

1.Model
2. Migration
3. Controller
4. Resources in routes.rb file

While this makes it quick and easy to generate all of those files, you just want to make sure you don’t have unnecessary/unused routes (resources). If you want to have more control over what you are creating, I suggest creating each file individually.

The Problem

My back end deals with 2 models — books and reviews. Books have many reviews, reviews belong to a book. When I initially fetch my books data when the app loads, I want to include the reviews associated with each book.

get "/books" do
    book = Book.all
    book.to_json(include: :reviews)
  end

This is what my book data looks like with reviews included.

Okay, that seems simple enough right? Well what if I want to edit(PATCH) a review, add(POST) a new review, or delete a review associated with a specific book? That’s where things get a little more complicated. You want do this without fetching your books data again. But how?

For simplicity, I am going to show you how I solved the problem for adding a new review to a specific book.

The Janky “Fix”

*Disclaimer: Do not manage your state in the way I am about to show you!*

My initial solution to the problem? Refetch the updated data and reset my state… Why did I do it this way? Probably because I was being lazy, or maybe because the right solution seemed daunting. However, if my app were to refetch data to reset state every time I wanted to manipulate the data in someway, several issues could occur including a slow running app and the lack of scalability.

Here is what my code originally looked like before I reworked it. Notice the double fetch.

fetch('http://localhost:9292/reviews', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    })
      .then((r) => r.json())
      .then(() => {
        fetch('http://localhost:9292/books')
          .then((r) => r.json())
          .then((books) => setBooks(books))
      })

The “Correct” Fix

Now of course there are several different ways you can correctly manage your state, but the point I am trying to make by calling it the “correct fix” is just that you are not refetching your updated data.

fetch('http://localhost:9292/reviews', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    })
      .then((r) => r.json())
      .then((newReview) => {
        const updatedBooks = books.map((book) => {
          if (book.id === newReview.book_id) {
            return {...book, reviews: [...book.reviews, newReview]}
          } else { 
            return book
          }
        })
        setBooks(updatedBooks)
      })

Let’s Break It Down

Here is the pseudo coding I wrote to help me figure out the steps I needed to take:

1. Iterate through the array of book objects to find the book that I am adding the review to.
2. Grab the array of review objects associated with that book.
3. Set that book’s review array to a copy of that review array with the new review added in. Spread operator.
4. Update the array of book objects with a copy of that book with it’s now updated array of reviews.

Like I said before, there are many ways you could manage your state, this is just the way that made the most sense to me. I’d love to see your approach!

What is prop drilling?

When working in React, oftentimes you will need to pass data (in the form of props) from a parent component to a child component — or from the top of your nested components to bottom. Generally you only want to pass data to/through components that actually need to use said props. However, if, like me, you find yourself passing props down several layers of nested components — some of which aren’t using the prop at all — you have began to prop drill.

In short, prop drilling is when you pass props down through several layers of nested components solely for the purpose of using it in a deeply-nested component.

Let’s look at a visual example of prop drilling, using state. The * indicates the components that are actually using the data.

App [favoriteCharacters, setFavoriteCharacters]
-> Characters[favoriteCharacters, setFavoriteCharacters]
   -> CharacterCard [favoriteCharacters, setFavoriteCharacters]
      -> FavoriteButton [favoriteCharacters, setFavoriteCharacters]*
-> Favorite Characters [favoriteCharacters, setFavoriteCharacters]*
   -> CharacterCard [favoriteCharacters, setFavoriteCharacters]
      -> FavoriteButton [favoriteCharacters, setFavoriteCharacters]*

You can see above that I needed to set FavoriteCharacter state in the App component in order to pass it to both Home and Favorite Characters (to then be trickled down to their children, etc). However, App and Home do not actually use this data.

Why should you avoid prop drilling?

You may be asking yourself, why is prop drilling a problem? Or maybe you’re a bit newer to React like me, and didn’t realize it was a problem until you started refactoring your code.

• Unnecessary Code: Since most of the components involved in prop drilling do not actually use the data passed through them (other than to pass them along to their children), they are merely acting as middlemen. This can lead to issues down the road, or just messy code.
• Confusing Code: Confusing code isn’t just a ‘you-problem’. If you are working on a joint project, or in industry, other people are going to be looking at your code, if it is difficult for them to follow, then you are doing your job incorrectly!
• Prone to Errors: Passing data down through many components leaves room for errors, for example if you forget to pass a prop through just one component, it can lead to a frustrating time trying to figure out why your code isn’t working–again, speaking from experience here…

Ways to deal with prop drilling

There are 2 ways you can handle prop drilling: component composition and context. I will be showing you how I solved prop drilling with context. However, it is worth briefly mentioning component composition in case that is a better option for you.

Component Composition — many levels, same nest

Are you passing your props through many levels of the same nested group of components? Then component composition is probably your best bet. Component composition is essentially the fundamental of how you work in React. You can learn more about component composition in the React Docs.

Context — many levels, different nests

Are you passing your props through components at different nesting levels? Context — the star of the show here — can help! Creating Context allows you to pass your props directly to the components you need, rather than trickling down the list of nested components — which is just tedious (and confusing!) It takes a little bit of set up, but once that is done, it is easy to implement.

Let’s create some Context

Okay enough chit chat, let’s get to the example. In this specific case, I was passing state through several components to get to the spot where I needed to set state. Let’s refer back to the example from earlier and look at how we can clean it up with context. Ideally we want it to look more like this:

App
-> Characters
   -> CharacterCard
      -> FavoriteButton [favoriteCharactersContext]
-> Favorite Characters [favoriteCharactersContext]
   -> CharacterCard
      -> FavoriteButton [favoriteCharactersContext]

Step 1: Create your Context file

• Create a new folder in your project called context.
• Inside of that context folder, create a .js file. I named mine ‘favoriteCharacters.js’.

Step 2: Create Context

• First, lets create context by using React.createContext()

import React, { useState } from 'react'

const FavoriteCharacterContext = React.createContext()

• Next, add a provider component. We will eventually wrap our app in this provider tag in order to give our components access to the data in the favoriteCharacters.js file.

import React, { useState } from 'react'

const FavoriteCharacterContext = React.createContext()

const FavoriteCharacterProvider = ({children}) => {
  return (
  )
}

• Inside the FavoriteCharacterProvider component, I added the favoriteCharacters state that I needed access to.

import React, { useState } from 'react'

const FavoriteCharacterContext = React.createContext()

const FavoriteCharacterProvider = ({children}) => {
  const [favoriteCharacters, setFavoriteCharacters] = useState([])

  return (
  )
}

• Finally, in the return of the provider component, the value is set to the state and since I used {children} between the tags, the children of the provider tag will have access to ‘value’. To reiterate, once we wrap our app in the provider tag, anything inside of those tags will have access to the set value.

import React, { useState } from 'react'

const FavoriteCharacterContext = React.createContext()

const FavoriteCharacterProvider = ({children}) => {
  const [favoriteCharacters, setFavoriteCharacters] = useState([])

  return (
    <FavoriteCharacterContext.Provider
      value={{ favoriteCharacters, setFavoriteCharacters }}
    >
      {children}
    </FavoriteCharacterContext.Provider>
  )
}

• Don’t forget: Import React and in this case, useState & export both the context variable you declared and the provider component!

import React, { useState } from 'react'

const FavoriteCharacterContext = React.createContext()

const FavoriteCharacterProvider = ({children}) => {
  const [favoriteCharacters, setFavoriteCharacters] = useState([])

  return (
    <FavoriteCharacterContext.Provider
      value={{ favoriteCharacters, setFavoriteCharacters }}
    >
      {children}
    </FavoriteCharacterContext.Provider>
  )
}

export { FavoriteCharacterContext, FavoriteCharacterProvider }

Step 3: useContext — Implementing context in your code

• Before we wrap our app, let’s take a look at what my App component looked like before context was introduced.

function App() {
  const [favoriteCharacters, setFavoriteCharacter] = useState([])

  return (
    <NavBar />
    <Switch>
      <Route path='/characters'>
        <Characters 
          favoriteCharacters={favoriteCharacters}
          setFavoriteCharacters={setFavoriteCharacters}
        />
      </Route>
      <Route path='/ohmybabies'>
        <OhMyBabies
          favoriteCharacters={favoriteCharacters}
          setFavoriteCharacters={setFavoriteCharacters}
        />
      </Route>
    </Switch>
  )
}

That’s a lot to take in right? A couple things to point out:

1. The App component itself is not utilizing the state I set up, it is just passing it along to its 2 children, Characters and OhMyBabies.
2. I have repetitive code:

favoriteCharacters={favoriteCharacters}
setFavoriteCharacters={setFavoriteCharacters}

• Okay, we have finally made it to the long anticipated wrapping of the app–woo! After importing your context file, you want to be sure to wrap the components that need access to the data in your context file.

import { FavoriteCharacterProvider } from "../context/favoriteCharacters";

function App() {
  return (
    <NavBar />
    <FavoriteCharacterProvider>
      <Switch>
        <Route path='/characters'>
          <Characters />
        </Route>
        <Route path='/ohmybabies'>
          <OhMyBabies />
        </Route>
      </Switch>
    </FavoriteCharacterProvider>
  )
}

Isn’t that much cleaner! Notice that I also removed useState() as well as the repetitive props from both children components.

• Next, we need to add it to the components that need access to the data in the context file. Let’s look at the original FavoriteCharacters component:

import React from "react";
import { Box, SimpleGrid, Stack, Heading } from '@chakra-ui/react'
import CharacterCard from "../components/CharacterCard";

const OhMyBabies = ({favoriteCharacters, setFavoriteCharacters}) => {
  return (
    <Stack m={10}>
      <Box>
        <Heading color='yellow.500' size='2xl'>Oh My Babies!</Heading>
      </Box>
      <SimpleGrid spacing={4} templateColumns='repeat(auto-fill, minmax(400px, 1fr))'>
        {favoriteCharacters.map((favoriteCharacter) => {
          return (
            <CharacterCard 
              key={favoriteCharacter.id} 
              character={favoriteCharacter}
              favoriteCharacters={favoriteCharacters}
              setFavoriteCharacters={setFavoriteCharacters}
            />
          )
        })}
      </SimpleGrid>
    </Stack>
  )
}

export default OhMyBabies

The important things to note here are that we are passing in both favoriteCharacters and setFavoriteCharacters, only using favoriteCharacters, and then passing both props along to the CharacterCard component so it can then give the FavoriteButton component access to both props.

• Adding context is now very simple!

import React, { useContext } from "react";
import { Box, SimpleGrid, Stack, Heading } from '@chakra-ui/react'
import CharacterCard from "../components/CharacterCard";
import { FavoriteCharacterContext } from "../context/favoriteCharacters";

const OhMyBabies = () => {
  const { favoriteCharacters } = useContext(FavoriteCharacterContext)

  return (
    <Stack m={10}>
      <Box>
        <Heading color='yellow.500' size='2xl'>Oh My Babies!</Heading>
      </Box>
      <SimpleGrid spacing={4} templateColumns='repeat(auto-fill, minmax(400px, 1fr))'>
        {favoriteCharacters.map((favoriteCharacter) => {
          return (
            <CharacterCard 
              key={favoriteCharacter.id} 
              character={favoriteCharacter} 
            />
          )
        })}
      </SimpleGrid>
    </Stack>
  )
}

export default OhMyBabies

A few things to note:

1. I added { useContext } to my React import.
2. I imported my context file and FavoriteCharacterContext.
3. I added useContext() inside my OhMyBabies component and only pulled out the one prop I needed to use — in this case favoriteCharacters.
4. Finally, I deleted the two favoriteCharacters props passing through the CharacterCard component.

• This process looks the exact same for the FavoriteButton component, except for one minor change. I need to use both props in that component so my useContext() looks like this:

const { favoriteCharacters, setFavoriteCharacters } = useContext(FavoriteCharacterContext)

Conclusion

And there you have it! We’ve added context, using state to simplify our code!

References

• Context
• Composition v. Inheritance

When I first started learning to code (mind you I came in with next to zero experience), I remember first reading about console.log() and thinking, okay that’s cool… but how will this actually be used in real life? It wasn’t until I started my first project that I realized just how important console logging really is.

Have you ever written code that just doesn’t seem to be working and you can’t figure out why? Or maybe you have an event listener on an element that you just know you grabbed correctly, but the event isn’t functioning the way you expect it to and the error in your code isn’t jumping out at you. In both situations (and many many others), console.log() can be used to get to the bottom of the problem.

Okay, let’s back up a little. console.log() is a JavaScript method that logs something to the console — pretty self explanatory, eh?

The syntax is as follows:

console.log(x)

In the general example above, the x is the variable or value that you want logged to the console.

You can console.log() any JavaScript data type. Let’s look at a few more simple examples:

console.log() a string

console.log('hi')

Open your browser dev tools, navigate to your console, copy and paste the above code into the console + press enter, you should see hi is now logged.

console.log() a number

console.log(6)

console.log() variables

let x = 'hi '
let y = 'world'

console.log(x + y)

console.log() an object

console.log(['red', 'orange', 'yellow', 'green', 'blue', 'violet'])

Okay now you’re probably thinking “That’s cool and all… but how is that going to help me in real life?” Console logging irl can be used in many ways — debugging, confirming that you selected the correct element, and checking how data is being returned, just to name a few. All of these examples are ways that will make building your first (or two-hundred and first) project a much smoother process.

But wait, what DOM element am I actually selecting?

When manipulating the DOM (document object model), knowing if you’re selecting the exact HTML element you want can sometimes be tricky. It’s always good to do a quick console.log() of the element you want to grab and use later on in your code. This could ultimately save you time debugging code if you were to grab the wrong element (or no element at all!) Trust me, there is no such thing as console logging too much!

I have a collection of data (in this example, an API) but now what?

When working on my first project, one of the most helpful ways that I used console.log() was checking exactly how the API I used was returning data. Let’s take a closer look:

Let’s say I have this bit of code, that is fetching a random cocktail from my API. Before I start working with the data, I really want to see what I am getting back, so I know how to best work with said data.

const getRandomCocktail = () => {
  fetch('https://www.thecocktaildb.com/api/json/v1/1/random.php')
    .then((res) => res.json())
    .then((drink) => console.log(drink))
}

When I refresh my index.html in the browser — once again I will need my browser console open — I should see one random drink displayed in the console.

*If you are new to coding, it is important to remember that you will only see what ever you console.log() in your console, not on the web page itself!

As you can see, what was logged is an object of an array of a single object. Now I know how to properly manipulate this data — think if I had assumed the data was displayed in a different way, my code would break and I wouldn’t have known why.

console.log() Helps You Understand What is Happening in Your Code

Breaking down the .forEach() array method with console.log()

For me, array methods didn’t 100% click until I started my first real world use of them. If that is also the case for you, don’t fret, console.log() is here to help!

For this example I am going to use the .forEach() JavaScript array method.

Let’s start with the following code snippet:

const renderDrinks = (objectOfDrinks) => {
  const arrayOfDrinks = objectOfDrinks.drinks
  arrayOfDrinks.forEach(drink => {
    const { strDrink, strDrinkThumb, idDrink } = drink
    const card = document.createElement('div')
    card.className = 'card'
    card.innerHTML = `
      <img src="${strDrinkThumb}"
        class='drinkImage'
        alt="${strDrink}"
        id='${strDrink} image'
      />
      <h2>${strDrink}</h2>
      <button class=learnMoreBtn id=${idDrink}>Gimmie the Deets!
    `
    cocktailCardDiv.appendChild(card)
}

In this example, I want to render multiple drinks using an array of objects provided to me by the cocktail API I used in my previous example. Let’s break this down a little more:

1. I am using an arrow function to build a function that will render multiple drinks.
2. This function is taking in an objectOfDrinks… but wait, what does that look like you ask? Let’s console.log() it and find out.

const renderDrinks = (objectOfDrinks) => console.log(objectOfDrinks)

Okay perfect, now I know I am getting an object of an array of objects (Inception anyone?) — let’s get into that array so I can use the .forEach() array method on it.

3. In order to do that, I am going to declare a variable and dive down a level into my array. This is another great time to console log. Let’s see what we are working with now.

const renderDrinks = (objectOfDrinks) => {
  const arrayOfDrinks = objectOfDrinks.drinks
  console.log(arrayOfDrinks)
}

Awesome, now I am working with just the array of objects. Now let’s use the .forEach() method on this new array that we assigned to the variable arrayOfDrinks.

4. I will take my arrayOfDrinks array and apply the .forEach() method. Inside of the parenthesis goes like this “For each drink, I want to console log drink”. Remember, I am using console.log() here to simply see what the data that I am about to manipulate looks like.

const renderDrinks = (objectOfDrinks) => {
  const arrayOfDrinks = objectOfDrinks.drinks
  arrayOfDrinks.forEach(drink => console.log(drink))
}

Look at that — console logging drink in this .forEach() example has broken the array of objects into individual objects. This makes it easy to now apply some sort of manipulation to each drink!

These are just a few examples of how I used console.log() to make the process of coding my first project smoother and to help myself really understand the logic behind the code, there are of course many other ways you can use it as well.

The best way to learn is to get in there and try things out, happy coding!