Variables are named containers for storing data in memory, and JavaScript gives you let and const to declare them (with var as the legacy alternative). This lesson covers the core primitive types — strings, numbers, booleans, undefined, and null — plus template literals and what it means for JavaScript to be dynamically typed.
1Variables & Types in JavaScript Part 1
Welcome to Data Types & Variables. Variables are the foundation of programming—they are containers in your computer's memory where you can store data for later use.
// Variables: The Containers of LogicVariables & Data Types
2Variables & Types in JavaScript Part 2
Modern JavaScript uses 'let' and 'const'. Use 'let' for values that will change, and 'const' for values that stay the same (constants).
let score = 0;
const MAX_SCORE = 100;let vs const
3Variables & Types in JavaScript Part 3
Historically, JS used 'var', but it's now deprecated because it doesn't follow 'Block Scope'. Stick to let and const for modern, bug-free code.
// ❌ var is legacy
// ✅ let and const are modernLegacy var
4Variables & Types in JavaScript Part 4
JavaScript has 'Primitive Types'. The most common is the String (text), wrapped in quotes.
let name = 'Neo';
let message = "Hello World";Strings
5Variables & Types in JavaScript Part 5
Numbers in JS can be integers or decimals. They don't need quotes—if you put quotes around a number, it becomes a string!
let age = 25;
let price = 19.99;Numbers
6Variables & Types in JavaScript Part 6
Booleans are simple: they can only be 'true' or 'false'. They are the foundation of decision-making in code.
let isGameOver = false;
let isWinner = true;Booleans
7Variables & Types in JavaScript Part 7
Special values: 'undefined' means a variable is declared but empty. 'null' is an intentional empty value you assign to say 'nothing is here'.
let mystery; // undefined
let empty = null; // nullUndefined vs Null
8Variables & Types in JavaScript Part 8
JavaScript is 'Dynamically Typed'. This means a variable can start as a number and later become a string. (Though this is usually bad practice!)
let data = 10;
data = 'Ten'; // Allowed in JSDynamic Typing
9Variables & Types in JavaScript Part 9
Watch the render. See how different data types occupy different spots in memory and how 'const' protects your data from being accidentally overwritten.
Memory Visualization
10Variables & Types in JavaScript Part 10
Template Literals: Using backticks (`) allows you to inject variables directly into strings using ${} syntax. It's much cleaner than adding strings together.
let name = 'Neo';
console.log(`Hello, ${name}!`);Template Literals
11Variables & Types in JavaScript Part 11
You've mastered the building blocks of data. You can now store text, numbers, and logic states securely in your programs.
console.log('Data Structures Ready');Data Structures Ready
12Variables & Types in JavaScript Part 12
Variables mastered! Now let's learn how to perform math and logic with Operators.
On to Operators
13Step-by-Step Breakdown
Welcome to Data Types & Variables. Variables are the foundation of programming—they are containers in your computer's memory where you can store data for later use.
Modern JavaScript uses 'let' and 'const'. Use 'let' for values that will change, and 'const' for values that stay the same (constants).
Historically, JS used 'var', but it's now deprecated because it doesn't follow 'Block Scope'. Stick to let and const for modern, bug-free code.
Checkpoint: Which keyword should you use for a value that will NEVER be reassigned?
- →let
- →const
JavaScript has 'Primitive Types'. The most common is the String (text), wrapped in quotes.
Numbers in JS can be integers or decimals. They don't need quotes—if you put quotes around a number, it becomes a string!
Booleans are simple: they can only be 'true' or 'false'. They are the foundation of decision-making in code.
Checkpoint: What is the type of a variable that hasn't been assigned a value yet?
- →null
- →undefined
Special values: 'undefined' means a variable is declared but empty. 'null' is an intentional empty value you assign to say 'nothing is here'.
JavaScript is 'Dynamically Typed'. This means a variable can start as a number and later become a string. (Though this is usually bad practice!)
Watch the render. See how different data types occupy different spots in memory and how 'const' protects your data from being accidentally overwritten.
Checkpoint: Which of these is a Boolean value?
- →'true'
- →true
Template Literals: Using backticks (`) allows you to inject variables directly into strings using ${} syntax. It's much cleaner than adding strings together.
You've mastered the building blocks of data. You can now store text, numbers, and logic states securely in your programs.
Variables mastered! Now let's learn how to perform math and logic with Operators.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Boolean State Variables Need a Visible or Announced Equivalent in the UI
A variable like isMenuOpen or isLoading only exists in JavaScript memory — assistive technology has no way to know about it unless that state is reflected in the DOM through attributes like aria-expanded or aria-busy, or through visible text.
menuButton.setAttribute('aria-expanded', String(isMenuOpen));SEO Implications
- 1
Type Coercion Bugs Can Produce Incorrect Content Shown to Users and Crawlers
JavaScript's dynamic typing means a value fetched from an API as a string (e.g. '0') is truthy even though it represents a falsy-looking number, which can cause conditional rendering logic to show or hide content incorrectly — leading to inconsistent page content between what's intended and what actually gets indexed.
Best Practices
Default to const, Only Use let When Reassignment Is Necessary
Declaring everything with const by default makes it immediately obvious, just from reading the declaration, which variables are expected to change later and which are not — this makes code easier to reason about and prevents accidental reassignment bugs.
Never Compare Against a Stringified Number Without Converting First
Because JavaScript is dynamically typed, a value like '42' (string) and 42 (number) are different types even though they look the same. Use Number() or parseInt() to convert user input or API responses to actual numbers before doing math or numeric comparisons on them.
Frequent Bugs
A value that should be a number behaves like text when used in a calculation (e.g. '5' + 5 produces '55' instead of 10).
The + operator concatenates when either operand is a string instead of adding, because JavaScript coerces the number to a string. Explicitly convert with Number(value) or parseInt(value, 10) before doing arithmetic on data that might have come in as text (like form input or JSON).
Real-World Examples
Building a User Greeting with Template Literals
A dashboard needed to display a personalized welcome message built from a user's name and their current unread notification count, both stored in variables.
const userName = 'Pascual';
const unreadCount = 3;
const greeting = `Welcome back, ${userName}! You have ${unreadCount} new notifications.`;