JavaScript Fundamentals

🎯Learning Objectives

• Level 13 arranged content with CSS.
• This lesson adds decisions and calculations with JavaScript.
• You will declare variables, identify value types, evaluate expressions, convert text deliberately, compare values, and write small conditions, loops and functions.

• Our running task is a workshop seat check: read the available seats and reserved seats, validate the input and calculate the remaining places.
• The important skill is explaining each step, including why text from a form cannot simply be treated as an already validated number.

🧩HTML, CSS and JavaScript — Three Roles

• HTML gives the workshop page meaningful structure.
• CSS arranges and styles its cards.
• JavaScript can calculate remaining seats, react to an action and update feedback.
• These roles cooperate: JavaScript does not replace a native button or make an unclear page understandable by itself.

• JavaScript and Java are different languages.
• The similar names do not mean the same syntax, runtime or type system.
• This lesson uses JavaScript in a browser; some of the same language features also run in environments such as Node.js.

• Keep useful learning content in the document even when scripting is unavailable.
• Add behavior to meaningful controls rather than making a styled paragraph pretend to be a button.

🌐Language and Runtime — Know Where Code Runs

• The JavaScript language defines values, expressions, functions and control flow.
• A browser supplies additional facilities such as document, event handling and developer tools.
• Console is supplied by common runtimes rather than being an ECMAScript language keyword.

• A page script normally runs with the page’s environment.
• Node.js supplies a different environment and does not provide a page document by default.
• If a browser example uses document.getElementById, copying it into a plain Node program is not enough to create a webpage.

• Use the browser console for small trusted experiments.
• A console log is a diagnostic output, not automatically visible lesson content.
• A real user-facing result should appear in an appropriate page element.

const seats = 30;
const reserved = 12;
console.log(seats - reserved); // 18

• This pure calculation does not need document.
• The later DOM lesson will develop element selection and events in detail; here we concentrate on the values and logic behind the result.

📜Load a Script Deliberately

• For a classic external script that needs the parsed HTML, defer is a useful loading choice.
• The browser can fetch the file while parsing, then execute deferred classic scripts after parsing and before DOMContentLoaded.
• Deferred classic scripts execute in document order.

• Async serves a different purpose: it does not promise document order or wait for parsing in the same way.
• Avoid choosing it for two dependent page scripts simply because the word sounds faster.
• Module scripts have their own rules and are deferred by default; modules are beyond this introduction.

<script src="workshop.js" defer></script>

• Put this element in the page head and keep the file path correct.
• If the behavior is absent, inspect the Network panel for a failed request and the Console for an error.
• The defer attribute is intended for external classic scripts; it is not a repair for inline code placed before the elements it uses.

• Do not paste unfamiliar code into a console or run downloaded scripts merely to test a tutorial.
• All examples in this lesson are small and explained.

✍️Statements, Expressions and Comments

• An expression produces a value, such as seats - reserved.
• A statement performs an action or controls execution, such as a declaration or an if statement.
• A declaration can contain an expression that supplies its initial value.

• JavaScript is case-sensitive: remaining and Remaining are different names.
• Choose names that explain the role of a value.
• Comments explain intent; they should not contradict what the code actually does.

• This lesson writes semicolons explicitly.
• Automatic semicolon insertion exists, but it is not a reason to put a return value on a new line and assume the result is unchanged.

const seats = 30; // total workshop capacity
let reserved = 12;
reserved = reserved + 3;
const remaining = seats - reserved;
console.log(remaining); // 15

• Trace in order: reserved begins as 12, is reassigned to 15, then remaining receives 30 - 15.
• Reassigning reserved after that calculation would not automatically recalculate remaining.
• A stored result is not a spreadsheet formula linked to the other bindings.

📦let and const — Binding Rules

• Use const when the binding should not be reassigned.
• Use let when a later assignment is part of the intended algorithm.
• Both are block-scoped.
• A const declaration needs an initializer; a let binding declared without one starts with undefined after its declaration executes.

