JavaScript Core Concepts

JavaScript is a high-level, interpreted programming language primarily used to make

web pages interactive. It is one of the core technologies of the World Wide Web,
alongside HTML and CSS.

Key Features:

• Client-side: Runs in the browser (e.g., form validation, DOM manipulation).

• Dynamically typed: No need to define variable types.

• Event-driven: Reacts to user interactions like clicks or keyboard input.

• Asynchronous: Supports non-blocking operations using callbacks, promises, and

async/await.

• Prototype-based: Uses prototypal inheritance instead of classical OOP.

Common Uses:

• Creating dynamic UI behavior in web pages

• Building web applications (React, Angular, Vue)

• Server-side development using Node.js

• Game and mobile app development

1.1 Lexical Structure

The basic syntax rules of JavaScript.
Includes:

• Case Sensitivity → let x ≠ let X

• Comments → // Single-line or /* */ Multi-line

• Semicolons → Optional but recommended (let x = 5;)

• Whitespace → Ignored (except in strings like "Hello World")

1.2 Expressions
A piece of code that produces a value.
Examples:

5+5 // 10 (arithmetic)

"Hello" + "JS" // "HelloJS" (string concatenation)

x === y // true/false (comparison)

1.3 Data Types

Two main categories:

• Primitive Types (immutable): string, number, boolean, null, undefined, symbol,

bigint

• Non-Primitive (Reference Types): object, array, function

Note: typeof null returns "object" (a well-known JS quirk).

1.4 Classes
Blueprint for creating objects using the class keyword.

