Home / MAD2 / Week 1

Week 1 · JavaScript basics: values, functions and the DOM

The one-minute story

By the end of this week you can:

• explain where JavaScript runs and run it in the browser console and in Node;
• predict the output of code using var, let, const, hoisting, == and ===;
• write functions (declaration, expression, arrow) and use map, filter, reduce;
• use objects, destructuring, the spread operator and JSON;
• read and write a small DOM program with events.

Words you need

Idea 1: What JavaScript is and where it runs

JavaScript was created for the browser, but the language itself is just a language. Two places run it:

Both use an engine (Chrome and Node use V8) that reads your code and runs it. JavaScript is single-threaded: one thing at a time (week 2 shows how it still waits for the network without freezing).

Put JavaScript in a page with a script tag. It runs when the browser reaches it.

<!DOCTYPE html>
<html>
  <body>
    <h1 id="title">Hello</h1>
    <script src="app.js"></script>   <!-- put at the END of body, so the h1 exists -->
  </body>
</html>

// app.js
console.log("page loaded");              // goes to the browser console (F12)
document.getElementById("title").textContent = "Hi from JS";

console.log is your best friend: it prints any values, separated by spaces. Use console.log(a, b) to see two things at once. A script tag with type="module" (week 2) is deferred automatically; a normal one blocks the page while it loads, which is why it goes at the end of body (or gets the defer attribute).

Idea 2: Variables, scope and hoisting

Three ways to declare a variable:

{ var v = 1; let l = 2; }
console.log(v);          // 1       var leaks out of the block
console.log(typeof l);   // undefined  l is not visible here

console.log(a);          // undefined  (var is hoisted, value not yet set)
var a = 5;

try { console.log(b); } catch (e) { console.log(e.name); }   // ReferenceError (TDZ)
let b = 5;

const list = [1, 2];
list.push(3);            // allowed
console.log(list);       // [ 1, 2, 3 ]
try { list = []; } catch (e) { console.log(e.name); }        // TypeError

Hoisting in one sentence: before running, JavaScript scans for declarations. var x is created and set to undefined; a function declaration is created with its whole body; let/const are created but locked until their line (TDZ).

console.log(add(2, 3));      // 5   declaration hoisted with its body
function add(a, b) { return a + b; }

try { sub(5, 2); } catch (e) { console.log(e.name + ": " + e.message); }
var sub = function (a, b) { return a - b; };   // only `var sub` is hoisted (as undefined)
// prints: TypeError: sub is not a function

The most asked scope puzzle is var in a loop with a delayed callback:

for (var i = 0; i < 3; i++) setTimeout(() => console.log("var", i), 0);
for (let j = 0; j < 3; j++) setTimeout(() => console.log("let", j), 0);
// var 3, var 3, var 3, let 0, let 1, let 2

There is one i shared by all three callbacks, and it is 3 when the loop ends. let makes a fresh j for each round.

Idea 3: Types, coercion and equality

There are seven primitive types and one object type:

There is one number type (no int/float split), and 0.1 + 0.2 is 0.30000000000000004.

console.log(typeof 5, typeof "5", typeof null, typeof undefined, typeof [], typeof NaN, typeof (() => 1));
// number string object undefined object number function
console.log(Array.isArray([]));   // true  (the right way to test for an array)

Coercion: + joins, everything else calculates

console.log("5" + 3);      // 53     one side is a string, so + joins
console.log("5" - 3);      // 2      - always means numbers
console.log("5" * "2");    // 10
console.log(true + 1);     // 2      true becomes 1
console.log(null + 1);     // 1      null becomes 0
console.log(undefined + 1);// NaN    undefined becomes NaN
console.log("abc" * 2);    // NaN    "not a number"
console.log(1 + 2 + "3");  // 33     left to right: 3, then "33"
console.log("1" + 2 + 3);  // 123
console.log(parseInt("42px"), Number("42px"), Number(""), parseInt(undefined));
// 42 NaN 0 NaN

== converts types, === does not. Always use === unless you know why.

console.log(0 == "", "0" == false, null == undefined);   // true true true
console.log(0 === "", null === undefined);               // false false
console.log(NaN == NaN, NaN === NaN, Number.isNaN(NaN)); // false false true
console.log([1] == 1, [] == false);                      // true true

Truthy and falsy

There are exactly eight falsy values: false, 0, -0, 0n, "", null, undefined, NaN. Everything else is truthy, including "0", "false", [] and {}.

console.log(Boolean([]), Boolean(""), Boolean("0"), !!{}, !!NaN);
// true false true true false