• Const does not freeze an object or an array.
• It prevents assigning a different value to the binding.
• Changing an allowed property of the object is a separate operation.
• Var has older function-scoping behavior and is useful to recognize, but our new examples use let and const.

• A let or const binding cannot be safely read before its declaration executes in its scope.
• The interval before initialization is often called the temporal dead zone; an early access throws ReferenceError.
• Do not describe it as automatically yielding undefined.

const workshop = { seats: 30 };
workshop.seats = 32; // allowed property update
// workshop = { seats: 40 }; // TypeError if executed

let reserved = 12;
reserved = 15; // allowed reassignment

Keep reassignment and mutation separate when explaining this example. Object handling will be developed in Level 15.

🏷️Values Have Types

• JavaScript is dynamically typed: a let binding can hold values of different types over time.
• Each value still has a type that affects an operation.
• The string "12" is different from the number 12 even when both look similar on a screen.

• Primitive types include string, number, boolean, undefined, null, bigint and symbol.
• Objects form another major category; arrays and functions are objects with specialized behavior.
• This lesson focuses on ordinary strings, numbers, booleans and missing-value cases.

• Number commonly represents both integer and fractional numeric values.
• It uses binary floating-point, so not every decimal fraction is represented exactly.
• BigInt handles integers differently and is not interchangeable with Number in every operation.

const label = "Workshop";
const seats = 30;
const full = false;
let note; // undefined
const selectedSession = null;

🔎typeof — Useful, with Limits

• Typeof produces a string describing the operand’s type category.
• It helps explain an unexpected expression, but it is not a complete validation function.
• Typeof NaN is "number" even though NaN is not a usable finite result for the seat calculation.

• Typeof null is historically "object".
• That result does not make null an ordinary object you can safely read properties from.
• Arrays also report "object"; use Array.isArray when an actual array test is needed.
• Functions report "function".

typeof "12";       // "string"
typeof 12;         // "number"
typeof false;      // "boolean"
typeof undefined;  // "undefined"
typeof null;       // "object"
typeof NaN;        // "number"

• For a value expected to be a finite Number, Number.isFinite checks both the type and finiteness without first converting a string.
• Number.isFinite("12") is false.
• Explicit conversion and validation are separate decisions.

🧮Arithmetic and Evaluation Order

• Arithmetic operators include +, -, *, /, ** and %.
• The percent operator computes a remainder; calling it mathematical modulo can be misleading for negative operands.
• Use parentheses when grouping is part of the meaning you want to communicate.

• Multiplication has higher precedence than addition.
• Assignment stores the evaluated result in a binding.
• Increment and decrement change a binding; prefix and postfix forms produce different expression values, so begin with clear standalone updates.

• The + operator can concatenate strings as well as add numbers.
• Most other basic arithmetic operators can also convert operands, but relying on surprise conversions makes input handling harder to explain.

2 + 3 * 4;     // 14
(2 + 3) * 4;   // 20
17 % 5;        // 2
-17 % 5;       // -2
2 ** 3;        // 8

let reserved = 12;
reserved += 3; // 15

• For approximate measurements, a tiny floating-point difference may be expected: 0.1 + 0.2 is not exactly 0.3.
• Our seat count is restricted to small integers; currency or scientific computations require a deliberate representation and rounding policy.

🔤Strings, Concatenation and Templates

• A string stores text.
• Single quotes, double quotes and backticks offer different literal syntax.
• Template literals use backticks and interpolate expressions inside ${...}; they are convenient for a readable message.

• If one operand is a string after the relevant conversion steps, + concatenates instead of doing ordinary numeric addition.
• "30" + "12" produces "3012".
• Converting after the concatenation cannot reconstruct the sum you intended.

const seatsText = "30";
const reservedText = "12";
console.log(seatsText + reservedText); // "3012"

