Advanced JavaScript Cheatsheet (Beyond the
Basics)
This cheatsheet assumes you already know variables, data types, loops, conditionals, and functions.
It focuses on how JavaScript actually behaves, how it's used in modern apps (React / Node), and why
things work the way they do.
1. Objects – Deep Dive
Creating Objects
const user = {
name: "Rishav",
age: 25,
skills: ["JS", "React"],
greet() {
return `Hi, I'm ${[Link]}`;
}
};
Accessing Properties
[Link]; // dot notation
user["age"]; // bracket notation (dynamic keys)
Dynamic Keys
const key = "email";
user[key] = "test@[Link]";
Object Destructuring (VERY common in React)
const { name, age } = user;
With renaming & defaults:
const { name: userName, city = "Unknown" } = user;
1
Shallow Copy vs Reference
const a = { x: 1 };
const b = a; // same reference
const c = { ...a }; // shallow copy
⚠️ Nested objects are still shared in shallow copies.
2. Memory Management – Stack vs Heap
Stack
• Stores primitive values
• Stores function call frames
• Fast, automatically cleaned
let x = 10;
let y = x; // copied
Heap
• Stores objects, arrays, functions
• Variables store references to heap
let obj1 = { a: 1 };
let obj2 = obj1; // reference copied
Garbage Collection (Mark & Sweep)
• JS automatically deletes heap objects
• If no reference exists, object is removed
let data = { big: true };
data = null; // eligible for GC
3. String Methods (Most Used)
const str = "JavaScript is powerful";
Method Purpose
includes() substring check
2
Method Purpose
startsWith() prefix check
endsWith() suffix check
slice() extract substring
split() string → array
replace() replace text
toLowerCase() normalization
trim() remove spaces
[Link]("Script");
[Link](0, 4); // Java
[Link](" ");
4. Array Methods (Critical for React)
Non-Mutating (Preferred)
map()
filter()
reduce()
find()
some()
every()
Mutating (Use Carefully)
push()
pop()
shift()
unshift()
splice()
sort()
Examples
const nums = [1,2,3,4];
[Link](n => n * 2);
[Link](n => n > 2);
[Link]((sum, n) => sum + n, 0);
3
React Rule
❌ Mutating state
[Link](5);
✅ Immutable update
setState([...state, 5]);
5. Iterating Objects (ALL Ways)
const obj = { a: 1, b: 2, c: 3 };
for...in (keys)
for (let key in obj) {
[Link](key, obj[key]);
}
[Link]()
[Link](obj).forEach(key => [Link](key));
[Link]()
[Link](obj).forEach(val => [Link](val));
[Link]() (Best)
[Link](obj).forEach(([key, value]) => {
[Link](key, value);
});
6. Map & Set (When Objects/Arrays Aren’t Enough)
Map
• Keys can be any type
4
• Maintains insertion order
const map = new Map();
[Link]("name", "Rishav");
[Link](1, "number key");
[Link]("name");
Use Map when: - Frequent add/remove - Non-string keys
Set
• Stores unique values
const set = new Set([1,2,2,3]);
[Link](4);
[Link](2);
Use Set when: - Removing duplicates - Fast existence check
7. Hoisting
What Gets Hoisted?
Type Hoisted? Initialized?
var ✅ ❌ (undefined)
let ✅ ❌ (TDZ)
const ✅ ❌ (TDZ)
function ✅ ✅
[Link](a); // undefined
var a = 10;
hello();
function hello() {}
8. Closures (Simple Analogy)
Closure = function + remembered variables
Analogy:
5
A backpack a function carries even after leaving home
function outer() {
let count = 0;
return function inner() {
count++;
return count;
}
}
const counter = outer();
counter(); // 1
counter(); // 2
Used in: - Data privacy - React hooks - Event handlers
9. Async JavaScript – FULL GUIDE
The Problem
JS is single-threaded but handles async via: - Call stack - Web APIs - Callback queue - Event loop
Callbacks (Old)
setTimeout(() => [Link]("done"), 1000);
❌ Callback hell
Promises
fetch(url)
.then(res => [Link]())
.then(data => [Link](data))
.catch(err => [Link](err));
States: - pending - fulfilled - rejected
async / await (Best)
async function getData() {
try {
const res = await fetch(url);
6
const data = await [Link]();
return data;
} catch (err) {
[Link](err);
}
}
Parallel vs Sequential
await [Link]([fetch(a), fetch(b)]);
Best Practices
• Always wrap in try/catch
• Avoid blocking loops
• Use [Link] when possible
• Never ignore rejected promises
10. Prototypes
Every object has a hidden [[Prototype]]
const arr = [];
arr.__proto__ === [Link]; // true
Prototype Chain
arr → [Link] → [Link] → null
Custom Prototype
function User(name) {
[Link] = name;
}
[Link] = function() {
return [Link];
}
7
11. this Keyword (Context Matters)
Call Type this refers to
method object
function global / undefined
arrow lexical parent
const obj = {
name: "A",
normal() { [Link]([Link]); },
arrow: () => [Link]([Link])
}
12. call, apply, bind
call
[Link](obj, arg1, arg2);
apply
[Link](obj, [arg1, arg2]);
bind
const bound = [Link](obj);
bound();
Use bind in: - Event handlers - Passing methods as callbacks
Mental Models to Remember
• Objects live in heap, variables point to them
• Functions remember scope (closures)
• Async code doesn’t block JS
• this depends on how, not where
• Immutability is king in React
8
If you want next: - "JS internals for interviews" - "React-specific JS patterns" - "Memory leaks &
performance" - "Writing JS like a senior dev"