JavaScript Refresher and Detailed Study - Table of Contents for Post Series

Last updated on 20 Sep 2026

Introduction

Period: 3 August 2026 to 20 September 2026 (part-time, ongoing)

This is a refresher cum detailed study on JavaScript topics that I had quickly studied perhaps in end 2023 and early 2024, and then referred to when needed for software development learning or work I was doing.

I had used W3Schools JavaScript tutorial in the past and even recommended it in my Jan. 2024 blog post: Roadmap to Learning Full Stack (MERN) Web Development Beginner Level Through Free Online Tutorials.

But Gemini recommended JavaScript.info as best for a thorough refresher. So I used JavaScript.info.

I have put up a series of longish blog posts related to this JavaScript refresher and detailed study, with each post having a Contents section with internal links to the sections. This post lists all the Contents of all the posts in the series with the internal links going directly to the related section in the post.

This refresher and detailed study is ongoing.

---

JavaScript Refresher and Detailed Study - Part 1

Published: 06 August 2026. Study & Dev work period: 3 to 6 Aug 2026

Contents

• Introduction
• Strict mode in vanilla JS apps
• Symbol data type rarely used in typical web application development (as against libraries like React)
• Regular equality (==) is rarely used in modern JS coding; Strict equality (===) is the standard practice
• Curly Braces are commonly used for if Single-Statement Blocks except for early returns / guard clauses at the top of a function
• Nested Ternary statements formatting; Better options of object lookup or switch statement
• React: 'switch' is a statement and so illegal inside JSX; Multi-level ternaries are expressions which are valid in JSX and so commonly used; inline object lookup is a clean-code option
• Boolean(value) is cleaner than !!value
• Chaining nullish coalescing operator (??) across 3 or 4 variables is quite rare in modern React and application code
• Explanation of Destructuring code in above response
• ?? vs || in JavaScript expression chains
• Curly braces {} overload in JS/React: Object literal, Destructuring (data unpacking), block scope/code block, JSX interpolation expression
• break, continue and labels - are they used in production JS code?
• Nullish coalescing operator is not a good name; First not nullish operator may have been better
• Between Math.pow and exponentiation operator (**), the latter is more commonly used in modern codebases
• Functions being objects in JS is strange to me as early 2000s C/C++ handled it differently
• Custom properties attached to a function in JS is rarely used in web app code but frameworks/libraries may use them
• Callback functions are not a special type of function in JavaScript; they are just functions that are passed as arguments to other functions
• Modern React uses arrow functions across both single-line and multi-line handlers for stylistic consistency and team conventions
• Function expressions are rarely used in modern React or Vanilla JavaScript development
• Transpiling and Polyfilling
• Nice crisp definition of properties from https://javascript.info/object
• object literal syntax ({}) is used exclusively in modern development and not new Object()
• In regular app development, quotes around multi-word property keys are avoided entirely in favor of unquoted camelCase
• $ and _ are the only special characters that can be part of variable name or unquoted property key
• Square brackets perform an expression evaluation step before doing property lookup
• Property names can be JavaScript reserved words (from ES5 (2009))
• JavaScript deliberately evolved to maximize developer productivity and expressive power, trading C's strict procedural explicitness for a fast-moving, programmer-centric style
• Object.keys(obj).length === 0 is the idiomatic, modern JavaScript way to check for empty object
• Ensuring that a value is numeric is non-trivial in JavaScript - typeof val === 'number' && !Number.isNaN(val) lets Infinity through , Number.isFinite(val) is safe
• Square bracket [ operator works the same for objects and arrays as array is implemented as an object
• Why JS arrays were implemented as objects
• All C++ classes and structs do not have equivalence to JavaScript bracket expression evaluation (dynamically); Specific C++ classes like std::map provide equivalent functionality
• Acceptable Computer Science terminology for JavaScript object - Associative Array/Dictionary usually implemented as Hash Table but at times implemented differently for optimization
• Refresher focused on learning web dev topics I need; Prototypes Are Mostly Legacy and can be skipped
• Classes were not used in the modern React/Next.js apps I developed
• Classes were not used in the Vanilla JS apps AI tools provided me; Is 'class' used in vanilla JS app dev (as against library/framework dev)
• Will cover JS classes at overview level and try to map my 2000s OOP C++ knowledge base to JS classes

---

JavaScript Refresher and Detailed Study - Part 2

Published: 15 August 2026. Study & Dev work period: 6 to 7 Aug 2026; 13 to 16 Aug 2026

Contents

• Copying reference to an object; Copying object - shallow copy and deep copy
• Non-trivial confusion in JS due to same variable at times holding contents directly, but at times only holding a reference to the contents
• Modern frontend web development, especially within React ecosystem, uses Functional Programming (FP) and not traditional Object-Oriented Programming (OOP)
• React 'Functional Components' is bad terminology from traditional Software Engineering perspective - they are simply 'Render Functions'
• this is rarely used in modern React, Next.js, or Astro applications
• this in Arrow functions (ES6(2015)) has lexical scope (its container in code); this in standard JS functions has dynamic scope (who called it)
• this is used in libraries to provide function chaining
• Limited usage of new in modern web apps for legacy APIs (e.g. Date, URL); Modern libraries/frameworks prefer JS factory function which returns created object
• Constructor functions are rarely used in modern web apps
• In optional chaining (?.) we don't need to worry about last property name in the chain
• Optional chaining variants of ?.() and ?.[] do get used quite a bit in modern web app dev
• Symbol is rarely used in web app dev code but used by libraries/frameworks
• Object to primitive conversion can be ignored for web app dev
• toFixed() discards unwanted precision but is problematic for sensitive fractional calculations (e.g. financial) ; Integer Math is safe (e.g. using cents instead of dollars); decimal.js, currency.js library alternatives
• To check if a string contains valid numbers: Modern web dev uses Regex or libraries like validator; You cannot use Number.isNaN() but can use isNaN();
• In Zod you have to use Regex to check for string having valid number
• In enterprise apps, parseInt or parseFloat are rarely used for general data validation, API parsing, or handling user input; Serious codebases use them for niche tasks like parsing CSS/DOM values
• Unary + is rarely used in modern codebases, Number() is preferred; Performance-focused exception cases where it is used
• Never mutate parameters philosophy of modern JS codebases
• at(-1) to get last item in array approach (negative indexing approach) is somewhat new (ES2022) but is being used in recently created/updated codebases
• Creating sparse arrays (arrays with holes) is not recommended even if JS allows it
• forEach passes three parameters to function even if only function reference without () is used as parameter to forEach
• Higher-Order Functions and Declarative Programming
• forEach - Declarative Programming term seems like exaggeration
• No external state, no mutation, new data structure returned and so can be chained - great features but still 'declarative' seems to be exaggeration
• JavaScript array methods not fully declarative like SQL - they simply offer a declarative interface wrapped around an imperative callback
• array.map() method name seems odd as it does transformation whereas Map class is a key-value pair
• array sort method modifying the array in place seems unusual as compared to 'declarative' methods like filter and map; toSorted() newer method
• Backward compatibility requirement seems to have created some 'landmines' in JS programming features; TypeScript and ESLint are used to avoid using such 'landmines'
• splice() is a strange method; Better to avoid using splice; toSpliced() is a safer alternative
• Javascript.info cheatsheet on array methods; Addendum provided by Gemini covering newer methods
• Semantic intent of array find(): need to extract object; Semantic intent of array some(): need to only know if array has one or more matches for condition
• JS iteration methods handle empty slots in sparse arrays in different ways; forEach ignores; map preserves; filter strips out;
• Empty slot is different from undefined! Better to avoid empty slots and Array() legacy constructor which creates empty slots; Array.from() creates array without empty slots
• Newer methods do not treat empty slots specially and treat them as if they contain undefined; But how does one remember which method treats empty slot as undefined?
• MDN Array deep copy example is inappropriate and misleading; MDN documentation slips up at times
• Nested array join cannot be said to be recursive even though, due to type coercion, join is called for nested arrays but with default parameters
• React TypeScript code may be good but sucks time; Some small team web dev projects with quick delivery constraints may prefer React JavaScript instead of React TypeScript
• Array flat() method with default depth of 1: Nested arrays use case
• Skipping flatMap() method for now; Gem example of flatMap() to get all tags of blog posts in a single array
• Javascript.info section: 'Translate border-left-width to borderLeftWidth' solution fails on some edge cases
• Array toSorted() is modern approach instead of slice().sort()
• Using Template Literal (backticks) is preferred over string concatenation
• For for...of loops, industry standard is to use const rather than let: for (const item of arr) {
• Local mutation of accumulator in reduce is acceptable exception for performance reasons; Set is superior to reduce for unique arrays
• Create keyed object from array: reduce() with local mutation approach and modern Object.fromEntries() approach
• Clearing up confusion about local mutation in array reduce()

---

JavaScript Refresher and Detailed Study - Part 3

Published: 04 September 2026. Study & Dev work period: 27 to 30 Aug 2026, 3 to 4 Sep 2026

Contents

• First look at iterable in javascript.info
• Quick look at MDN: Iterators and generators; Did not see iterators and generators in React JS codebases I saw
• Why this. is needed in the iterable examples of javascript.info
• What's needed to make an object iterable?
• Javascript.info range iterator case does not really iterate over range object
• Vanilla JS program could leverage run to completion guarantee but that may not be recommended in React JS programs
• Dangers of merging iterator into the iterable
• JavaScript surrogate pair (e.g. most emojis) causes length property of string to give inaccurate string length; Array.from() fixes it
• Vast majority of apps still use standard .length property; Array.from() is slower and .length is good enough for most use cases
• Modern C++ std::string too faces the same issue; Special functions provide solution but at performance cost
• Using break in loop is acceptable as guard clause in modern codebases
• array-like only needs to have length property. Indexed properties are optional
• Global Symbol object and the Symbol.iterator primitive; Bracket notation [Symbol.iterator] is necessary to use it.
• Value word overloaded in JavaScript which can confuse newbies
• Implicit stringification of object to "[object Object]"
• Map and Set examples of javascript.info
• Big-O Time Complexity (performance) in context of JS Map and Set
• When to use Map and when to use Object
• When to use Set and when to use Array
• [...new Set(arr)] is overwhelmingly preferred over Array.from(new Set(arr)) in modern JavaScript and React codebases.
• iterable object is the right term for what map.keys() returns
• WeakMap and WeakSet
• Arrays also have keys(), values() and entries() methods like Map and Set
• Global Object constructor of plain objects supports static keys(), values() and entries() methods which take in object as parameter and return arrays not iterators
• for...of is the recommended way to iterate over an array; Array supports for...in but using that is not recommended
• JS array is very different from C++ array and more like highly optimized std::vector combined with a built-in algorithmic toolkit
• Inlining Object.values(user) directly within the for...of statement is preferred in modern JavaScript
• Object transformation pipeline code in modern JS: Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, value * 2]))
• Performance aspect of using reduce for summing a numeric value as against using imperative for...of loop
• Why parentheses are needed in ({title, width, height} = {title: "Menu", width: 200, height: 100});
• Nested destructuring is not recommended to use in production code
• For functions accepting optional configuration objects - function showMenu({ title = "Menu", width = 100, height = 200 } = {}) { - pattern is recommended
• For reducing down to a primitive, use reduce. For tracking complex state across iterations, use imperative loop
• Swap variables pattern - [guest, admin] = [admin, guest]; - is widely used
• Node.js does not have simple prompt statement; readline/promises is built-in but needs some code; Third-party libs provide such functionality
• Use browser console or snippets to run tutorial code that uses prompt
• Options Object parameter pattern (showMenu({ title, width, height } = {})) trades the brevity of standard function calls for structural flexibility
• Rest pattern for older browsers needs Babel to transpile the code and not polyfill it

---

JavaScript Refresher and Detailed Study - Part 4

Published: 10 September 2026. Study & Dev work period: 5 to 9 Sep 2026

Contents

• JavaScript Date objects represent a single moment in time in a platform-independent format and is timezone-agnostic - MDN
• JS .toString() output always uses GMT and not UTC due to historical reasons
• By default, alert uses .toString() method on Date objects showing local time but console.log on node.js uses .toISOString() which shows absolute UTC time
• Date object always stores date time in UTC (Absolute UTC, UTC+0) whose value is projected/converted to local date time or vice-versa for output/input purposes
• JavaScript Date time string format
• Main ways in which Date constructor can be used to create a new Date object; Date constructor views parameters as UTC or local time based on number of parameters with one exception
• Creating date object with date only component parameters viewed as local date
• Date constructor month parameter strangely is 0 indexed due to historical reasons
• Issue of Mutability of set methods of Date object (Value Semantics expected): Inconsistent with modern languages like C#, Java and Python; New Temporal API fixes it
• Date time component segment silent 'carry over' or 'borrow from' aspect of JS Date
• date-fns library is preferred over native Date arithmetic; Temporal API is another option but that is new and so browser support may be limited
• Date.toISOString() is badly named as name implies that it simply prints the string in ISO format; As it prints time always in UTC it should have had UTC in its name
• Why did node.js not use local time for console.log for date variables by default, and thus be consistent with browser?
• Better 'Format the relative date' solution than javascript.info tutorial solutions
• Date is a built-in object. Creating a Date object requires using new.
• Constructor function in JavaScript
• new and prototype were part of JavaScript 1.0 in 1995
• None of the languages I worked with in 1984 to 2002 - C++, C#, PL/1, C, COBOL, BASIC (including Microsoft Visual Basic) and very little bit of Java - were protoype based
• JavaScript prototype is based on Self language
• MDN Global Objects (Built-in objects) page
• undefined, Infinity and NaN global value properties are there due to legacy reasons
• Global isNaN() acts like isNotNumeric and is retained due to legacy reasons. Number.isNaN() acts as expected
• Recommended way in JS to check if string has only numeric digits is to use Regular Expressions. Validator.js, HTML5 validation, Zod are useful for such checks
• globalThis global property is a standardized, environment-agnostic way to get global this object
• Global value properties are not global objects
• Global objects term seems to be little loose; Global this object has member objects which seem to be referred to as global objects
• In ES modules this at global level evaluates to undefined. globalThis will evaluate to global this object
• Function properties of global object; JS function-as-object quirk; eval() exception related to Direct vs. Indirect
• Legacy reasons for function properties of global object
• Overview of many member objects of global object
• Why have BigInt global object as well as BigInt primitive? Similar question for other primitives
• Lack of consistency on when to use new and when not to, for member objects of global object (global objects)
• All properties and objects of global object are created and available before app JavaScript code starts execution
• The phrase 'using String as a constructor' implies String function is being invoked with new
• MDN Global Objects page does not mention what is recommended to use or not recommended but individual property pages of Global object members does mention it
• Different approach of C++ (#include) and JavaScript for standard/built-in objects; For user/library objects JS uses ES Modules (import) which has some approach similarity with C++ (#include)
• Built-in digression took lot of time; Postponing prototype digression
• String implicit wrapper test code; Modern JavaScript engines (like V8) bypass creation of wrapper objects for primitives
• JavaScript engine tags all primitive data variables with an internal type identifier which helps to identify associated wrapper objects; null and undefined are exceptions - no wrapper objects
• C++ world frowns upon 'under the hood' convenience tricks like auto-boxing but they are fine in JavaScript; TypeScript enforces strict typing like C++
• JavaScript does not do function parameter type coercion like C++; TypeScript shows static function parameter type mismatch errors at compile time but at runtime only JavaScript code is present

---

JavaScript Refresher and Detailed Study - Part 5

Published: 20 September 2026. Study & Dev work period: 10 Sep 2026, 18 to 20 Sep 2026

Contents

• How common is it to have toJSON() method defined for an object when doing JS web app dev
• For browser side debugging, console.log for objects is good; For terminal debugging, JSON.stringify() with space 2 parameter or console.dir handles deeply nested objects
• Date objects are serialized to string by default by JSON.stringify() but not deserialized to date object by default by JSON.parse(); Solutions to this issue
• Next.js uses custom React serialization format that supports Date, Map, Set, and even Promise objects. JSON.stringify() and JSON.parse() do not handle them properly. BigInt issue
• JS namespace object is not really a POJO - Plain Old JavaScript Object
• Informal definition of JS namespace object
• MDN page on JSON imprecisely refers to "All properties and methods of JSON"
• JavaScript does not have proper namespace mechanism like C++ has; Namespace objects and ES6 Module imports are recommended way to handle namespaces in JS
• MDN JSON page uses static informally; JavaScript has static keyword in context of class; MDN is a Wiki, Not a Spec
• ECMA specification for JSON object does not use static word for JSON object functions
• console.log shows <ref *1> as a flag to later tell a circular reference is pointing to it
• Recursion and stack - Intro
• Using Array reverse() mutating method is recommended for temporary arrays within function for efficiency
• Recursion related hard stack limit: Node.js and most modern browsers typically throw a fatal RangeError: Maximum call stack size exceeded anywhere between 10,000 and 15,000 stack frames
• In modern enterprise JS: Shallow data - recursion is safe; Linear/Unbounded data - don't use recursion
• The Architectural Heuristic: Iteration vs. Recursion in JavaScript
• Depth check before using recursion is anti-pattern; If recursion is required for linear/unbounded data, simulated call stack on heap is better solution
• arguments object is not used in modern JavaScript, having been completely superseded by rest parameters (...args)
• spread syntax [...str] is preferred for straightforward conversions; Array.from() is used when you need to transform the data during the conversion
• To copy objects, in modern JS apps, spread { ...obj } is the absolute default for all state updates and data transformations; structuredClone() is used only in exception cases
• spread-and-overwrite pattern is common in modern JS codebases; Efficiency is not an issue
• Array spread works on iterables including Map and Set
• Object spread is somewhat different from Array Spread; apply and Object.assign is ignored in modern JS in favor of the spread syntax
• Modern JS coding style for temporary loop variables whose values have to be remembered across loop iterations: Declare outside loop with function scope
• JavaScript closure informal definition
• JavaScript closure improved informal definition
• currying - Functional Programming concept
• closure-returning pattern applied to filter or map is used only in some cases in modern JS
• Lexical Environment is created per code block; special execution rule for for (let ...) that automatically binds a fresh Lexical Environment per iteration
• IIFEs are not obsolete - they are used in modern React app codebases
• Function Arity inspection (number of named parameters declared in its signature) is rarely used in modern JS apps but modern JS libraries use it
• Using function properties to store active application state is not recommended in modern JavaScript apps with some exceptions
• Named Function Expression (NFE) is useful for recursion
• Named exports that are imported as needed and class instances are the norm for JS libraries today; Using function properties in JS libraries API is viewed as an outdated anti-pattern
• Dot operator chaining is commonly used but function () chaining is used rarely in modern JS app code
• new Function is effectively banned in modern JS app code due to security issues

---