LWC Zero to Hero Module 0 — Programming Basics for Complete Beginners
๐
Hero To Zero LWC
๐ฑ LWC Zero to Hero — Module 0 (Start Here)
Absolute Programming Basics
Before You Touch LWC
Never written code before? This module covers the true fundamentals — variables, data types, conditionals, loops, and functions — using zero jargon, before Module 1 introduces modern JavaScript for LWC.
๐ If you already know basic programming, skip to Module 1 →
๐ฏ Who This Module Is For
This module assumes you have never written a line of code before. Maybe you're a Salesforce Admin who's only clicked through Flow Builder and Setup menus, or you're switching careers entirely. That's exactly who this is for. We'll build up programming concepts from absolute zero — no assumed knowledge — using plain English explanations before any code.
✓ What a variable actually is (with a real-world analogy)
✓ The 6 basic data types every program uses
✓ Operators — math, comparison, and the == vs === trap
✓ Conditionals — making your code make decisions
✓ Loops — making your code repeat work automatically
✓ Functions — packaging code into reusable blocks
✓ Objects & Arrays — the data shapes LWC uses everywhere
๐ก Already comfortable with these concepts in ANY programming language (Java, Python, Apex, even Excel formulas with IF statements)? You likely don't need this module — jump straight to Module 1: Modern JavaScript Essentials for LWC. This module is specifically for people with zero prior programming exposure.
๐ In This Module
Concept 1 of 7
Variables — Storing Information
Think of a variable as a labeled box. You put something inside the box (a name, a number, anything), and you stick a label on it so you can find it again later. In code, "declaring a variable" means creating the box and giving it a label. "Assigning a value" means putting something inside it.
⚡ Why This Matters for LWC
Every single piece of information your component works with — a record's name, whether a button is disabled, a list of orders — lives inside a variable. Understanding variables is understanding the entire foundation of how components "remember" and "track" things.
EXAMPLE
let customerName = "Anant"; // box labeled "customerName" contains "Anant"
let orderCount = 5; // box labeled "orderCount" contains the number 5
let isUrgent = true; // box labeled "isUrgent" contains true/false
// You can change what's in the box later:
orderCount = 6; // the box now contains 6 instead of 5
๐งช Try It Yourself
Open your browser, right-click anywhere on a webpage, choose "Inspect," click the "Console" tab. Type
let myAge = 25; and press Enter. Then type myAge and press Enter again — you'll see 25 printed back. You just created your first variable!⚠️ Common Confusion
A variable name is just a LABEL — it has no meaning to the computer beyond being a way for YOU to refer to that box later.
let bananaCount = 5; and let x = 5; work identically to the computer. Good variable names (bananaCount not x) exist purely to help humans (including future-you) understand the code.Concept 2 of 7
Data Types — The Kinds of Information
Not everything you store in a variable is the same KIND of thing. A name is different from a number, which is different from a yes/no answer. JavaScript has a few basic "types" of data, and knowing them helps you understand what operations make sense (you can add two numbers, but "adding" two true/false values doesn't make sense).
⚡ Why This Matters for LWC
Salesforce field values map directly to these types — a Text field is a String, a Number/Currency field is a Number, a Checkbox is a Boolean. When you pull record data into your component, recognizing these types tells you what you can do with the value.
THE 6 BASIC TYPES YOU'LL USE CONSTANTLY
let name = "Anant Kumar"; // String — text, always in quotes
let age = 28; // Number — no quotes
let isActive = true; // Boolean — only true or false
let middleName = null; // Null — intentionally "nothing"
let nickname; // Undefined — declared but never given a value
let hobbies = ["reading", "coding"]; // Array — an ordered list
let person = { name: "Anant", age: 28 }; // Object — labeled data bundle
๐ ️ Practical Mini-Implementation
Use JavaScript's built-in
If your code is misbehaving and you're not sure why, checking
typeof to check what type something is — genuinely useful for debugging:console.log(typeof age); → prints "number"console.log(typeof name); → prints "string"If your code is misbehaving and you're not sure why, checking
typeof on a suspicious variable often reveals the bug (e.g., you expected a number but it's actually a string like "28" with quotes).⚠️ Common Confusion
"28" (a string) and 28 (a number) LOOK similar but behave completely differently. "28" + "2" gives you "282" (joining text together), while 28 + 2 gives you 30 (actual math). This trips up beginners constantly when pulling numeric values from forms or Salesforce fields, which sometimes arrive as strings.Concept 3 of 7
Operators & Comparisons
Operators are symbols that DO something with your values — math operators (
+ - * /) calculate, comparison operators (> < === !==) compare and give you a true/false answer, and logical operators (&& || !) combine multiple true/false conditions.⚡ Why This Matters for LWC
Every conditional check in your component — "is this field empty," "is the user allowed to edit," "is the total over budget" — relies on comparison and logical operators. Getting
=== vs == wrong is one of the most common sources of subtle bugs.MATH OPERATORS
let total = 10 + 5; // 15 (addition)
let diff = 10 - 5; // 5 (subtraction)
let product = 10 * 5; // 50 (multiplication)
let quotient = 10 / 5; // 2 (division)
COMPARISON OPERATORS — always give true or false
10 > 5 // true (greater than)
10 < 5 // false (less than)
10 === 10 // true (strictly equal — SAME type AND value)
10 === "10" // false (number ≠ string, even though they "look" same)
10 == "10" // true (loose equal — converts types first, AVOID THIS)
10 !== 5 // true (strictly NOT equal)
LOGICAL OPERATORS — combining conditions
isLoggedIn && hasPermission // AND — both must be true
isAdmin || isManager // OR — at least one must be true
!isLoading // NOT — flips true to false, false to true
๐ ️ Practical Mini-Implementation
Checking if a button should be enabled often combines multiple conditions:
This reads almost like English: "can submit if there's a name AND an email AND it's not already submitting."
const canSubmit = hasName && hasEmail && !isSubmitting;This reads almost like English: "can submit if there's a name AND an email AND it's not already submitting."
⚠️ Common Confusion — The Most Important Rule in This Module
ALWAYS use
=== (triple equals, "strict equality") instead of == (double equals, "loose equality"). == tries to convert types to match before comparing, leading to surprising results like 0 == false being true, or "" == false being true. Modern JavaScript style (and LWC's ESLint rules) require === everywhere. Just always type three equals signs and never think about it again.Concept 4 of 7
Conditionals — Making Decisions
Conditionals let your code make decisions: "IF this is true, do this thing. OTHERWISE, do that other thing." This is the single most powerful idea in programming — it's what lets code behave differently depending on the situation, instead of always doing the exact same thing.
⚡ Why This Matters for LWC
"Show this section only if the user is an admin," "display an error message if the field is empty," "highlight the row if the order is overdue" — every piece of dynamic behavior in a component is a conditional, somewhere.
IF / ELSE — the basic decision structure
let orderAmount = 15000;
if (orderAmount > 10000) {
console.log("This requires manager approval");
} else {
console.log("Auto-approved");
}
// Since orderAmount is 15000, it prints "This requires manager approval"
ELSE IF — checking multiple conditions in order
if (orderAmount > 50000) {
tier = "Platinum";
} else if (orderAmount > 20000) {
tier = "Gold";
} else if (orderAmount > 5000) {
tier = "Silver";
} else {
tier = "Bronze";
}
// JavaScript checks each condition top to bottom, stops at the first true one
TERNARY OPERATOR — a shortcut for simple if/else
// Long way:
let message;
if (isUrgent) {
message = "Urgent!";
} else {
message = "Normal";
}
// Ternary shortcut — condition ? ifTrue : ifFalse
let message = isUrgent ? "Urgent!" : "Normal"; // same result, one line
๐ ️ Practical Mini-Implementation
The ternary operator is EXTREMELY common in LWC for computing a CSS class or display text based on a condition:
You'll see this pattern constantly once you start Module 1 onward.
get statusColor() { return this.isOverdue ? 'red' : 'green'; }You'll see this pattern constantly once you start Module 1 onward.
⚠️ Common Confusion
A common beginner mistake is writing
if (isActive == true) when you can just write if (isActive) — if the variable is already a true/false value (Boolean), comparing it to true is redundant. Just use the variable directly inside the parentheses.Concept 5 of 7
Loops — Repeating Work Automatically
Loops let you repeat a block of code multiple times without writing it out manually each time. Instead of writing "print order 1, print order 2, print order 3..." a hundred times for a hundred orders, a loop says "do this for every order in the list" once, and the computer handles the repetition.
⚡ Why This Matters for LWC
Whenever you display a LIST of records — accounts, orders, contacts — something is looping through that data. In LWC templates you'll use a special directive (
for:each, covered in Module 3) which is essentially a loop built into the HTML template. Understanding the looping CONCEPT here makes that click immediately later.FOR LOOP — repeat a specific number of times
for (let i = 0; i < 5; i++) {
console.log(`This is repetition number ${i}`);
}
// Prints: "This is repetition number 0" through "...number 4"
// i starts at 0, runs WHILE i < 5, adds 1 to i (i++) after each loop
LOOPING THROUGH A LIST — the most common use case
let orderAmounts = [100, 250, 75, 500];
for (let i = 0; i < orderAmounts.length; i++) {
console.log(`Order ${i + 1}: $${orderAmounts[i]}`);
}
// Prints: Order 1: $100, Order 2: $250, Order 3: $75, Order 4: $500
WHILE LOOP — repeat until a condition becomes false
let attemptsLeft = 3;
while (attemptsLeft > 0) {
console.log(`You have ${attemptsLeft} attempts left`);
attemptsLeft = attemptsLeft - 1;
}
// Keeps running until attemptsLeft is no longer > 0
๐ ️ Practical Mini-Implementation
A real scenario: calculating the total of multiple order amounts using a loop:
(Spoiler: in Module 4, you'll learn a cleaner way to do this exact thing using array methods like
let total = 0;for (let i = 0; i < orderAmounts.length; i++) { total = total + orderAmounts[i];}console.log(total); // 925(Spoiler: in Module 4, you'll learn a cleaner way to do this exact thing using array methods like
reduce() — but understanding the loop version first makes that shortcut make sense.)⚠️ Common Confusion
Forgetting to update the loop's counter (like forgetting
i++ or attemptsLeft = attemptsLeft - 1) creates an infinite loop — the condition never becomes false, and your code freezes forever. If your browser tab becomes unresponsive after running code, this is the most likely cause.Concept 6 of 7
Functions — Reusable Code Blocks
A function is a named, reusable block of code that you can "call" (run) whenever you need it, as many times as you want. Think of it like a recipe: you write the recipe once ("how to make tea"), and then you can "make tea" anytime by just saying "make tea" — you don't rewrite the whole recipe every time.
⚡ Why This Matters for LWC
Every button click, every form submission, every piece of logic you write in a component lives inside a function. When you click a button in LWC, you're "calling" a function that runs whatever code is inside it. This is the most foundational concept for everything that comes after Module 0.
DEFINING AND CALLING A FUNCTION
// Defining the function (writing the recipe)
function greet(name) {
return `Hello, ${name}!`;
}
// Calling the function (using the recipe)
let message = greet("Anant"); // message is now "Hello, Anant!"
console.log(greet("Priya")); // prints "Hello, Priya!"
// You can call it as many times as you want, with different inputs!
PARAMETERS vs ARGUMENTS
// "name" here is a PARAMETER — a placeholder in the function definition
function calculateDiscount(price, discountPercent) {
return price - (price * discountPercent / 100);
}
// "1000" and "20" here are ARGUMENTS — the actual values you pass in
let finalPrice = calculateDiscount(1000, 20); // finalPrice = 800
๐ ️ Practical Mini-Implementation
Functions that DON'T return anything but DO something (like printing or changing a value) are just as common as ones that calculate and return a result:
This function doesn't
function logOrderSubmission(orderId) { console.log(`Order ${orderId} was submitted at ${new Date()}`);}This function doesn't
return anything — it just performs an action (logging). Both "calculate and return a value" functions and "do an action" functions are extremely common, and you'll write both constantly.⚠️ Common Confusion
A function that doesn't explicitly use
return automatically returns undefined. If you write let result = logOrderSubmission(123); and then try to use result, you'll get undefined — because that function only logs, it never returns anything. Always check whether a function is meant to GIVE BACK a value (needs return) or just DO something (doesn't need it).Concept 7 of 7
Objects & Arrays — The Data Shapes LWC Uses Everywhere
So far we've stored single pieces of information (one name, one number). But real-world data is more complex — a single Account record has a Name, Industry, and Phone all together. An Object bundles related labeled information together. An Array is an ordered LIST of items (which can themselves be objects).
⚡ Why This Matters for LWC
Literally every piece of Salesforce data you'll work with in LWC arrives as objects and arrays. A single Account record is an Object. A list of Accounts (like from a SOQL query) is an Array of Objects. This is THE data shape of Salesforce development — mastering it here makes everything in later modules click immediately.
OBJECTS — bundling related data with labels (keys)
let account = {
Name: "Acme Corporation",
Industry: "Technology",
AnnualRevenue: 5000000,
IsActive: true
};
// Accessing a value using dot notation:
console.log(account.Name); // "Acme Corporation"
console.log(account.Industry); // "Technology"
// Changing a value:
account.AnnualRevenue = 6000000;
ARRAYS — ordered lists of items
let fruits = ["apple", "banana", "orange"];
// Accessing items by position (index) — starts at 0, not 1!
console.log(fruits[0]); // "apple" (the FIRST item)
console.log(fruits[1]); // "banana"
console.log(fruits.length); // 3 (how many items total)
ARRAYS OF OBJECTS — exactly how SOQL query results look!
let accounts = [
{ Name: "Acme Corp", Industry: "Tech" },
{ Name: "Globex Inc", Industry: "Finance" },
{ Name: "Initech", Industry: "Tech" }
];
console.log(accounts[0].Name); // "Acme Corp"
console.log(accounts.length); // 3 accounts total
// Combine with a loop (Concept 5) to go through every account:
for (let i = 0; i < accounts.length; i++) {
console.log(accounts[i].Name);
}
// Prints: Acme Corp, Globex Inc, Initech
๐ ️ Practical Mini-Implementation
This "array of objects" shape is EXACTLY what comes back from an Apex method that runs a SOQL query:
[ {Id: '001...', Name: 'Acme'}, {Id: '001...', Name: 'Globex'} ]. When you reach Module 12 (wire adapters) and Module 13 (Apex integration), you'll recognize this shape immediately — it's the same Object/Array concept you just learned, just arriving from Salesforce instead of being typed manually.⚠️ Common Confusion
Array positions (indexes) start at 0, not 1. The first item is
array[0], the second is array[1], and so on. Trying to access array[array.length] (thinking it's the "last" item) actually gives you undefined — the last item is at array[array.length - 1]. This off-by-one mistake is one of the most common bugs for beginners (and even experienced developers, occasionally!).๐ฌ Module 0 Foundational Check Questions (5)
Q1What is the difference between a variable declared with let and one with const, in plain terms?
Both create a "labeled box" to store a value. The difference is whether you can later put a DIFFERENT value in that same box. With
let, you can reassign the variable later (let count = 5; count = 6; is fine). With const, once you put a value in, you cannot replace it with a different value later (const count = 5; count = 6; would cause an error). Use const by default, and only use let when you know you'll need to change the value later."let allows reassignment later, const locks the variable to its initial value — default to const, switch to let only when you need to change the value."
Q2Why should you always use === instead of == when comparing values in JavaScript?
=== ("strict equality") checks both the VALUE and the TYPE must match exactly. == ("loose equality") tries to convert the types to match first, which leads to confusing and sometimes wrong results — for example, 0 == false evaluates to true, and "" == false also evaluates to true, even though intuitively these seem like different things. Using === avoids these surprises entirely by never doing hidden type conversion."=== checks both type and value with no hidden conversion, avoiding surprising bugs that == can cause — always use === in modern JavaScript."
Q3What's the difference between an Array and an Object, and when would you use each?
An Array is an ORDERED LIST of items, accessed by their numeric position (index), starting at 0 — use it when you have a collection of similar things in a sequence, like a list of order amounts or a list of account records. An Object is a BUNDLE of related but different pieces of information, accessed by named labels (keys) — use it when you have one "thing" with multiple properties, like a single Account with a Name, Industry, and Revenue. In practice, you'll often combine them: an Array OF Objects, like a list of Account records, each one being an Object with its own Name/Industry/Revenue.
"Arrays are ordered lists accessed by numeric position for collections of similar items; Objects are labeled bundles of related properties for a single 'thing' — Salesforce record lists are typically Arrays of Objects."
Q4What happens if you forget to update the loop counter in a while loop, and why is this dangerous?
If the condition that controls a while loop never becomes false (because the counter or controlling variable never changes), the loop runs forever — this is called an "infinite loop." It's dangerous because it will freeze or crash your browser tab (or in other environments, consume server resources indefinitely) since the code never reaches a stopping point. The fix is always ensuring something inside the loop body changes the condition's outcome eventually — like incrementing a counter or modifying the variable being checked.
"Forgetting to update the loop's controlling variable causes an infinite loop that never stops, freezing the browser — always ensure something inside the loop changes the condition toward becoming false."
Q5If a function doesn't have a return statement, what value do you get if you try to use its result?
You get
undefined. Every function in JavaScript returns SOMETHING — if you don't explicitly write a return statement, the function automatically returns undefined when it finishes running. This is different from a function that explicitly does return null; or return 0; — those are deliberate values, while undefined usually signals "this function wasn't designed to give back a usable result," often because its purpose is to perform an action (like logging or updating something) rather than calculating a value."A function without an explicit return statement automatically returns undefined — this is expected for action-performing functions but can cause bugs if you mistakenly try to use the result as if it were a calculated value."
๐ Module 0 Recap — Your Programming Foundation
✅ Variables are labeled boxes that store information you can reference and change later
✅ Data types (String, Number, Boolean, Null, Undefined, Array, Object) describe what KIND of information you're storing
✅ Operators do math, comparisons (always use ===), and combine conditions (&&, ||, !)
✅ Conditionals (if/else, ternary) let code make decisions and behave differently based on data
✅ Loops (for, while) repeat work automatically instead of writing repetitive code manually
✅ Functions package code into named, reusable, callable blocks — the foundation of everything in LWC
✅ Objects & Arrays are the data shapes that Salesforce records and record lists ALWAYS arrive in
๐ฏ You're Ready for Module 1 When...
You can read a snippet of code with variables, an if/else, a loop, and a function, and explain in plain English what it's doing — even if you couldn't write it from scratch yet. That's the bar for "ready." Module 1 builds on every single concept here, just with more modern, compact JavaScript syntax (the kind LWC code actually uses).
← This is Module 0 (the very first one!)
Module 1: Modern JavaScript Essentials →
☕
☕ Enjoyed this article?
SF Interview Pro is 100% free and maintained by a Salesforce professional. No ads, no paywalls, and no signup required. If this guide helped you prepare for an interview, earn a certification, or grow your Salesforce career, consider buying me a coffee! ☕๐
rajnishrk264@ybl
Scan with GPay, PhonePe, Paytm, or BHIM
๐ Keep Preparing
New interview questions every week ๐
Follow for fresh Salesforce Q&A, free courses, and real interview experiences — straight from the trenches.
๐ฅ Follow on LinkedIn