const remaining = 18;
const message = `Remaining seats: ${remaining}`;
console.log(message); // Remaining seats: 18

• String length counts UTF-16 code units, so it is not always the number of user-perceived characters.
• For this lesson’s numeric input, the important distinction is text versus Number, not an advanced character-counting algorithm.

🔄Conversion and Validation Are Different

• An HTML input’s value is a string.
• Number converts a whole string according to numeric conversion rules.
• Number("12") becomes 12, while Number("12 seats") becomes NaN.
• Number("") and Number(" ") become 0, so conversion alone does not prove that a learner entered a value.

• ParseInt can read an initial integer part: parseInt("12 seats", 10) produces 12.
• That behavior can be useful in another task but is unsuitable if the whole seat-count field must be valid.
• Decide which format is acceptable before choosing a parser.

• For this workshop, accept decimal digits only, convert them, require a safe integer in the range 0–1000, and require reserved not to exceed capacity.
• The range is a teaching policy, not a JavaScript language limit.
• Zero is a valid entry; blank text is not.

function readSeatCount(text) {
  const trimmed = text.trim();
  if (!/^\d+$/.test(trimmed)) return null;
  const value = Number(trimmed);
  if (!Number.isSafeInteger(value) || value > 1000) return null;
  return value;
}

• Null here means invalid under our function’s contract.
• The caller must check it explicitly.
• Do not use if (!value) to reject a seat count, because that would also reject the valid Number 0.

⚖️Assignment, Strict Equality and Loose Equality

• The single equals sign assigns.
• Strict equality, ===, compares without converting different operand types to match.
• Loose equality, ==, follows coercion rules that can match differently typed values.
• Use strict equality in new beginner examples when you want the type distinction to remain visible.

• Both strict equality and loose equality have rules beyond a simple slogan.
• NaN is not equal to itself using either operator.
• Objects are compared by identity rather than by automatically comparing all properties.
• A complete sameness discussion belongs after these basics.

"12" === 12; // false: different types
"12" == 12;  // true: coercion in this case
12 === 12;   // true
NaN === NaN; // false

let remaining = 18;
remaining = 0; // assignment, not a comparison

• In an if condition, an accidental assignment can change data and then test the assigned value.
• Inspect the operator carefully when a branch behaves unexpectedly.
• For NaN checks, use Number.isNaN on an already converted Number.

💡Truthiness and Logical Operators

• Conditions can convert a value to boolean.
• Falsy values include false, 0, -0, 0n, the empty string, null, undefined and NaN.
• An ordinary non-empty string such as "0" or "false" is truthy.
• The string’s spelling does not make it the corresponding boolean value.

• The && and || operators short-circuit and return one of their operands; they do not always produce a boolean.
• The ! operator produces a boolean negation.
• The ?? operator uses its fallback only for null or undefined, so it can preserve a useful zero.

Boolean("0"); // true
Boolean(0);   // false

const remaining = 0;
remaining || 10; // 10: zero is falsy
remaining ?? 10; // 0: zero is not null or undefined

• A default of ten remaining seats would be wrong when the real result is zero.
• Match the fallback operator to the missing-value policy.
• For a numeric range check, compare the numeric value explicitly rather than relying only on truthiness.

🧭Control Flow — Conditions and Bounded Loops

• An if/else statement selects a branch from a condition.
• Check invalid values before the main calculation.
• Keep mutually exclusive outcomes clear: invalid input, overbooked capacity, full workshop, or available seats.

• A loop repeats a body while its control rules permit another iteration.
• A for loop states its initialization, condition and update together.
• Think about the first value, final accepted value and what changes each time.
• A loop whose condition never becomes false can freeze the page.

const remaining = 3;
if (remaining === 0) {
  console.log("Workshop full");
} else {
  console.log(`${remaining} seats available`);
}

for (let seat = 1; seat <= 3; seat += 1) {
  console.log(`Seat ${seat}`);
} // Seat 1, Seat 2, Seat 3

