Javascript Variables

Variables give names to values so your JavaScript can remember and reuse them. In this practical example, you will store a learner’s name, completed lessons, and weekly goal, then show a progress message on the page. For the core concepts, read the JavaScript explanation on Playcode123.com. On the JavaScript codes page, choose Open in Sandbox beside an example to load its start code in the Sandbox. Edit the code, then choose Run Code to update the preview.

let and const

Use const when the variable will not be assigned a different value. Use let when it needs to change later. 
const learnerName = "Alex";
let completedLessons = 2;
The variable names describe the data. Text is placed inside quotes; numbers are not.

Build a small progress tracker

Create an index.html file and paste in this complete example: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Variables</title>
</head>
<body>
  <h1>Weekly coding progress</h1>
  <p id="progress"></p>

  <script>
    const learnerName = "Alex";
    const weeklyGoal = 5;
    let completedLessons = 2;

    completedLessons = completedLessons + 1;

    const message =
      learnerName + " completed " + completedLessons +
      " of " + weeklyGoal + " lessons.";

    document.getElementById("progress").textContent = message;
  </script>
</body>
</html>

Expected result

The page should display: Alex completed 3 of 5 lessons. The starting value is 2, but the next line adds one before the message is created.

Read the output as a trace of the values

In “Alex completed 3 of 5 lessons.”, Alex comes from learnerName, 3 is the updated completedLessons, and 5 is weeklyGoal. The number 2 is the starting count, not the final count displayed.

Read completedLessons = completedLessons + 1; from right to left: calculate 2 + 1, then store 3 back under the same name. The equals sign assigns a value; it is not a mathematical claim that a number equals itself plus one.

The message is created after the update. If you create it first and change the count later, the old string will not automatically rebuild itself. Likewise, a variable change does not automatically update a paragraph: run the message-building and textContent assignment again to show new values.

What happens step by step

  1. learnerName stores text.
  2. weeklyGoal stores a number that does not change.
  3. completedLessons starts at 2.
  4. The value is updated to 3.
  5. The variables are combined into a message.
  6. textContent places the message in the paragraph.

Debug a count that becomes 21

In your practice copy, change only let completedLessons = 2; to let completedLessons = "2";. Run the example. The sentence now reports 21 completed lessons rather than 3. There may be no error in Console: the program ran, but used the wrong data type.

let completedLessons = "2";
console.log(typeof completedLessons); // "string"
completedLessons = completedLessons + 1;
console.log(completedLessons); // "21"

With a string on one side, + joins text, so “2” and 1 become “21”. Remove the quotes from the starting count, run again, and confirm that the result is 3. The learner’s name still needs quotes because it is text.

Use Console in the page running your example; for an embedded sandbox, select its preview frame or open a saved HTML copy in a separate tab. If you later read a count from a form field, its value is text too. Converting and validating user input is a separate step; this exercise uses numbers written directly in the code.

Common mistakes

  • Changing a const: assigning a new value to a const causes an error.
  • Forgetting quotes: write "Alex" for text. Without quotes, JavaScript looks for a variable named Alex.
  • Using a variable before declaring it: declare the variable before the code that reads it.
  • Inconsistent capitalization: weeklyGoal and weeklygoal are different names.
  • Adding text instead of numbers: "2" + 1 produces "21", while 2 + 1 produces 3.
  • Using unclear names: descriptive names make errors easier to find.

Exercise

Change the learner’s name and weekly goal. Start completedLessons at another number, add two completed lessons, and update the message so it also says how many lessons remain. Check your work: open the browser console if no message appears. Look for spelling differences, missing quotes, or an attempt to change a const.

Worked solution: calculate what remains

Try the exercise first. Then keep the complete HTML example above and replace the entire contents of its <script> element with the following JavaScript. The paragraph must keep id="progress".

const learnerName = "Sam";
const weeklyGoal = 6;
let completedLessons = 1;

completedLessons = completedLessons + 2;
const remainingLessons = weeklyGoal - completedLessons;

const message =
  learnerName + " completed " + completedLessons +
  " of " + weeklyGoal + " lessons. " +
  remainingLessons + " lessons remain.";

document.getElementById("progress").textContent = message;

Expected output: Sam completed 3 of 6 lessons. 3 lessons remain.

  1. The starting count is 1. Adding two changes completedLessons to 3.
  2. weeklyGoal - completedLessons calculates 6 − 3, so remainingLessons is 3.
  3. The message combines the updated count, goal, and remaining count. Spaces inside the quoted strings separate the words.
  4. The final assignment displays the finished string in the existing paragraph.

completedLessons uses let because this script reassigns it. The other bindings use const because each receives its value once. You may choose a different goal when editing the source; const prevents reassignment during that run, not future edits to your file.

Predict, run, compare

  • Starting count 0, goal 6: after adding two, expect “Sam completed 2 of 6 lessons. 4 lessons remain.”
  • Starting count 4, goal 6: expect “Sam completed 6 of 6 lessons. 0 lessons remain.”
  • Starting count 5, goal 6: the calculation produces 7 completed and −1 remaining. That exposes a missing rule, not a broken subtraction.

This simple tracker does not prevent exceeding the goal. Continue with the functions tutorial to return a helpful message for that case. Reloading this example resets it to the starting values; it does not store actual learning progress.