Data Types
A mutable object is an object whose state can be modified after it is created.
Primitive (All Immutable)
- null (type of null is "object")
- undefined ("undefined" type)
- String
- number
- boolean
- symbol
Reference (Mutable)
- Arrays - ordered collections
- Objects - keyed collections
- Function
- Set / Map
- WeakSet / WeakMap
- Date
- Symbol - Unique identifier.
- Set
Collection of unique values (no keys).
- Map
Collection of keyed data items, allows keys of any type.
- WeakMap
Keys must be objects. If no other references to the key object exist, it's garbage collected.
- WeakSet
Collection of unique objects. Weakly held, allowing garbage collection.
Closures
- A function bundled with its lexical scope forms a closure. It gives access to an outer function's scope from an inner function. Created at function creation time.
- Uses: Memoization, Currying, Data-privacy, maintaining state in async world.
- Disadvantages: Memory leaks if not handled (data not garbage collected automatically).
Types of Functions
- Higher Order Function: Takes a function as argument or returns a function.
- First-Class Function: Functions treated like any other variable (passed as args, assigned to vars).
- Callback Function: Passed into another function to be invoked later.
- Pure Function: Always returns same result for same arguments, no side effects.
Event Bubbling vs Capturing
- Capturing phase (down to element)
- Target phase (at element)
- Bubbling phase (up from element)
- Event Bubbling (default): Event runs on element, then parent, then ancestors.
- Event Capturing: Event propagates from outermost
to target.
elem.addEventListener(..., { capture: true })
Stop Propagation & Prevent Default
- event.stopPropagation(): Stops the bubbling process.
- event.preventDefault(): Cancels the default action of the event (e.g., submitting a form, following a link).
Synthetic Events (React)
Cross-browser wrapper around the browser's native event. React reuses this event object for performance.
'e' is the synthetic event. API is same as native events (stopPropagation, preventDefault).
onClick, onBlur, onChange (camelCase)
Event Delegation
Instead of multiple listeners on child nodes, add one listener to the parent. Use bubbling to catch events from children.
Identify child using e.target.nodeName.
Debouncing & Throttling
Debouncing
Waits for a pause in events before executing. (e.g., Search bar input - exec 1s after last keystroke).
Throttling
Executes at most once every X milliseconds. (e.g., Scroll event - exec every 100ms).
Generator Functions
Can "yield" multiple values on-demand. Doesn't terminate, just pauses.
const g = gen();
g.next().value; // 1
Prototype Inheritance
Objects have a an internal [[Prototype]] property. Objects inherit methods/properties from their prototype.
ChildObject.__proto__ = ParentObject
ES6 Features
- let and const
- Arrow Functions
- Spread / Rest Operator
- For/of loop
- Promises
- Default parameters
- Template Literals
- Destructuring Assignment
- Modules (import/export)
Callbacks
Passed as argument to another function, executed after some operation.
Disadvantage: Callback hell, Inversion of control. Better to use Promises.
Promises
Represents eventual completion/failure of an async operation.
- Pending
- Fulfilled
- Rejected
Async / Await
Syntactic sugar over Promises. Makes async code look synchronous.
Arrow Functions
- Shorter syntax.
- Implicit return (if one expression).
- No 'this' binding: 'this' is lexically inherited from scope.
This Keyword
- In method: refers to object.
- Alone/In function: refers to global (window).
- Strict mode function: undefined.
- Event handler: element that received event.
- Arrow function: lexical scope.
- call(), apply(), bind() set it explicitly.
Currying
Translating f(a, b, c) into f(a)(b)(c).
Useful for making functions argument-independent or creating partial applications.