JavaScript and TypeScript Essentials: Core Concepts and Interview Questions

Why JavaScript is worth mastering

JavaScript runs in every browser and, with Node.js, on servers too. It is the base of frontend and full-stack work, and frameworks such as React are built on it. Interviews rarely ask you to recite syntax. They test how the language behaves: scope, closures, this, asynchronous code and the event loop. TypeScript, a typed layer on top of JavaScript, is now standard in most professional codebases, so it appears in job descriptions too.

You can practise in the browser console (press F12) or with Node.js.

1. Variables and types

let count = 1;          // block scoped, reassignable
const name = "Asha";    // block scoped, cannot be reassigned
var old = true;         // function scoped: avoid in new code

Primitive types: string, number, boolean, null, undefined, symbol, bigint. Everything else is an object (arrays and functions included).

• const does not make an object immutable: const a = []; a.push(1) works
• typeof null is "object" (a historical quirk), and typeof [] is "object"; use Array.isArray
• NaN !== NaN; check with Number.isNaN
• Equality: === compares without converting types, == converts first (0 == "0" is true, 0 === "0" is false). Prefer ===.
• Truthy and falsy: falsy values are false, 0, "", null, undefined, NaN (and 0n). Empty arrays and objects are truthy.
• ?? (nullish coalescing) vs ||: 0 || 5 is 5, but 0 ?? 5 is 0. Optional chaining: user?.address?.city.

2. Hoisting and the temporal dead zone

Declarations are processed before code runs. var is hoisted and initialised as undefined; let and const are hoisted but cannot be used before their declaration (the temporal dead zone). Function declarations are fully hoisted; function expressions are not.

console.log(a);   // undefined
var a = 5;

console.log(b);   // ReferenceError
let b = 5;

3. Scope and closures

A closure is a function that remembers the variables of the place where it was created, even after that place has finished running.

function makeCounter() {
  let count = 0;
  return () => ++count;
}
const next = makeCounter();
console.log(next(), next());   // 1 2

The most famous interview question:

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

var shares one variable across iterations; let creates a new one each time. Closures are used for private state, function factories, memoisation, debouncing and event handlers.

4. Functions and this

function add(a, b) { return a + b; }          // declaration
const mul = (a, b) => a * b;                  // arrow function

Arrow functions are shorter and do not have their own this, taking it from the surrounding scope. For regular functions, this depends on how the function is called:

• obj.method(): this is obj
• plain call fn(): this is undefined in strict mode (or the global object otherwise)
• new Fn(): this is the new object
• fn.call(x), fn.apply(x), fn.bind(x): you set this explicitly

Know why passing obj.method as a callback can lose this, and how bind or an arrow function fixes it. Also know default parameters, rest (...args) and spread ([...a, ...b]), destructuring (const { id, name } = user), and higher-order functions.

5. Objects, prototypes and classes

Every object has a hidden link to a prototype; property lookup walks this prototype chain. Classes are cleaner syntax over the same mechanism.

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}
class Dog extends Animal {
  speak() { return `${super.speak()}: woof`; }
}
console.log(new Dog("Tommy").speak());

Useful topics: Object.keys/values/entries, Object.assign, spread copies (shallow), structuredClone for deep copies, JSON.stringify and JSON.parse, getters and setters, and Map and Set as alternatives to plain objects and arrays.

6. Array methods you must know

const nums = [1, 2, 3, 4, 5];
nums.map(n => n * 2);                    // [2, 4, 6, 8, 10]
nums.filter(n => n % 2 === 0);           // [2, 4]
nums.reduce((sum, n) => sum + n, 0);     // 15
nums.find(n => n > 3);                   // 4
nums.some(n => n > 4);                   // true
nums.every(n => n > 0);                  // true
[...nums].sort((a, b) => b - a);         // [5, 4, 3, 2, 1]

Remember that sort() without a comparator sorts as strings ([10, 2, 1].sort() gives [1, 10, 2]), and that map returns a new array while forEach returns nothing. Know how to remove duplicates ([...new Set(arr)]), flatten (arr.flat()) and group items with reduce.

7. Asynchronous JavaScript and the event loop

JavaScript runs on one thread. The event loop lets it handle waiting (timers, network) without blocking:

1. Synchronous code runs on the call stack
2. Timers and I/O callbacks go to the task (macrotask) queue
3. Promise callbacks go to the microtask queue, which runs before the next macrotask

console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve().then(() => console.log("3"));
console.log("4");
// output: 1 4 3 2

Promises represent a future value (pending, fulfilled, rejected). async/await makes them read like normal code:

async function loadJobs() {
  try {
    const res = await fetch("/api/jobs");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error("Failed:", err.message);
    return [];
  }
}

// run independent requests in parallel
const [a, b] = await Promise.all([fetch("/a"), fetch("/b")]);

Know Promise.all, Promise.allSettled, Promise.race, why fetch does not reject on a 404 (check res.ok), and the common mistake of using await inside a loop when the calls could run in parallel.

8. The browser and DOM

document.querySelector, addEventListener, event bubbling and delegation (one listener on a parent instead of many on children), localStorage vs sessionStorage vs cookies, and preventDefault. Know debounce (wait until the user stops typing) vs throttle (at most once per interval), and be able to write debounce:

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

9. Modules and tooling

ES modules (import and export), npm and package.json, bundlers such as Vite, linting with ESLint, and testing with Jest or Vitest at a basic level. For Node.js: the event-driven model, require vs import, and building a small REST API with Express.

10. TypeScript essentials

TypeScript adds static types that are checked before the code runs, then compiles to plain JavaScript.

interface Job {
  id: number;
  title: string;
  salary?: number;            // optional
}

type Status = "draft" | "published" | "closed";   // union of literals

function summarise(job: Job, status: Status): string {
  return `${job.title} (${status})`;
}

function first<T>(items: T[]): T | undefined {      // generic
  return items[0];
}

Know: interface vs type, union and intersection types, optional properties, generics, unknown vs any (prefer unknown), readonly, utility types (Partial, Pick, Omit, Record), narrowing with typeof and in, and enabling "strict": true. Types exist only at compile time, so they do not validate data coming from an API at run time.

11. Frequently asked questions

1. var vs let vs const
2. What is a closure? Give a use case
3. Explain hoisting and the temporal dead zone
4. How does this work? Arrow functions vs regular functions
5. == vs ===
6. Explain the event loop, microtasks and macrotasks
7. What is a promise? How does async/await work?
8. What is prototypal inheritance?
9. map vs forEach vs filter vs reduce
10. What is event delegation?
11. Shallow vs deep copy
12. null vs undefined
13. What is the difference between interface and type in TypeScript?

12. Coding questions to practise

Flatten a nested array, remove duplicates, implement debounce and throttle, write your own map or bind, deep clone an object, implement a promise-based sleep, group an array by a key, and write a function that returns a function (currying). Solve them without help, then explain your solution aloud (online assessment tips).

13. Study plan

• Week 1: variables, functions, arrays, objects; 25 small exercises
• Week 2: closures, this, prototypes, array methods
• Week 3: async JavaScript, the DOM and a small project (a to-do app or a job search page with the Fetch API)
• Week 4: TypeScript basics, then React and mock interviews

Put the projects on GitHub (Git guide).