Skip to main content

Command Palette

Search for a command to run...

JavaScript’s Core Secrets - Everything is object

Updated
5 min read

The Building Blocks (Primitives)

Think of primitives like the basic Lego pieces. They're simple, they're straight forward, and you can't break them down further.

  • Strings - “hello“

  • Numbers - 24

  • Booleans - True/False

these are the simplest ones, nothing fancy.

Undefined - This is JavaScript saying "I've got nothing for you." It's what you get when something doesn't exist in memory yet. No box, no label, just... nothing.

Null - This is intentional nothing. It's you saying, "This should be empty." Which brings us to the Weirdest Thing in JavaScript(one of many weird parts, haha).

typeof null === "object"

It's basically a bug from JavaScript's early days that they can't fix now because it would break the entire internet. Back in 1995, when Brendan Eich was creating JavaScript in about 10 days (seriously), values were stored with a type tag. The tag for objects was 0, and null was represented as 0x00 in most platforms which made it look like an object. Oops. Now we're stuck with it.

Reference Types

Unlike primitives (which are just values), objects, arrays, and functions are references.Lets dig deep. Think of it like this, If I have a primitive, I'm holding the actual Lego piece. If I have an object, I'm holding a map to where the Lego castle is built. Two people can have the same map pointing to the same castle. If one person rearranges the castle, everyone with that map sees the changes.

let person = { name: 'Alex' }
let anotherPerson = person
anotherPerson.name = 'Jordan'
console.log(person.name) 

// Output 
// 'Jordan' - wait, what?!

Variables

var, let, const, why three ways to do the same thing?

var - The old way. It's like that friend who shows up uninvited to parties. var doesn't respect boundaries (block scope, hehe), it gets hoisted to the top (more on that soon), and it's just generally messy. Don't use it unless you're maintaining ancient code.

let & const: They respect block scope (anything inside {}, is a block).

Here's the real talk about const - It doesn't mean "immutable." It means "this reference can't change." You can't reassign the variable, but if it points to an object? You can change that object all day long(typical javascript nvm).

const myArray = []
myArray.push('surprise!') 
// Totally fine
myArray = ['new'] 
// Error! Can't reassign

Temporal Dead Zone - Fancy term for a simple concept. With let and const, you can't use them before they're declared. The space between the start of the scope and the declaration is the "dead zone."

Use const by default. Use let when you need to reassign. Use var never. and stay happy.

Execution Context

Every time a function runs, it gets its own little stage with its own props.

Global Context: The main stage. When your script starts, this is created first.

Function Context: Every function call gets its own mini-stage stacked on top.

The Call Stack: Imagine stacking plates. Each function call is a plate. When it's done, the plate is removed. Last in, first out. This is why infinite recursion breaks things, you run out of plates (stack overflow).

Here's the secret sauce: JavaScript runs in two phases.

  1. Memory Phase: JavaScript scans the code and says, "Okay, I see variables and functions. I'll set aside space for them."

  2. Execution Phase: Then it actually runs the code, line by line.

Hoisting

During the memory phase, JavaScript sets aside space. var variables: Get hoisted and initialized with undefined.

console.log(name) // undefined, not an error
var name = 'Alex'

let/const: Get hoisted but not initialized. That's why you get a reference error instead of undefined. Temporal deadzone in action.

Function declarations: Get fully hoisted. You can call them before they're defined.

sayHi() // Error!
let sayHi = function() { console.log('hi') }

Function expressions: Don't get hoisted (they're just variables).

SCOPE

Scope is about who can see what. JavaScript has three types:

Global: The outside world. Anything out here is visible everywhere

Function: Variables inside a function are only visible there.

Block: Anything inside {} when using let/const.

Lexical Scoping: Fancy term meaning "where you write it matters." Inner functions can see outer variables, but not vice versa.

Closures - The Magic Trick

Here's where JavaScript becomes interesting. A closure is when a function remembers and accesses variables from outside its own scope, even after that outer function has finished.

function createCounter() {
  let count = 0 

  return function() {
    count++ 
    return count
  }
}

const counter = createCounter()
console.log(counter()) // 1
console.log(counter()) // 2

Real uses: Private variables (like above), event handlers that need to remember stuff, callbacks.

The catch: Closures keep memory alive. If you're not careful, you can create memory leaks. But 99% of the time, it's fine.

Functions

Functions in JS are first class citizens. They can be assigned, passed around, returned just like any other value. cool right !

// Declaration - hoisted
function walk() {}

// Expression - just a value
const run = function() {}

Arrow functions: Shorter syntax, no this of their own (they inherit it), no arguments object. Great for callbacks, not great for methods that need this.

Parameters vs Arguments: Parameters are the recipe, arguments are the ingredients you actually use.

Default parameters: Life-changing. function greet(name = 'stranger') {}

Rest parameters: When you want "the rest of them." function sum(...numbers) {}

Higher-Order Functions

A higher-order function is either -

  1. A function that takes another function as input

  2. A function that returns a function

// Instead of this:
const doubled = []
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2)
}

// You write this:
const doubled = numbers.map(n => n * 2)

map Transform each item in an array
filter Keep only what you want
reduce Boil it down to one value

I'm not saying you need to memorize all this. Hell, I still Google the weird parts sometimes, I did a lot of googling for this as well. But understanding these concepts is like having a map in a foreign city. You might still take wrong turns.