Frontend Master

JavaScript Curriculum

Name It, Store It
+20 XP

Name It, Store It

easy
~10 min·20 XP

Your tech lead drops a task in Slack: 'The word \"Nexus\" appears 47 times in the codebase. Hardcoded everywhere. If we ever rebrand, we're dead. Store it in a variable.' You stare at the editor. You've seen `const` and `let` before but never really understood what they do. Time to find out.

The tech lead's Slack message

"We have 'Nexus' hardcoded in 47 places. If we rebrand tomorrow, someone has to find and change all 47. Store it in a variable. That's what variables are for."

This is the actual reason variables exist. Not because programming textbooks say so. Because repeating the same value everywhere is a maintenance nightmare.

What is a variable?

A variable is a named container that holds a value.

Think of it like a labeled box. You write a name on the outside, put a value inside, and then use the name whenever you need the value.

Watch this:

variable assignment
constcompanyName="Nexus"
label
companyName
→
value
empty
const

Now instead of typing "Nexus" 47 times, you type companyName 47 times. And when the company rebrands to "Apex", you change one line.

🧠Mental Model
Variable = labeled box. The label (name) goes on the outside. The value goes inside. You read and write through the label.

const — your default choice

const creates a variable that cannot be reassigned after you give it a value.

browser console
›const companyName = "Nexus"

Use const for anything that shouldn't change: company names, user IDs, configuration values, API endpoints. This is your default. Reach for const first, every time.

let — when the value needs to change

let creates a variable that can be reassigned. Use it when the value will be updated — a score that goes up, a counter that increments, a status that flips.

See the difference in action — click "next" to step through:

›let score = 0Declare score
›console.log(score)
›score = 50
›console.log(score)
💡Rule of thumb
Start with const. If you get an error because you need to reassign it, switch to let. You'll build the habit fast.

var — the old way. Don't use it.

var is how JavaScript worked before 2015. It has weird scoping rules that cause subtle bugs. You'll see it in old code and tutorials, but never write it yourself.

let vs const vs var
keywordreassign?redeclare?scopeuse when
const✗ No✗ NoBlockDefault choice
let✓ Yes✗ NoBlockWhen value changes
var✓ Yes✓ YesFunction⚠️ Avoid — legacy
click reveal to see all rows
⚠️When you see var
Old code uses var everywhere. You don't need to fix it — just don't write new var declarations. Use const or let.

Naming your variables

The name you give a variable matters. A lot. Bad names make code unreadable. Good names make code self-documenting.

The rules JavaScript enforces:

  • Must start with a letter, _, or $ (not a number)
  • No spaces
  • No reserved keywords (const, let, if, etc.)

The convention JavaScript developers follow:

  • camelCase for everything — first word lowercase, each subsequent word capitalized
  • Names that describe what the value is, not how it's used

Click any name below to see why it's good, questionable, or broken:

naming explorer — click any name
userNamegood

camelCase — clear and readable

✗ what is d?
const d = new Date()
✓ reads like English
const createdAt = new Date()

How JavaScript executes variable code

1const declared — box created with label
2Value assigned — stored in the box
3Variable used — JavaScript reads the box
4const reassign attempted — CRASH 💥 (use let instead)

The three things you do with variables

js
// 1. DECLARE — create the box with a name const companyName = "Nexus" // 2. READ — use the value console.log(companyName) // "Nexus" console.log("Welcome to", companyName) // "Welcome to Nexus" // 3. UPDATE — only works with let, not const let userCount = 0 userCount = userCount + 1 // now 1 userCount = userCount + 1 // now 2 console.log(userCount) // 2
ℹ️You can declare without assigning
let status — this creates the box but leaves it empty. The value is undefined until you assign one. Only do this with let, not const (const requires a value immediately).

Before the challenge

Your challenge uses three variables — one for each type of data the dashboard tracks. Before you write them, think:

  • Should any of these change at runtime? (Probably not for this challenge — use const)
  • What names make the code readable without comments?

Challenge

The Nexus dashboard needs three pieces of data: the company name (\"Nexus\"), the current user count (1042), and whether the system is online (true). Create three variables using const — companyName, userCount, and isOnline — then log all three with descriptive labels like: console.log(\"Company:\", companyName).

variablesconstletvarnamingdeclarationassignment
Name It, Store It | Nexus Learn