In web development, a variable is a foundational container used to store data values that your website can use, change, or update dynamically. Think of a variable as a labeled storage box. If you want your website to remember a visitor's name, their current shopping cart score, or whether they are logged in, you pack that data into a memory box and slap a clean label on it.
While Python lets you create variables by just typing their name, JavaScript requires you to explicitly declare that you are creating a new variable using special keyword keywords. JavaScript is also a **dynamically typed language**, meaning a single box can hold numbers, text strings, or logical states without you needing to pre-define the data type layout.
Modern JavaScript provides three unique keywords to create storage containers. Choosing the right keyword dictates how your data can behave over time:
let — Used for variables whose values are expected to change or vary later (like a player's score or a countdown timer).
const — Short for *constant*. Use this for values that should be securely locked and can never be overwritten (like a math tax rate or a database server URL).
var — The old, legacy keyword from early web development. It is highly recommended to **avoid using var** in modern projects because it causes accidental bugs due to loose structural rules.
// Declaring changeable and constant data streams
let digitalScore = 250;
const frameworkName = "JavaScript";
// Outputting the information directly to the browser console
console.log(digitalScore);
console.log(frameworkName);Let's look at exactly what happens inside your browser's V8 engine layout when the script above runs:
let digitalScore = 250; — The keyword let tells the browser to allocate a fresh, mutable memory slot. It maps the label digitalScore to that slot and populates it with the integer 250. Note the trailing semicolon ; used to end statements cleanly.
const frameworkName = "JavaScript"; — This establishes an immutable constant block. Because it uses double quotes around "JavaScript", the browser processes it as a String data type and locks the container from any future adjustments.
console.log() — This is JavaScript's version of Python's print() function. It pushes whatever data is held inside the targeted variable straight to your browser's inspect element console tool window.
If you declared a variable using the let keyword, you can easily alter its interior contents as your application logic runs. However, notice that when you overwrite a variable, you **do not** re-type the keyword!
let userTokens = 10;
console.log(userTokens); // Outputs: 10
// Updating the value (No 'let' keyword needed here!)
userTokens = 35;
console.log(userTokens); // Outputs: 35
// Modifying the variable relative to itself
userTokens = userTokens + 5;
console.log(userTokens); // Outputs: 40Web browsers are strict when compiling script logic. Watch out for these common beginner errors to keep your code running cleanly:
const (e.g., writing frameworkName = "React";), your browser will halt execution entirely and throw a severe TypeError: Assignment to constant variable crash warning.
totalUserAge). Spaces, hyphens, and starting labels with numbers are strictly illegal.
ReferenceError.
Let's write some frontend script logic! Open your code editor and attempt this challenge:
Create a mutable variable named websiteViews using the correct keyword and assign it an initial number.
On the next line, update the variable by adding 100 to its current value.
Finally, create a constant variable named developerName, set it to your name as a string, and pass both variables to console.log() statements.