Day 1 Study Notes – JavaScript Fundamentals:
Data Types, Scope & Hoisting
JavaScript’s foundations rest on understanding how values live in memory, how variables are
created, and how the engine executes your code. Mastery here prevents subtle bugs and
equips you to reason confidently in interviews.
Primitive vs Reference Types
JavaScript offers 7 primitive data types—string, number, bigint, boolean, undefined, null, and
symbol—plus the object reference type family [1] [2] .
Key Properties
Immutability: primitives can’t be altered in place; any “change” yields a new value [3] [1] .
Storage: primitives live on the stack; reference types store an address on the stack that
points to heap memory where the actual object resides [4] [5] .
Copy semantics: assigning a primitive copies its value; assigning a reference copies only the
pointer, so two variables can mutate the same object [6] [4] .
Analogy: Think of primitives as laser-printed tickets—each copy is its own piece of
paper. Objects are Dropbox links—everyone you share the link with opens the same
folder.
Type Example literal Notes
IEEE-754 double-precision; safe integers up to
number 42, 3.14
9,007,199,254,740,991 [7] .
Integers beyond safe number range; cannot mix with number
bigint 9007199254740995n
arithmetic [8] [9] .
UTF-16 sequence; auto-boxed to String object when methods are
string 'Hello', \`Hi!\`
accessed [2] .
boolean true, false Implicitly converts to 1/0 in numeric contexts [10] .
default uninitialized
undefined Returned by variables hoisted with var but not yet assigned [11] .
value
null deliberate “empty” value Typeof quirk: typeof null returns "object" (legacy bug) [12] .
symbol Symbol('id') Unique, non-enumerable property keys [13] .
object* {}, [], function(){} Mutables—arrays, functions, dates, etc.
*object is technically a non-primitive “reference type.”
Type Coercion & Conversion
JavaScript freely converts between strings, numbers and booleans when operators demand
it [14] [15] .
Implicit Coercion Pitfalls
5 + '10'; // "510" (number → string)
'5' - 2; // 3 (string → number)
0 == '0'; // true (== allows coercion)
0 === '0'; // false (=== blocks coercion)
Analogy: JavaScript is a multilingual waiter. If any guest speaks “string,” the waiter switches
everyone to that language; subtraction only speaks “number.”
Explicit Conversion
Use Number(), String(), Boolean() for clarity and interview-safe answers [10] [16] .
Scope: Global, Function & Block
Global scope: variables declared outside any function; attached to window in browsers [17] .
Function scope (var): visible throughout the function where defined, regardless of block
braces [18] .
Block scope (let, const): visible only inside the nearest {} block [18] [19] .
Analogy:
Global scope = public park
Function scope = private office (accessible anywhere in the office)
Block scope = cubicle (accessible only inside the cubicle walls)
Variable Keywords: var vs let vs const
Feature var let const
Scope Function / global [18] Block [18] Block [18]
Initialized to Uninitialized (TDZ) Uninitialized (TDZ) – must
Hoisting value [21] [22]
undefined [11] [20] assign [22]
Re-declaration
Yes in same scope [18] No (SyntaxError) [18] No
allowed
Re-assignment No (but internal object
Yes Yes
allowed mutation allowed)
Best-practice
Avoid in modern code [23] Mutable variable Constant references
usage
Hoisting & the Temporal Dead Zone (TDZ)
During the creation phase of an execution context, declarations are hoisted [20] [24] .
var variables are set to undefined; functions receive their full body [20] .
let/const exist in TDZ—accessing them before initialization throws ReferenceError [21] [22] .
Analogy: Hoisting is like reserving seats in a theater before people arrive. var seats have
placeholders labeled “undefined”; let/const seats are roped off until the ticket holder
shows up.
Hoisting Visualization
Execution Context & Call Stack
Every script starts with a Global Execution Context (GEC); each function call creates its own
Function Execution Context (FEC) pushed onto the call stack [25] [17] [26] .
Phases in an Execution Context
1. Memory/Creation: space for declarations (undefined or TDZ).
2. Execution: code runs line-by-line; inner function calls push new contexts [24] [27] .
Stack overflow occurs if contexts pile up indefinitely (e.g., unbounded recursion) [26] .
Call Stack Push-Pop Illustration
Day-1 Practice Exercises
1. Predict-the-Output (Scope & Hoisting)
[Link](a); // ?
foo();
function foo() {
[Link](b); // ?
var b = 5;
}
let a = 3;
Expected: first line ReferenceError (TDZ for a) [21] ; inside foo, undefined due to var hoisting [11] .
2. Primitive vs Reference Mutation
let score = 10;
let copy = score;
copy += 5;
[Link](score); // ?
const obj1 = {val: 1};
const obj2 = obj1;
[Link] = 7;
[Link]([Link]); // ?
Discuss why primitives stay 10 while objects share updated value 7 [6] .
3. Coercion Quiz
Fill table with results:
Expression Result Reason
'5' + 3
'5' - 3
true + 2
null == 0
null === 0
Expect: "53", 2, 3, false, false [14] [15] .
4. Build a Simple Execution Visualizer
Using comments, annotate lines of a small function showing when contexts are pushed/popped
and variables hoisted. Reinforces mental model [25] .
5. TDZ Safe Refactor
Rewrite code so no variable is accessed before initialization:
if (condition) {
[Link](total);
const total = compute();
}
Solution: move declaration above usage or restructure logic.
Flash-Card Quick Review
Seven primitives & immutability.
=== preferred over == to avoid coercion surprises.
let/const stay in TDZ until initialized.
var hoists with undefined.
Call stack uses LIFO: push on call, pop on return.
Interview Corner – Day 1 Must-Answer Questions
1. Explain the difference between primitive and reference types with examples [3] [6] .
2. What is hoisting? How do var, let, and const behave differently [20] [22] ?
3. Define the temporal dead zone and give a scenario that throws ReferenceError [21] [28] .
4. How does the JavaScript call stack work in single-threaded execution [17] [29] ?
5. Why is null an “object” according to typeof [12] ? (Historical bug.)
Real-World Analogy Recap
Primitives = printed tickets; references = Dropbox links.
Hoisting = theater seat reservations.
TDZ = velvet rope blocking VIP seats until guests arrive.
Call stack = stack of plates; last placed is first removed.
Primitive vs Reference Memory Model
Practice, quiz yourself, and mentally execute small scripts until these concepts feel instinctive.
Tomorrow we’ll dive into functions, higher-order patterns, and arrow-function this nuances.
⁂
1. [Link]
2. [Link]
3. [Link]
4. [Link]
5. [Link]
6. [Link]
7. [Link]
8. [Link]
9. [Link]
10. [Link]
11. [Link]
12. [Link]
13. [Link]
14. [Link]
15. [Link]
16. [Link]
17. [Link]
18. [Link]
ipt/
19. [Link]
20. [Link]
21. [Link]
22. [Link]
23. [Link]
24. [Link]
25. [Link]
26. [Link]
27. [Link]
d0
28. [Link]
29. [Link]