Interactive Code Execution Environment
You should be comfortable with HTML structure (Unit 2). JavaScript manipulates the DOM, so knowing <div>, <p>, <button>, and <input> elements is essential. Review Unit 2 if needed.
JavaScript is a client-side scripting language. This means the code runs directly on the user's hardware (in the browser), not on the university's web server. It provides the "behavior" to HTML's "structure."
let, const, var).String ("Hello"), Number (42 or 3.14), Boolean (true/false), and Undefined (a variable declared but not assigned)."5" + 2 results in the string "52", but "5" - 2 results in the number 3). Explicit conversion uses Number("5") or String(5).var vs let
var is function-scoped and hoisted; let is block-scoped. Using var inside a loop creates one shared variable, while let creates a new binding per iteration. Always prefer let (or const) over var.
| Operator Type | Examples | Precedence / Purpose |
|---|---|---|
| Arithmetic | +, -, *, /, % (Modulus) | Math operations. * and / execute before + and - (BODMAS rule). |
| Comparison | ==, ===, >, <=, != | Returns a Boolean. Always use === (strict equality) as it checks both value AND data type. |
| Logical | && (AND), || (OR), ! (NOT) | Used to combine multiple conditions in a control flow statement. |
(). If it resolves to true, the code block inside the braces {} executes.
let marks = 75;
let grade;
if (marks >= 80) {
grade = 'A';
} else if (marks >= 60) {
grade = 'B';
} else if (marks >= 40) {
grade = 'C';
} else {
grade = 'F';
}
console.log("Grade:", grade);The switch statement evaluates an expression and executes code blocks matching the case value. It is cleaner than multiple if/else if chains when comparing a single value against many possibilities.
Each case ends with break to prevent "fall-through" (execution continuing to the next case). Without break, all subsequent cases execute until a break or end of switch.
let day = 3;
let dayName;
switch (day) {
case 1:
dayName = "Monday";
break;
case 2:
dayName = "Tuesday";
break;
case 3:
dayName = "Wednesday";
break;
case 4:
dayName = "Thursday";
break;
case 5:
dayName = "Friday";
break;
case 6:
dayName = "Saturday";
break;
case 7:
dayName = "Sunday";
break;
default:
dayName = "Invalid day";
}
console.log(dayName);Type coercion is JavaScript's automatic conversion of one data type to another. Understanding it prevents bugs.
== vs ===
Always use === (strict equality). The loose == coerces types, causing 0 == false to be true and "" == 0 to be true. This is a leading source of bugs in student code.
break in Switch
Without break, execution "falls through" to the next case. If day = 3 and case 3 has no break, it executes case 4, 5, 6, and 7 as well. Always end each case with break;
() Grouping → ! NOT → * / % Multiply/Divide/Mod → + - Add/Subtract → < > <= >= Comparison → === !== == != Equality → && AND → || OR → = Assignment
for loop is used when you know exactly how many times to iterate. It contains three parts: initialization, condition, and increment.
while loop is used when you want to iterate as long as a condition remains true, usually when the total number of iterations is unknown beforehand.
break immediately exits the entire loop. continue skips the current iteration and jumps to the next one.
Click step to execute the loop cycle one phase at a time.
do { /* code */ } while (condition);
// For loop (known iterations)
for (let i = 0; i < 3; i++) {
console.log("Iteration: " + i);
}
// While loop (condition-based)
let j = 0;
while (j < 3) {
console.log("While iteration: " + j);
j++;
}JavaScript moves variable and function declarations to the top of their scope before execution. var declarations are hoisted (value = undefined), let/const are hoisted but not initialized (Temporal Dead Zone):
console.log(x); // undefined (var hoisted, not assigned) var x = 5; console.log(y); // ReferenceError: Cannot access before initialization let y = 5;
Function declarations are fully hoisted — you can call them before the definition line:
greet(); // "Hello!" — works
function greet() { console.log("Hello!"); }
Function expressions are NOT hoisted (they follow variable hoisting rules).
A closure is created when a function retains access to its outer (enclosing) scope even after the outer function has returned. This is one of JavaScript's most powerful features:
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
The inner function "closes over" the count variable — it persists in memory as long as counter exists. This enables data encapsulation, factory functions, and callback state preservation.
An IIFE runs as soon as it is defined. Used historically to create private scope before let/const:
(function() {
var privateVar = "secret";
// This var is not accessible outside
})();