Variables, data types, operators, and control structures are the fundamental building blocks of any programming language.
Variables are used to store data values that can change during program execution, while data types define the kind of data a variable can hold, such as numbers, text, or logical values.
Operators allow programs to perform calculations, comparisons, and logical operations on data.
Control structures, such as conditional statements and loops, determine the flow of execution by deciding which code runs and how many times it repeats.
JavaScript Variables (ES6+ Best Practices)
Variables store data that can change during program execution, acting as labeled containers for your values.
Modern JavaScript favors let and const over outdated var for better scoping and bug prevention. Understanding variable declaration patterns is crucial for writing maintainable code.
Variable Declaration Keywords
JavaScript offers three ways to declare variables, each with specific use cases and scoping rules.
Practical Example:
const siteName = "My Portfolio"; // Never changes
let userScore = 0; // Updates during game
userScore = userScore + 10; // Reassignment works
// siteName = "New Name"; // Error! const can't changeBest Practices for Naming and Declaration
1. Use camelCase for variable names (userScore, totalPrice)
2. Declare all variables at the top of blocks for readability
3. Prefer const by default; switch to let only when reassignment needed
4. Avoid global variables—use strict mode: 'use strict';
Real-World Tip: In React components, const dominates since state updates use setState() functions.
JavaScript Data Types
JavaScript is dynamically typed—variables can hold any data type without declaration.
Understanding the 8 primitive types and objects forms the foundation for all data manipulation. Modern browsers handle type coercion smartly, but explicit checking prevents bugs.
Primitive Data Types
Primitives are immutable basic values passed by value.
Type Checking Examples:
typeof "Hello" // "string"
typeof 42 // "number"
typeof null // "object" (historical bug)
typeof undefined // "undefined"Objects and Complex Data
Objects store key-value pairs and enable complex data structures.
Common Object Patterns
const user = {
name: "Jane",
age: 28,
isAdmin: true,
skills: ["JS", "CSS", "HTML"]
};
console.log(user.name); // "Jane" - dot notation
console.log(user['age']); // 28 - bracket notationArrays as Special Objects:
const projects = ["Portfolio", "Todo App", "Weather App"];
projects.push("Calculator"); // Adds to end
console.log(projects[0]); // "Portfolio"Operators in JavaScript
Operators perform operations on variables and values, from basic math to complex comparisons.
JavaScript's operator precedence follows standard math rules (PEMDAS), but parentheses always clarify intent. Mastering operators enables concise, readable expressions.
Arithmetic and Assignment Operators
Arithmetic:
+ Addition/concatenation
- Subtraction
* Multiplication
/ Division
% Modulo (remainder)
** Exponentiation (ES2016+)
Assignment Shortcuts
let score = 100;
score += 10; // score = score + 10 (110)
score *= 2; // score = score * 2 (220)
score++; // score = score + 1 (221)Logical Operators and Truthiness
Logical operators control flow based on conditions.
1. && AND (both true)
2. || OR (either true)
3. ! NOT (inverts)
Truthy/Falsy Values
if (userInput) { // Truthy: non-empty strings, non-zero numbers
console.log("Valid input");
}
// Falsy: "", 0, null, undefined, NaN, falseShort-circuit Evaluation:
const name = user.name || "Guest"; // Uses "Guest" if user.name falsyControl Structures and Flow Control
Control structures dictate program execution path based on conditions or repetition needs.
They replace lengthy if-else chains with clean, readable logic. ES6+ introduced cleaner alternatives like nullish coalescing (??).
Conditional Statements
If/Else Chains:
let score = 85;
if (score >= 90) {
grade = "A";
} else if (score >= 80) {
grade = "B";
} else {
grade = "C";
}Switch Statement (cleaner for multiple conditions):
switch (day) {
case "Monday":
console.log("Start of work week");
break;
case "Friday":
console.log("TGIF!");
break;
default:
console.log("Midweek");
}Ternary Operator (one-liner conditions):
const grade = score >= 60 ? "Pass" : "Fail";Loops for Repetition
Loops automate repetitive tasks efficiently.
1. for loop: Known iteration count
for (let i = 0; i < 5; i++) {
console.log(`Project ${i + 1}`);
}2. while/do-while: Condition-based
let attempts = 0;
while (attempts < 3) {
attempts++;
console.log("Trying...");
}3. for...of (ES6+ arrays): Modern array iteration
for (const skill of skills) {
console.log(skill);
}Performance Note: Use for...of over forEach() for better performance in 2025 V8 engines.
Practical Example: Building a Simple Calculator
Let's combine everything into a working calculator:
const calculator = {
display: document.querySelector('#display'), // DOM preview
calculate(expression) {
const numbers = expression.split(/[\+\-\*\/]/); // String splitting
const operators = expression.match(/[\+\-\*\/]/g);
let result = parseFloat(numbers[0]); // Number conversion
for (let i = 0; i < operators.length; i++) {
const nextNum = parseFloat(numbers[i + 1]);
switch (operators[i]) {
case '+': result += nextNum; break;
case '-': result -= nextNum; break;
case '*': result *= nextNum; break;
case '/':
if (nextNum === 0) return "Error: Division by zero";
result /= nextNum;
break;
}
}
return result;
}
};This example uses variables, types, operators, and all three control structures.
Class Sessions
Sales Campaign
We have a sales campaign on our promoted courses and products. You can purchase 1 products at a discounted price up to 15% discount.