Variables and Data Containers: JavaScript Data Storage Guide

Previously in this course, we explored the JavaScript runtime environment and learned how to hook your scripts into a browser. Now that we can execute code, we need a way to remember information while that code runs.

In programming, we use variables as named containers for data. Think of a variable as a labeled box: you put a piece of information inside, and later, you refer to that box by its label to retrieve the value.

Declaring Variables with let and const

In modern JavaScript (ES6+), we primarily use two keywords to declare variables: let and const.

• let: Use this when you expect the value inside the container to change over time (e.g., a counter or a user's current score).
• const: Short for "constant." Use this for values that should remain fixed throughout the lifecycle of your script (e.g., a configuration URL or a fixed tax rate).

Here is how you declare them:

JAVASCRIPT
let currentTask = "Finish the documentation";
const appName = "My To-Do Dashboard";

// Later, we can update currentTask
currentTask = "Review the pull request";

If you try to reassign a const variable, JavaScript will throw an error. This is a safety feature that prevents bugs where values are accidentally overwritten.

Debugging with console.log

To see what is happening inside your variables, you use console.log(). This function prints the value of your data to the browser's developer tools console. It is the single most important tool for a beginner to understand the flow of their data.

Let's start our running project: a to-do and weather dashboard. We will initialize the basic data containers for our app.

JAVASCRIPT
// dashboard.js
const appTitle = "Productivity Dashboard";
let taskCount = 0;

console.log("App initialized:", appTitle);
console.log("Current task count:", taskCount);

// Simulate adding a task
taskCount = 1;
console.log("New task count:", taskCount);

Hands-on Exercise

Open your browser's console (F12 or Right-click -> Inspect -> Console). Create a new file named app.js and link it to your HTML.

1. Declare a const named userName and assign it your name.
2. Declare a let named weatherStatus and set it to "Sunny".
3. Use console.log to print both variables.
4. Update weatherStatus to "Rainy" and log it again to see the change.

Common Pitfalls

• Forgetting to declare: If you just type score = 10; without let or const, JavaScript might create a global variable, which can lead to messy, unpredictable code. Always use the keywords.
• Re-declaring: You cannot declare the same variable name twice with let in the same scope.
  • Wrong: let x = 1; let x = 2;
  • Right: let x = 1; x = 2;
• Confusing const with immutable data: const prevents you from reassigning the variable name to a new value, but it does not make complex data types (like objects or arrays) immutable. We will cover this in detail when we reach lessons on objects and arrays.

FAQ

Why shouldn't I use var? var is the old way of declaring variables. It has confusing scoping rules that often lead to bugs. Modern JavaScript best practice is to always use const by default, and let only when you know the value needs to change.

Can I name my variables anything? Mostly, yes. Use descriptive names like taskCount instead of x. Variable names must start with a letter, underscore, or dollar sign, and cannot contain spaces.

Recap

We have moved from simply running scripts to actively managing data. By using const for fixed values and let for changing values, we build a foundation for state management. console.log remains your primary tool for verifying that your code is working as intended.

Up next: We will dive into Primitive Data Types to understand exactly what kind of information we can store in these containers.