• For this loop, seat begins at 1, the condition permits 1, 2 and 3, and the next update makes it 4 so the body stops.
• Changing <= to < would omit Seat 3.
• Start with a small bounded count before using a user-provided loop limit.

🛠️Functions — Inputs, Return Values and Scope

• A function packages a task.
• Parameters name incoming values; arguments are the actual values supplied at a call.
• Return gives a result to the caller and ends that function invocation.
• Console.log prints a diagnostic message and is not a substitute for returning the result.

• A function that reaches its end without an explicit returned value yields undefined.
• Put the return expression on the same line as return in these beginner examples.
• A local binding belongs to its applicable scope rather than automatically becoming a global page variable.

function remainingSeats(capacity, reserved) {
  return capacity - reserved;
}
const result = remainingSeats(30, 12);
console.log(result); // 18

• This function assumes already validated numeric arguments.
• It does not read or validate an HTML input by itself.
• Keep those assumptions visible rather than claiming a two-line subtraction function handles every user entry.

• Arrow functions offer another function syntax, such as const double = value => value * 2.
• Learn the task and return behavior first; different syntaxes also have differences such as their handling of this, which later lessons will cover.

🧪Premium Interactive — Values and Seat-Count Lab

• Choose one of six explained operations and supply two text values.
• The lab uses real, fixed JavaScript operations; it does not execute arbitrary pasted code.
• The expression and result are displayed as text.
• A and B start as strings, just as values read from ordinary inputs do.

• Compare string concatenation with explicit numeric addition.
• The equality examples compare string A with Number(B), which makes the type distinction visible.
• The truthiness example uses A only.
• The final scenario validates decimal seat counts and reports the remaining capacity.

• Blank text is useful for the conversion experiment: Number("") is 0.
• In the seat-count scenario, blank text is rejected.
• General numeric addition requires finite converted values; the seat scenario has the stricter integer, range and relationship rules explained above.

🛠️Debugging — Find the First Wrong Assumption

• A SyntaxError indicates a parsing problem, such as an unmatched bracket.
• A ReferenceError can indicate an unknown identifier or a binding accessed too early.
• A TypeError can arise from an operation inappropriate for the value, such as reading a property from null.
• Read the first relevant message and its location before editing unrelated CSS.

• If addition creates 3012, check whether both operands are strings.
• If a zero count is rejected, look for a truthiness check that treats zero as missing.
• If a function call returns undefined, inspect its return path rather than assuming the console output was returned.

• After a correction, repeat the case that failed and one neighboring case.
• For the workshop, capacity 30/reserved 12 should give 18; capacity 30/reserved 30 should report full; capacity 30/reserved 31 should be rejected.

💬Interview Questions — Flip to Explain

❓MCQ Practice — Predict Before Running

💻Extra Practice — Specific Inputs and Expected Results

📌Quick Revision

📖Glossary — Flip to Learn

🏆Final Challenge — Explain a Workshop Seat Check

• Write a small program that accepts two text values under the lesson’s decimal-digit policy.
• Return a clear error for blank or malformed input, values above 1000, or reserved seats exceeding capacity.
• Otherwise calculate the remaining count and select either “Workshop full” or a message with the available count.

• Separate a readSeatCount helper from the arithmetic and reporting decisions.
• Check null explicitly so the valid zero survives.
• Use const where a binding is not reassigned, strict equality for the full check and a template literal for the available message.

• Test 30/12 → 18 available, 30/30 → full, 0/0 → full, blank/0 → rejected, 30/31 → rejected, 30/2.5 → rejected and 1001/0 → rejected.
• Explain the rejection stage, not just the final printed word.

• Success criterion: predict the value and type at each stage, demonstrate a meaningful return value, preserve zero correctly and explain a loop boundary.
• Level 15 will extend these foundations to arrays, objects and practical data logic.