JavaScript Variables & Data Types

Discover how to store, manage, and manipulate information—the fundamental building blocks of any program.

📦

Welcome! Let's explore how JavaScript stores information using variables.

/* Storing data is fundamental... */

Declaring Variables: let, const, & var

In JavaScript, you create variables to store information. Think of them as labeled boxes. The modern keywords to declare variables are let (for values that can change) and const (for values that should not change). The older keyword var also exists but is less predictable.

Core Data Types: String, Number, Boolean

Every variable holds a value of a specific data type. The fundamental (primitive) types include String (text, like "hello"), Number (e.g., 42, 3.14), and Boolean (true or false). There are also special values like null (intentionally empty) and undefined (unassigned).

Assignment: Giving Variables Value

You give a variable a value using the assignment operator (=). You can declare and assign in one step (e.g., let score = 100;) or separately. With let, you can re-assign a new value later (score = 150;), but trying to re-assign a const variable will cause an error.

Understanding Scope: Where Variables Live

Scope determines where variables are accessible. let and const are block-scoped, meaning they only exist within the curly braces they are defined in (like inside an if statement or a loop). var is function-scoped, which can sometimes lead to unexpected behavior.

Practice Zone

Interactive Test 1: Match the Concepts

Drag the examples to their corresponding data type or keyword concept.

Arrastra en el orden correspondiente.

Arrastra las opciones:

const

"JavaScript"

let

2025

Completa el código:

String______

Number______

Re-assignable______

Constant______

Unlock with Premium

Interactive Test 2: Complete the Declaration

Declare a constant named `greeting` and assign it the string "Hello, World!".

Rellena los huecos en cada casilla.

= ;

Unlock with Premium

Practice Example: Code Editor

Declare a variable `userAge` with the value `25` and a constant `userName` with the value `"Alex"`. Then, log both to the console.

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

let userAge = 25;
const userName = "Alex";
console.log(userName);
console.log(userAge);

Unlock with Premium

Knowledge Check

What is the key difference between `let` and `const`?

Unlock with Premium

Variables in Action: A Simple Counter

Variables aren't just for storing data; they're for tracking the *state* of your application. Let's see how a simple `let` variable can power an interactive element.

1. The HTML Foundation

First, we need some simple HTML elements: a `span` to display the count and a `button` to increment it. We give them IDs to make them easy for our JavaScript to find.


<span id="counter-display">0</span>


<button id="increment-btn">Add 1</button>

2. Declaring a State Variable

In our JavaScript file, we declare a variable `count` using `let` because its value needs to change. We initialize it to `0`. This variable will always hold the current count.

// This variable holds the application's state
let count = 0;

3. Connecting JS to HTML

We grab our HTML elements using `document.getElementById` and add an event listener to the button. This tells the browser: "When this button is clicked, run this function."

const display = document.getElementById('counter-display');
const button = document.getElementById('increment-btn');

button.addEventListener('click', () => {
  // 1. Update the variable
  count = count + 1;

  // 2. Update the screen
  display.textContent = count;
});

Practical Takeaway: A variable (count) holds the data, an event (click) triggers a change, and the DOM (display.textContent) is updated to reflect the new data. This is the fundamental pattern of web interactivity.

JavaScript Glossary

Variable: A named container for storing a data value.
Data Type: The classification of a value, which determines how it can be used (e.g., Number, String).
let: A keyword to declare a block-scoped variable that can be reassigned.
const: A keyword to declare a block-scoped variable that cannot be reassigned.
var: The legacy keyword for declaring a function-scoped variable.
String: A data type used to represent text, enclosed in quotes (e.g., `"Hello"`).
Number: A data type for all numeric values, including integers and decimals (e.g., `42`, `3.14`).
Boolean: A data type that can only be `true` or `false`.
Object: A complex data type for storing collections of key-value pairs.
undefined: The default value of a declared variable that has not yet been assigned a value.
null: A value that represents the intentional absence of any object value.