How Code Looks vs How Data Moves

One of the most confusing things about learning code is that examples often look like the values are baked into the code itself. You see let price = 29.99 and think "why would you hardcode the price?" The answer is: sometimes you would, and sometimes you wouldn't. Knowing the difference matters.

Two kinds of values in code

Hardcoded values are decisions the developer makes when writing the code. They're typed directly into the file and don't change based on who's using the app.

const taxRate = 0.08
const maxGuests = 50
const appName = "PetKarma"
const errorMessage = "Something went wrong. Please try again."

These are configuration decisions. The tax rate is 8% for everyone. The app is called PetKarma. The error message is always the same text. The developer typed these into the file. They sit in the code file. They are the code. const makes sense here because these values genuinely don't change while the app is running.

Dynamic values come from somewhere else — from what a user typed, from a dropdown selection, from the database, from a calculation.

let guestCount = guestInput.value
let restaurantName = selectedRestaurant.name
let occupiedTables = await getOccupiedTables()
let orderTotal = calculateTotal(price, quantity)

The code says "go get the value from wherever it lives." It doesn't say what the value is. If a different user types a different number, the variable holds a different number. Same code, different result every time.

Code vs RAM — side by side

The code is the instructions. RAM is where the results live. They're two different places holding two different things. Here's what that looks like:

let guestCount = guestInput.value
let restaurantName = selectedRestaurant.name
let isConfirmed = false

guestCount: 14
restaurantName: "PetKarma Grill"
isConfirmed: false

The code never says 14 or "PetKarma Grill." Those values only exist in RAM because that's what the user selected. RAM doesn't know where the values came from — it just holds what's there right now.

Close the tab and the RAM is released. The code stays exactly the same in the file. Next time someone opens the page, the code runs again, gets fresh values, and puts them in new RAM. Same instructions, potentially different results.

The three things inside a function

Now that you've seen a full function in the lifecycle of a click, here are the three main things you'll see inside any function:

• Variables — let formData = ... (storing information)
• Conditionals — if (!formData.firstName) { ... } (making decisions)
• Function calls — showError("..."), fetch(...) (running other functions)

That's it. Variables, conditionals, and calls to other functions. Those are the building blocks inside any function you'll ever read.

Breaking apart a complex line

Sometimes a single line of code has multiple things happening at once. This is one of the most common patterns you'll see:

let response = await fetch("/api/lead-intake", { method: "POST", body: JSON.stringify(formData) })

This looks dense, but it's two things working together:

• let response — creating a variable
• fetch(...) — calling a function
• = — put what the function returns into the variable
• await — wait for the function to finish before moving on

The function does work and hands back a result. The variable catches that result. It's the same pattern as:

let orderTotal = calculateTotal(29.99, 3)

calculateTotal is the function. orderTotal is the variable that catches what the function returns. let [variable] = [function call] — once you see this pattern, you'll recognize it everywhere.

Built-in keywords vs developer-chosen names

When reading code, it helps to know which words are part of the JavaScript language and which were chosen by the developer who wrote it.

async function handleSubmit() {
  let formData = {
    firstName: firstNameInput.value
  }
  if (!formData.firstName) {
    return
  }
  let response = await fetch("/api/lead-intake")
}

Built-in JavaScript keywords (about 30-40 total):

• async, await — for operations that take time
• function — declares a function
• let, const — create named containers
• if, else — conditionals
• return — stop the function and hand back a result
• true, false, null — literal values
• typeof — check the type categorization of a value
• fetch — built-in function for sending HTTP requests

Developer-chosen names (everything else):

• handleSubmit — the developer named this function
• formData — the developer named this variable
• firstName — the developer named this property
• firstNameInput — the developer named this reference
• "/api/lead-intake" — the developer chose this URL

The built-in list is much smaller than you'd think. Almost everything you see in code is a name someone chose. Knowing which is which helps you read code faster — the built-in words tell you what's happening. The developer names tell you what it's about.