class Person {

constructor(name) {

this.name = name;

greet() {

return `Hello, ${this.name}`;

const john = new Person("John");

john.greet(); // "Hello, John"

1.5 Variables

• var → Function-scoped, hoisted. Avoid in modern JS.

• let → Block-scoped, can be reassigned.

• const → Block-scoped, cannot be reassigned.

var x = 10;

let y = 20;

const z = 30;
1.6 Functions
Reusable blocks of code.
Function Declaration vs Expression:

function sayHi() { return "Hi!"; } // Declaration

const sayHi = function() { return "Hi!"; }; // Expression

Also supports:

• Default Parameters: function greet(name = "Guest") {...}

• Rest Parameters: function sum(...nums) {...}

1.7 this Keyword

Refers to the object that is executing the current function. Value depends on how the
function is called.

const person = {

name: "Alice",

greet: function() {

console.log(this.name); // "Alice"

};

person.greet();

1.8 Arrow Functions

Shorter syntax, inherits this from the parent scope.

const add = (a, b) => a + b;

const greet = () => "Hello!";

1.9 Loops
Used to execute code repeatedly.

• for → Best for known iterations.

• while → Runs while condition is true.

• for...of → For iterating over arrays.

• for...in → For iterating over object keys.

for (let i = 0; i < 5; i++) console.log(i);

while (x < 10) x++;

for (const num of [1, 2, 3]) console.log(num);

1.10 Scopes

• Global Scope → Accessible everywhere.

• Function Scope → Inside a function (var).

• Block Scope → Inside {} (let, const).

if (true) {

let x = 10; // Block-scoped

var y = 20; // Function-scoped

console.log(y); // 20

console.log(x); // Error

1.11 Arrays
Ordered lists with powerful methods:

const nums = [1, 2, 3];

nums.push(4); // [1, 2, 3, 4]

nums.map(num => num * 2); // [2, 4, 6]

Also supports find(), filter(), reduce(), includes(), flat().

1.12 Template Literals

Strings with embedded variables using backticks:

const name = "Bob";

console.log(`Hello, ${name}!`); // "Hello, Bob!"

2. Asynchronous Programming

2.1 Callbacks
A function passed to another function to be executed later.
function fetchData(callback) {

setTimeout(() => callback("Data received!"), 1000);

fetchData(data => console.log(data));

2.2 Timers

• setTimeout() → Executes once after delay.

• setInterval() → Executes repeatedly at intervals.

setTimeout(() => console.log("Hello"), 2000);

setInterval(() => console.log("Tick"), 1000);

2.3 Promises
An object representing the eventual result of an async operation.
States: pending, fulfilled, rejected.

const promise = new Promise((resolve, reject) => {

setTimeout(() => resolve("Success!"), 1000);

});

promise.then(result => console.log(result));

Also supports:

• Promise.all()

• Promise.race()

2.4 Async & Await

Syntax sugar over Promises for cleaner code.

async function fetchData() {

const res = await fetch('https://api.example.com');

const data = await res.json();

return data;

Use try-catch for error handling.

3. Core Concepts

3.1 Closures
A closure is a function that remembers variables from its outer scope even after the
outer function has returned.

function outer() {

let x = 10;

function inner() {

console.log(x); // Remembers x

return inner;

const closureFn = outer();

closureFn(); // 10

3.2 The Event Loop

JS handles async code using the Event Loop.

• Call Stack: Executes sync code

• Callback Queue: Stores async tasks

• Microtask Queue: Promises (executed before macrotasks)

• Event Loop: Transfers tasks to the stack when it's empty

console.log("Start");

setTimeout(() => console.log("Timeout"), 0);

Promise.resolve().then(() => console.log("Promise"));

console.log("End");

// Output: Start → End → Promise → Timeout

Basics
1️⃣ What are the different data types in JavaScript?

• Primitive Types: string, number, boolean, null, undefined, symbol, bigint

• Non-Primitive Types: object, array, function

2️⃣ Explain let, const, and var.

• var: Function-scoped, hoisted.

• let: Block-scoped, can be reassigned.

• const: Block-scoped, cannot be reassigned.

3️⃣ What is hoisting?

• JavaScript moves declarations (not initializations) to the top of the scope. var is hoisted
with undefined; let and const are hoisted but not initialized.

4️⃣ Difference between == and ===.

• ==: Loose equality (performs type coercion)

• ===: Strict equality (no type coercion)

5️⃣ What is a closure?

• A function that remembers variables from its outer scope even after the outer function
has finished executing.

6️⃣ Explain scope & types of scope.

• Global Scope: Accessible everywhere

• Function Scope: Inside a function (var)

• Block Scope: Inside {} (let, const)

7️⃣ What is the event loop?

• It handles asynchronous code by moving tasks from the callback queue or microtask
queue to the call stack when it is empty.

8️⃣ What are template literals?

• Strings wrapped in backticks (``) that allow embedded expressions using ${}.

9️⃣ What are arrow functions?

• Shorter syntax for functions that do not have their own this binding.

Explain the difference between null and undefined.

 • null: Intentional absence of value

• undefined: Variable declared but not assigned

Arrays & Objects

1️⃣1️⃣ How do you clone an object?

• Shallow copy: Object.assign({}, obj) or {...obj}

• Deep copy: JSON.parse(JSON.stringify(obj)) or using structuredClone()

1️⃣2️⃣ Explain array methods: map, filter, reduce.

• map(): Transforms each element and returns a new array

• filter(): Filters elements based on a condition

• reduce(): Reduces array to a single value

1️⃣3️⃣ What is destructuring?

• Extracting values from arrays or properties from objects into variables.

1️⃣4️⃣ How to merge two arrays?

• [...arr1️, ...arr2️] or arr1️.concat(arr2️)

1️⃣5️⃣ What is the spread operator?

• ... used to expand arrays or objects

1️⃣6️⃣ What is the difference between shallow and deep copy?

• Shallow: Copies top-level properties only

• Deep: Recursively copies all nested structures

1️⃣7️⃣ Explain rest parameters.

• ... syntax used to group remaining arguments into an array

1️⃣8️⃣ How do you check if a key exists in an object?

• 'key' in obj or obj.hasOwnProperty('key')

1️⃣9️⃣ What is optional chaining?

• ?. safely accesses deeply nested properties without throwing errors if null/undefined

2️⃣0️⃣ What is Object.freeze()?

• Prevents modification of existing properties or adding new ones to an object

 Functions & Execution

2️⃣1️⃣ Difference between function declaration & expression.

• Declaration is hoisted, expression is not

2️⃣2️⃣ What are IIFEs?

• Immediately Invoked Function Expressions: runs immediately after being defined

2️⃣3️⃣ What is debounce vs throttle?

• Debounce: delays execution until after a pause

• Throttle: limits execution to once per interval

2️⃣4️⃣ What is currying?

• Transforming a function with multiple arguments into a sequence of functions with one
argument

2️⃣5️⃣ What is memoization?

• Caching the results of function calls to improve performance

2️⃣6️⃣ Explain call(), apply(), and bind().

• call(): Calls function with specified this and arguments

• apply(): Same as call but with arguments as an array

• bind(): Returns a new function with this bound

2️⃣7️⃣ What is the “this” keyword?

• Refers to the object that is executing the current function

2️⃣8️⃣ How does prototypal inheritance work?

• Objects can inherit properties/methods from another object via prototype chain

2️⃣9️⃣ Explain async/await.

• Syntactic sugar over Promises, allows writing async code like synchronous

3️⃣0️⃣ What is promise chaining?

• Linking multiple .then() calls to handle asynchronous steps sequentially

Advanced Concepts

3️⃣1️⃣ What are generators?

 • Functions that can be paused and resumed using function* and yield

3️⃣2️⃣ What is the difference between synchronous and asynchronous code?

• Synchronous: Executes line by line

• Asynchronous: Can run tasks in the background without blocking

3️⃣3️⃣ What are web workers?

• Run scripts in background threads to keep the main thread free

3️⃣4️⃣ What is the module pattern?

• Design pattern that encapsulates code using closures and returns public APIs

3️⃣5️⃣ What is event delegation?

• Technique of using a single event listener on a parent to handle events from its children