console.log(1 + "2" + 3, 1 + 2 + "3", "10" / 2, "a" - 1, [] + [], typeof typeof 1);

Idea 4: Operators, template literals, control flow and loops

• Arithmetic: + - * / % ** (2 ** 3 is 8). Increments: i++, i += 2.
• Compare: < > <= >= === !==.
• Logic: &&, ||, !. They return one of the operands, not just true/false. || returns the first truthy operand (or the last), && returns the first falsy operand (or the last). The exam loves this.
• ?? (nullish coalescing) falls back only for null or undefined: 0 ?? 5 is 0, but 0 || 5 is 5.
• Ternary: cond ? a : b.

console.log(2 && 4, 0 && 2, 2 || 0, 0 || "", "" || "dflt");   // 4 0 2 "" dflt
console.log(0 || 5, 0 ?? 5, null ?? 5, undefined ?? "x");      // 5 0 5 x
const age = 17;
console.log(age >= 18 ? "adult" : "minor");                   // minor

Template literals use backticks, allow ${expression} and span lines:

const name = "Asha", n = 3;
console.log(`Hello ${name}, you have ${n * 2} items.`);   // Hello Asha, you have 6 items.

Control flow and loops

const marks = 72;
if (marks >= 90) console.log("A");
else if (marks >= 60) console.log("B");      // B
else console.log("C");

switch (marks > 50) {            // switch uses ===, and needs break
  case true: console.log("pass"); break;
  default: console.log("fail");
}

for (let i = 0; i < 3; i++) console.log(i);                  // 0 1 2
let k = 0; while (k < 2) { k++; }                            // k is 2
for (const x of ["a", "b"]) console.log(x);                  // a b      values
for (const key in { p: 1, q: 2 }) console.log(key);         // p q      keys (strings)
for (const idx in ["a", "b"]) console.log(idx, typeof idx);  // 0 string / 1 string

for (let i = 1; i <= 15; i++) {
  if (i % 15 === 0) console.log("FizzBuzz");
  else if (i % 3 === 0) console.log("Fizz");
  else if (i % 5 === 0) console.log("Buzz");
  else console.log(i);
}

Idea 5: Functions

Functions are values (first-class): you can store them in variables, pass them to other functions and return them.

function square(x) { return x * x; }          // declaration: hoisted
const cube = function (x) { return x ** 3; };   // expression: not usable before this line
const double = (x) => x * 2;                    // arrow, one expression: implicit return
const make = (a, b) => ({ sum: a + b });        // returning an object literal needs ( )
const greet = (who = "friend") => `Hi ${who}`;  // default parameter

console.log(square(3), cube(2), double(4), make(1, 2), greet(), greet("Ravi"));
// 9 8 8 { sum: 3 } Hi friend Hi Ravi
console.log((function () {})());                // undefined  no return means undefined

// first-class: pass a function, return a function
const apply = (f, v) => f(v);
console.log(apply(square, 5));       // 25
const adder = (n) => (x) => x + n;
console.log(adder(10)(5));           // 15
const nums = (...all) => all.length; // rest parameters collect the extras
console.log(nums(1, 2, 3));          // 3

this: a first look

Inside a normal function, this means "the object before the dot at the call site". An arrow function has no this of its own: it uses the this of the code around it. Week 2 gives the full rules (call, bind, apply).

const user = { nick: "Asha", hi() { return "Hi " + this.nick; } };
console.log(user.hi());      // Hi Asha      object before the dot is user
const detached = user.hi;
try { console.log(detached()); } catch (e) { console.log("lost this"); }
// Hi undefined (sloppy script) or "lost this" (strict mode/module): the dot is gone

Idea 6: Arrays and their methods

const a = [10, 20, 30];
console.log(a.push(40), a);    // 4 [ 10, 20, 30, 40 ]   push returns the NEW LENGTH
console.log(a.pop(), a);       // 40 [ 10, 20, 30 ]      pop returns the removed item
console.log(a.length, a[0], a[5]);   // 3 10 undefined
console.log(a.slice(1, 3), a);       // [ 20, 30 ] [ 10, 20, 30 ]   slice COPIES, original unchanged
console.log(a.splice(1, 1), a);      // [ 20 ] [ 10, 30 ]           splice CHANGES the original
const b = [...a, 99];                // spread: copy into a new array
console.log(b, [..."hi"]);           // [ 10, 30, 99 ] [ 'h', 'i' ]

The "big four" take a callback and do not change the original array:

