7.11Review Questions

Both are block-scoped. A let variable can be reassigned (let age = 20; age = 21;). A const variable cannot be reassigned and must be given a value when it is declared. Note: the *contents* of a const object or array can still change (const a = []; a.push(1); is allowed). Use const by default and let when the value must change.

console.log('5' + 3) prints **'53'**: with a string, + means concatenation, so 3 becomes '3'. console.log('5' - 3) prints **2**: - only works with numbers, so '5' is converted to the number 5.

=== (strict equality) compares both value and type with no conversion. == converts types first, which gives surprising results: 5 == '5' is true, 0 == '' is true, null == undefined is true. Using === avoids these bugs and makes intent clear.

Use switch when one value is compared with many exact options, such as a day number or a menu choice (case 1: … case 2: …). It is easier to read than a long chain of else if (x === …). Use if...else for ranges and complex conditions such as marks >= 75.

Add to the end with **push()**:

const fruits = ['mango', 'apple'];
fruits.push('banana');

for (let i = 0; i < fruits.length; i++) console.log(fruits[i]);
for (const f of fruits) console.log(f);
fruits.forEach(f => console.log(f));

A function declaration (function add(a, b) { return a + b; }) has a name and is hoisted, so it can be called before the line where it is written. A function expression stores a function in a variable (const add = function (a, b) { … }; or the arrow form const add = (a, b) => a + b;); it is not available until that line has run, and calling it earlier causes an error.

The Document Object Model is the browser's in-memory representation of the HTML page as objects that JavaScript can read and change. It is called a tree because it starts from one root (document → <html>) and every element has one parent and may have children and siblings, like branches of a tree.

• textContent gets or sets plain text only; any tags in the value are shown literally. It is faster and safe for user input.
• innerHTML gets or sets HTML markup, which the browser parses into elements. Inserting untrusted user input with innerHTML can cause XSS, so use it only with trusted content.

document.querySelectorAll('.product') returns a static NodeList of every element with that class (loop with forEach). document.getElementsByClassName('product') also works and returns a live HTMLCollection.

By default, submitting a form sends the data and reloads or navigates the page. event.preventDefault() stops that, so JavaScript can validate the fields and show error messages (or send the data with AJAX) without the page reloading.

show() with brackets calls the function immediately and passes its *return value* (usually undefined) to setTimeout. Pass the function itself instead: setTimeout(show, 1000) or setTimeout(() => show('Hi'), 1000).

Event delegation means adding one listener to a parent element and using event.target to find which child was clicked. It works because events bubble up from the child to its parents. It is useful because items created later (for example new list items or products loaded by AJAX) are handled automatically, and fewer listeners are needed.

Client-side validation runs in the user's browser, so it can be bypassed: JavaScript can be turned off, the HTML can be edited in DevTools, or requests can be sent directly with tools such as Postman or curl. It is only for user convenience (quick feedback). The server must always validate again, because it is the only place you control.

const postal = /^[0-9]{5}$/;     // or /^\d{5}$/
postal.test('10115');   // true
postal.test('1011a');   // false

^ and $ anchor the start and end so that exactly five digits are accepted.

Update (move objects, check collisions and the score), clear the canvas, and draw everything in its new position. requestAnimationFrame(loop) then schedules the next frame.

A sprite sheet is one image containing many frames of a character in a grid. Showing a different frame every few game ticks creates the illusion of movement, like a flip book.
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh):

• img: the sprite sheet;
• sx, sy, sw, sh: the source rectangle cut from the sheet (sx = frame × frameWidth, sy = row × frameHeight);
• dx, dy, dw, dh: the destination rectangle where that piece is drawn on the canvas, and its size.

keydown fires once, then repeats only after an operating-system delay, so moving inside the event gives jerky movement and cannot handle two keys at once (for example right and up). Storing keys[e.key] = true/false and checking the object in the game loop moves the player smoothly every frame and supports simultaneous keys.

function collides(a, b) {
  return a.x < b.x + b.w &&
         a.x + a.w > b.x &&
         a.y < b.y + b.h &&
         a.y + a.h > b.y;
}

This is the AABB test: the rectangles overlap only if they overlap on both the x axis and the y axis.

An anonymous function is a function with no name, written where it is used. In the game: the keydown/keyup event listener callbacks, the arrow functions used with forEach/filter on the coins, the image.onload handler, and the setInterval callback. An IIFE is also anonymous.