JavaScript Fundamentals – 9-Day Study Guide
Prepared by ChatGPT (consolidated from user-provided material)
Table of Contents
Table of Contents
1. Day 1 — Fundamentals (Code structure, variables, data types, interactions, conversions, operators,
comparisons, conditionals)
2. Day 2 — Loops & Switch (while, do..while, for, break, continue, labels, switch)
3. Day 3 — Functions (declarations, expressions, arrow functions, scope, closures, this)
4. Day 4 — Objects & Arrays (object basics, arrays, methods, iteration, transforms)
5. Day 5 — Advanced Functions (callbacks, this, binding, setTimeout, closures)
6. Day 6 — Objects Deep Dive (references, cloning, [Link]/values/entries, spread/rest,
structuredClone)
7. Day 7 — Classes (ES6 classes, constructor, inheritance, super, static, fields)
8. Day 8 — Modules & Error Handling (export/import, dynamic imports, try/catch/finally, custom errors)
9. Day 9 — Promises & Async (promises, then/catch/finally, async/await, [Link])
Appendix — Tasks & Solutions (consolidated)
Day 1 — Fundamentals
Day 1 — Fundamentals
1. Code Structure
- Statements: e.g. alert("Hello");
- Semicolons: usually optional but recommended for safety.
- Comments: single-line // and multi-line /* ... */
- "use strict" enables modern JS mode; put it at top of script or inside a function.
2. Variables
- let, const, var (modern: let, const; avoid var).
- const: for values that don't change.
- Naming rules: letters, digits, $, _; can't start with digit; case-sensitive.
- Best practices: descriptive names; avoid reusing variables.
3. Data Types
- Primitive: number, bigint, string, boolean, null, undefined, symbol
- Non-primitive: object
- typeof operator; note typeof null === "object" (historic quirk).
4. User Interaction
- alert(message), prompt(title, default) returns string or null, confirm(question) returns boolean.
5. Type Conversions
- String(value), Number(value) or unary +, Boolean(value).
- Conversion rules summary:
undefined -> Number = NaN, null -> 0, true/false -> 1/0, "" -> 0.
6. Operators & Maths
- Arithmetic: + - * / % **
- String concatenation with + when any operand is a string.
- Unary + converts to number.
- Assignment operators (+=, -=, *=).
- Increment/decrement ++/-- (prefix vs postfix differences).
- Operator precedence determines order of evaluation.
7. Comparisons
- == loose equality (performs type conversion), === strict equality (no conversion).
- Strings compared lexicographically by Unicode.
- null and undefined behavior: null == undefined true; but null compared with numbers has quirks. Avoid
mixing comparisons.
8. Conditional Branching
- if (...) { } else { } else if ...
- Ternary operator: condition ? value1 : value2
- Use parentheses for readability in nested ternary expressions.
Examples: - alert( +apples + +oranges ); // converts strings to numbers then adds - Fix addit
from prompt: let a = +prompt("First number?", "1"); let b = +prompt("Second number?", "2"); a
+ b);
Day 2 — Loops & Switch
Day 2 — Loops & Switch
1. while loop
- while(condition) {...}
2. do...while loop
- Executes body once, then checks condition.
3. for loop - for (init; condition; step) { ... } - Typical use for iteration with index vari
4. break and continue
- break exits loop; continue skips to next iteration.
5. Labels (advanced) - label: for (...) { ... } with break label to exit nested loops.
6. switch statement
- switch(value) { case X: ...; break; default: ... }
- Uses strict equality (===) for comparison. Use break to prevent fall-through.
Practice tasks:
- Multiplication table generator with for loop.
- Sum of numbers (1..100) using an accumulator loop.
- Print even numbers using step increments.
- Simple switch-based calculator with arithmetic operations and divide-by-zero guard.
Day 3 — Functions
Day 3 — Functions
1. Function declarations - function name(params) { body } — hoisted, can be called before
definition.
2. Parameters & default values - function f(a=1) { ... }
3. Return values
- return value; functions without return return undefined.
4. Function expressions - let fn = function() { ... } — not hoisted.
5. Arrow functions - Short syntax: let sum = (a,b) => a + b; - No own 'this' binding — inheri
surrounding scope.
6. Scope & closures
- Local vs global variables. Inner functions remember outer scope variables (closures).
- Useful for data hiding and factory functions.
7. 'this' keyword - 'this' refers to the object that invoked the function (method call). - Ar
functions don't bind their own 'this'.
Example tasks and solutions: - pow(x, n) implemented with loop or recursion. - Callback-based
ask(question, yes, no) example. - Recursive factorial function example.
Day 4 — Objects & Arrays
Day 4 — Objects & Arrays
1. Objects
- Key-value store, property access [Link] or obj['prop'].
- Add/delete properties with assignment/delete.
- Property shorthand {name, age}.
2. Property existence
- 'prop' in obj returns boolean.
3. Looping objects - for (let key in obj) { ... } enumerates enumerable properties.
4. Arrays - Ordered list: let arr = [a, b, c]; [Link] - Common methods: push, pop, shift,
unshift, splice, slice, concat.
5. Iteration
- Classic for, for..of for values, for..in is for objects (avoid for arrays).
- Array transformations: map, filter, reduce.
6. Searching
- indexOf, includes, find, findIndex.
Practice tasks:
- Compute average using reduce.
- Find maximum with [Link](...arr).
- Simple calculator object with methods sum and mul.
- Filter students by marks using filter.
Day 5 — Advanced Functions
Day 5 — Advanced Functions
1. Functions as values
- Assign, pass, return functions.
2. Callbacks
- Functions passed to other functions to be executed later.
3. Functions as objects
- Functions have properties: name, length; can have custom properties.
4. 'this' keyword in depth - Behavior depends on how function is called. - Methods use this t
to owner object.
5. Arrow functions and 'this'
- Arrow functions inherit this from outer scope — do not use as object methods where 'this' is needed.
6. Binding - [Link](obj) creates a bound function fix 'this'. - call/apply allow immediate
invocation with explicit 'this'.
7. setTimeout and callbacks
- Use arrow to preserve 'this' or bind.
8. Closures revisited
- Pattern for counters and encapsulated state.
Practice tasks: - createCounter factory returning increment/decrement/reset. - Bound greeting
bind to preserve context with setTimeout. - Delay wrapper that returns a delayed version of a
function using setTimeout and apply.
Day 6 — Objects Deep Dive
Day 6 — Objects Deep Dive
1. Objects by reference
- Assignment copies reference; modifying via one reference visible via others.
2. Cloning & merging
- Shallow clone via [Link]({}, obj) or {...obj}.
- Spread operator for merging objects and adding properties.
3. Deep cloning
- StructuredClone or libraries for deep copy; shallow copy copies only top-level properties.
4. Garbage collection
- Unreferenced objects are cleaned automatically.
5. [Link], [Link], [Link]
- Useful utilities to get arrays of keys, values, or [key, value] pairs for iteration.
6. Spread & Rest with objects - let clone = {...obj}; let {a, ...rest} = obj;
7. Object methods and this
- Methods declared inside objects use this to access other properties.
Practice tasks:
- Shallow cloning and merging defaults with user settings.
- Looping with [Link] to show key=value pairs.
- structuredClone example to illustrate deep copy.
Day 7 — Classes
Day 7 — Classes
1. ES6 class syntax - class Name { constructor(...) { } method() { } }
2. Constructor
- constructor runs at instantiation via new.
3. Methods, getters, setters
- Define methods, and use get/set for computed properties.
4. Inheritance and super - class Child extends Parent; use super(...) to call parent construc
methods.
5. Static methods - static methodName() belongs to class itself, not instances.
6. Class fields (public and private)
- field = value; private fields with # prefix.
Practice tasks:
- Person and Student classes with inheritance.
- BankAccount example with deposit/withdraw/getBalance.
- Shape inheritance example with Circle overriding area method.
Day 8 — Modules & Error Handling
Day 8 — Modules & Error Handling
1. Modules - Named exports: export function foo() {} - Default export: export default ... - I
import {foo} from './[Link]'; import defaultExport from './[Link]'; - import * as ns from
'./[Link]'
2. Dynamic import - import('./[Link]').then(module => { ... }) for on-demand loading.
3. Error handling - try { } catch (err) { } finally { } - Use catch to handle exceptions; fin
always runs.
4. Custom errors - class CustomError extends Error { constructor(msg){ super(msg); [Link]
'CustomError'; } }
Practice tasks:
- Divide two numbers with error thrown for division by zero.
- Dynamic import demo for optional modules.
- Custom RangeError example for validation.
Day 9 — Promises & Async
Day 9 — Promises & Async
1. Callback problems
- Callback nesting leads to unreadable code (callback hell).
2. Promises - new Promise((resolve, reject) => { ... }) - then for success, catch for errors,
finally always runs.
3. Chaining promises
- Return value from then passes to next then.
4. async/await - async functions return promises; await waits for a promise result. - Use try
inside async functions for error handling.
5. Promise utilities
- [Link]([...]) waits for all promises in parallel.
Practice tasks: - delay(ms) returning a Promise. - async function that fetches and logs data
fetch. - [Link] example to run two requests in parallel.
Appendix — Tasks & Solutions (Selected)
Appendix — Consolidated Tasks & Solutions (Selected)
This appendix collects the practice tasks and short reference solutions given in each Day section.
(Each task in the detailed chapters above includes working example code you can copy & run.)
Examples included: - Alerts & prompts examples - Sum fix from prompt using unary plus -
Multiplication table generator (for loop) - pow(x,n) iterative implementation - Average calcu
using reduce - Counter factory (closures) - BankAccount class - Division error handling with
try/catch - delay(ms) Promise implementation and usage with async/await - Fetching data examp
using async/await and fetch