const n = [1, 2, 3, 4, 5];
console.log(n.map(x => x * 2));                  // [ 2, 4, 6, 8, 10 ]
console.log(n.filter(x => x % 2 === 1));         // [ 1, 3, 5 ]
console.log(n.reduce((acc, x) => acc + x, 0));   // 15
console.log(n.find(x => x > 3), n.find(x => x > 9));   // 4 undefined
console.log(n.indexOf(3), n.includes(7));        // 2 false
console.log(n.forEach(x => x));                  // undefined
console.log([10, 9, 1].sort());                  // [ 1, 10, 9 ]  default sort compares AS TEXT
console.log([10, 9, 1].sort((p, q) => p - q));   // [ 1, 9, 10 ]
console.log(["1", "2", "3"].map(parseInt));      // [ 1, NaN, NaN ]  map also passes the index!

const data = [
  { name: "Alpha", score: 40 }, { name: "Beta", score: 30 },
  { name: "Charlie", score: 50 }, { name: "Delta" },
];
const total = data
  .map(p => parseInt(p.score) || 0)
  .filter(score => score >= 40)
  .reduce((acc, score) => acc + score, 0);
console.log("Total Score:", total);

Idea 7: Objects, destructuring and JSON

An object is a bag of key: value pairs. A function stored as a value is a method.

const person = { name: "Asha", age: 20, skills: ["js", "py"], greet() { return "Hi " + this.name; } };
console.log(person.name, person["age"], person.greet());   // Asha 20 Hi Asha
person.city = "Chennai"; delete person.age;               // add, delete
console.log("city" in person, person.age, person.zip);      // true undefined undefined
console.log(Object.keys({ a: 1, b: 2 }), Object.entries({ a: 1 }));
// [ 'a', 'b' ] [ [ 'a', 1 ] ]

Destructuring and spread are everywhere in Vue code:

const [first, , third = 0] = [1, 2];          // positions; third gets its default
const { name, skills: [s1] } = person;        // names must match; nested allowed
console.log(first, third, name, s1);          // 1 0 Asha js

const base = { x: 1, y: 2 };
const copy = { ...base, y: 20, z: 3 };        // copy, later keys win
console.log(copy, base);                      // { x: 1, y: 20, z: 3 } { x: 1, y: 2 }
const extra = { ...(false && { secret: 1 }) };    // spreading false adds nothing
console.log(extra);                           // {}

function isValidAge(age) { return !(age > 18); }
const validAgeParams = { voter_id: 123, constituency: "New Delhi" };
let some_value;                      // undefined
console.log(isValidAge(some_value) ? { name: "ABC", ...(!isValidAge(19) && validAgeParams) }
                                   : { name: "XYZ" });

JSON

JSON is text. Keys and strings need double quotes; no functions, no comments, no trailing commas.

const text = JSON.stringify({ a: 1, b: undefined, c: () => 1, d: [1, undefined], e: "hi" });
console.log(text);                         // {"a":1,"d":[1,null],"e":"hi"}
const back = JSON.parse('{"id":7,"tags":["x","y"]}');
console.log(back.id, back.tags[1]);        // 7 y

stringify drops undefined and function values in objects (and turns them into null inside arrays). Browser storage and fetch bodies are text, so you will convert with these two calls all the time.

Idea 8: The DOM and events

The browser turns your HTML into a tree of objects called the DOM. document is the root. JavaScript finds elements, reads or changes them, and reacts to events (click, input, submit, keydown).

// browser only
const out = document.querySelector("#out");          // first match of a CSS selector
const all = document.querySelectorAll(".item");      // list of every match
out.textContent = "changed";                         // set text (safe)
out.style.color = "red";
out.classList.add("big");
document.querySelector("button").addEventListener("click", () => { out.textContent = "clicked"; });

input.value is always a string, even for type="number", so convert before calculating. That is the classic calculator bug.

<input id="a" type="number"> <select id="op"><option>+</option><option>-</option>
<option>*</option><option>/</option></select> <input id="b" type="number">
<button id="go">=</button> <span id="out"></span>
<script src="calc.js"></script>

// calc.js
function calculate(a, op, b) {
  switch (op) {
    case "+": return a + b;
    case "-": return a - b;
    case "*": return a * b;
    case "/": return b === 0 ? "cannot divide by 0" : a / b;
    default: return "?";
  }
}
document.querySelector("#go").addEventListener("click", () => {
  const a = Number(document.querySelector("#a").value);   // value is a string: convert!
  const b = Number(document.querySelector("#b").value);
  const op = document.querySelector("#op").value;
  document.querySelector("#out").textContent = calculate(a, op, b);
});

Exam radar

Quick quiz

Viva: say it out loud

Recap

Practise with real exam questions

These come straight from past papers (with the real figures and the official answer key). Open 60 real questions on this week   All Quiz 1 papers