Learn JavaScript Fundamentals Before Frameworks (Here's What Matters)

It's tempting to jump straight into React or another framework. That's where the jobs are, right? But developers who skip the language itself tend to hit the same wall: everything works until something goes wrong, and then they can't tell whether the problem is the framework, the library or JavaScript.

Frameworks come and go. These fundamentals have stayed the same for years, and they'll make every framework easier.

1. Values vs references

This single concept explains a huge number of bugs.

let a = 5
let b = a
b = 10        // a is still 5: primitives are copied

const user = { name: 'Asha' }
const copy = user
copy.name = 'Ravi'   // user.name is now 'Ravi' too: objects are shared

Primitives (numbers, strings, booleans) are copied. Objects and arrays are passed by reference, so two variables can point to the same thing.

Why it matters: React and similar frameworks detect changes by comparing references. Mutating an object in place (state.items.push(x)) often doesn't trigger an update, while creating a new one ([...state.items, x]) does. It's also why useEffect dependencies on objects can loop forever. (Here's that bug explained.)

2. Scope and closures

A function remembers the variables from where it was created, not where it's called.

function makeCounter() {
  let count = 0
  return () => ++count
}
const next = makeCounter()
next() // 1
next() // 2

Closures are everywhere: event handlers, callbacks, React hooks. "Stale state" bugs are closures holding on to old values. Once you understand closures, those bugs stop being mysterious.

Also use const and let instead of var. They're block-scoped, which avoids a whole category of surprises.

3. Array methods

Modern JavaScript code, and especially UI code, is full of these:

const active = users.filter(u => u.active)
const names = active.map(u => u.name)
const total = orders.reduce((sum, o) => sum + o.amount, 0)
const admin = users.find(u => u.role === 'admin')
const hasOverdue = invoices.some(i => i.overdue)

Learn map, filter, find, some, every, reduce, includes and sort (and note that sort mutates the original array, while toSorted returns a new one). Rendering a list in any framework is just map over an array.

4. Destructuring, spread and optional chaining

const { name, email } = user
const [first, ...rest] = items
const updated = { ...user, name: 'New name' }
const city = user?.address?.city ?? 'Unknown'

These show up in every modern codebase and framework example. They're also the cleanest way to create updated copies instead of mutating.

5. Asynchronous JavaScript

The web is asynchronous: network requests, timers and user events all finish "later."

• Understand the event loop at a high level: JavaScript runs one thing at a time and picks up async results when it's free.
• Learn promises, then async/await.
• Handle errors with try/catch, and check response.ok with fetch.
• Know when to run things in parallel with Promise.all.

Most "my data is undefined" bugs are async bugs. (Ten common async mistakes.)

6. The DOM and events

Frameworks manage the DOM for you, but knowing what's underneath helps:

• Selecting and changing elements
• Event listeners, bubbling and preventDefault
• Forms and input values

Build at least one small project with plain DOM code. It'll make you appreciate what frameworks do, and you'll understand their abstractions instead of treating them as magic.

7. this, briefly

this depends on how a function is called, not where it's defined. Arrow functions don't have their own this; they use the surrounding one. Modern code with functions and hooks uses this less than older code, but you'll still meet it in classes and libraries.

8. Modules

import and export let you split code into files. Understand default vs named exports, and you'll avoid a lot of "X is not a function" errors caused by importing the wrong thing.

How to practise

• Build without a framework first: a todo list, a quiz, a weather app using a public API.
• Rebuild a small framework feature yourself, like a component that re-renders when data changes. It's eye-opening.
• Read errors carefully. Most JavaScript errors point straight at a misunderstanding of one of the concepts above. (Reading error messages.)

When are you ready for a framework?

When you can build a small interactive app that fetches data, updates the page and handles errors, using plain JavaScript and without copying a tutorial line by line. That usually takes weeks, not months, and it pays off for years.

Next steps: the full stack roadmap.

FAQ

Should I learn JavaScript before React?

Yes. React is JavaScript, and most React problems are really JavaScript problems: references, closures, async code and array methods. A few weeks on fundamentals makes React much easier.

How much JavaScript do I need to know before learning a framework?

Enough to build a small interactive app with DOM manipulation, fetch, array methods and async/await without following a tutorial step by step.

Is JavaScript still worth learning?

Yes. It runs in every browser and powers a large share of backend, mobile and desktop development through Node.js and related tools.