Free lesson · JavaScript Basic to Advance

Modern JavaScript: The ES6+ Era

Easy5 min read

What "Modern JavaScript" Actually Means

You've heard the phrase "modern JavaScript" thrown around. Tutorials promise to teach it. Job descriptions ask for it. But nobody seems to define exactly what it is.

Here's my working definition: modern JavaScript is the version of the language that emerged after ES6 in 2015, written with the tools and ecosystem that have matured around it since. That includes the language features (let, const, arrow functions, classes, modules, async/await), the type system (TypeScript), the frameworks (React, Vue, Angular, Svelte), the runtimes (Node, Deno, Bun), and the tooling (Vite, Webpack, esbuild) that together make up the real working environment of a JavaScript developer in 2026.

Module 1 has shown you where JavaScript came from. This Topic closes the loop by showing you where it is now and where it's heading next — so when you start Module 2 and begin learning the language deeply, you'll know the landscape you're learning into.

The Modern Language

Here's a snippet of JavaScript written in the style you'll see throughout this course and in modern codebases:

const users = [
  { name: "Olena", role: "Head of Product", company: "Microsoft" },
  { name: "Nikhil", role: "CTO", company: "Google" },
  { name: "Emeka", role: "Head of Data", company: "Netflix" }
];

const namesAtGoogle = users
  .filter(user => user.company === "Google")
  .map(user => user.name);

const greeting = namesAtGoogle.length > 0
  ? `Engineers at Google: ${namesAtGoogle.join(", ")}`
  : "No engineers from Google in the list";

console.log(greeting);

This is what modern JavaScript looks like. It uses const instead of var. It uses arrow functions instead of function expressions. It uses template literals (those backticks) instead of string concatenation. It chains array methods like filter and map to express data transformations declaratively. Every feature in that snippet was either added or matured in the post-ES6 era.

If you opened a real production codebase at a tech company today, you would see code that looks like this. You would not see code that looks like the pre-ES6 style I learned from in 2018. The modern style is the default now, and that's what this course teaches.

The Type System Question: TypeScript

You can't talk about modern JavaScript without talking about TypeScript. So let me be direct about what TypeScript is.

TypeScript is JavaScript with a static type system on top. Microsoft built it. It compiles down to plain JavaScript before it runs. The runtime behavior is identical to JavaScript — TypeScript adds checks that happen at write-time, not at runtime.

Here's the same code in JavaScript and then in TypeScript:

// JavaScript
function greet(name) {
  return `Hello, ${name}`;
}
greet(42);  // Runs without complaint, produces "Hello, 42"

// TypeScript
function greet(name: string): string {
  return `Hello, ${name}`;
}
greet(42);  // TypeScript error before the code ever runs:
            // "Argument of type 'number' is not assignable to parameter of type 'string'"

Same logic. TypeScript catches the mistake before you ship the code. JavaScript would happily run the broken version and produce a weird result.

Most production codebases today are TypeScript. If you're applying for senior JavaScript roles, fluency in TypeScript is increasingly expected. But — and this is important — you cannot learn TypeScript without first learning JavaScript deeply. TypeScript is JavaScript with extra rules layered on. The JavaScript underneath has to be solid first.

This course teaches JavaScript. We mention TypeScript briefly in Module 10 because you need to know it exists. But the depth of TypeScript belongs in its own course, after you've mastered the foundations here.

The Framework Landscape

Now to the question every learner asks me: "Should I learn React, Vue, or Angular?"

I'll give you the answer I wish someone had given me. Learn the language first. The framework comes second.

Frameworks are tools built on top of JavaScript. They make certain patterns easier, certain problems faster to solve, certain projects more maintainable. They are not the language. They sit on top of it.

Here's the current landscape, very briefly:

• React is by far the most popular frontend framework. Built by Meta. Used at thousands of companies. If you're going to learn one framework, this is the safe bet.
• Vue is the second-most-popular. Smaller learning curve than React in some ways. Strong in Asia, especially.
• Angular is Google's framework. More opinionated than React or Vue. Used heavily in enterprise contexts.
• Svelte and Solid are newer frameworks worth knowing about. They take different architectural approaches. Smaller communities, growing fast.

On the backend, the framework choice matters less because there's less variation. Most Node.js backends use Express, Fastify, or NestJS.

None of this is what you should focus on right now. Frameworks change. React today is not React from 2018. The framework du jour in 2030 may not exist yet. What doesn't change is the language underneath. Scope, closures, prototypes, the event loop, async patterns — these are stable. Once you understand them, picking up any framework is a weekend's work.

This isn't theoretical for me. When I started, React was "the framework." By the time I joined Microsoft, the ecosystem had five viable options. The reason I could move between them wasn't that I was a fast learner — it was that I had spent time on the fundamentals before I touched any framework. That's what this course is for.

graph TD
    A[JavaScript Language] --> B[Browser]
    A --> C[Servers via Node.js]
    A --> D[Mobile via React Native]
    A --> E[Desktop via Electron]
    A --> F[Build Tools]
    A --> G[Serverless]

    B --> B1[React]
    B --> B2[Vue]
    B --> B3[Angular]
    B --> B4[Svelte]

    C --> C1[Express]
    C --> C2[Fastify]
    C --> C3[NestJS]

    style A fill:#7c3aed,color:#fff

This diagram shows the modern JavaScript ecosystem. At the center is the JavaScript language itself. From the language, the ecosystem branches into six major use cases: browsers, servers via Node.js, mobile apps via React Native, desktop apps via Electron, build tools, and serverless functions. Within the browser branch, popular frontend frameworks include React, Vue, Angular, and Svelte. Within the server branch, popular backend frameworks include Express, Fastify, and NestJS. The language is the foundation underneath all of these.

Where JavaScript Is Going

A few directions the language and ecosystem are heading, so you're not surprised when you encounter them:

WebAssembly (Wasm) is sometimes positioned as a "JavaScript replacement," but that's misleading. Wasm is a way to run other languages — Rust, C++, Go — inside the browser, complementing JavaScript rather than replacing it. Heavy computational work increasingly runs in Wasm. The orchestration around it stays in JavaScript.

New runtimes are competing with Node.js. Deno (built by Ryan Dahl himself, the creator of Node) and Bun are gaining traction. They aim to fix some of Node's design quirks while staying largely compatible. Production usage is still dominated by Node, but Deno and Bun are worth watching.

TypeScript convergence. Some recent JavaScript proposals look more like TypeScript than traditional JavaScript. The line between the two languages is blurring. Don't be surprised if features that feel TypeScript-like start arriving in plain JavaScript in the next few years.

The annual release cadence continues. Every year, ECMAScript adds a small set of features. None of them are individually transformative anymore — the big leap was ES6 in 2015. But the steady trickle of improvements is making the language continuously more pleasant to write.

Where to Find Authoritative References

When you have a question about JavaScript that this course doesn't answer, two sources are worth bookmarking:

MDN (Mozilla Developer Network) at developer.mozilla.org is the canonical reference for JavaScript and web APIs. Every method, every feature, every edge case is documented there. The examples are correct. The information is current. If you're going to bookmark one site for JavaScript reference, bookmark MDN.

The ECMAScript specification at tc39.es/ecma262 is the official standard. You don't need to read it for most learning. But if you ever want to know exactly how a language feature is defined — for an interview question or to settle an argument — the spec is the source of truth.

Tutorial sites vary wildly in quality and recency. I learned from outdated tutorials in 2018 and it cost me months of unlearning bad habits. Be cautious with anything older than 2018, anything that uses var as the default, or anything that doesn't mention const and let in its first few lessons.

Why This Matters in Interviews

Interview: You don't need to memorize the framework landscape for interviews. You need to know it exists.

Interviewers expect candidates to be able to have a coherent conversation about modern JavaScript: what TypeScript is and why people use it, what a framework is and how frameworks differ from libraries, what's the difference between frontend and backend JavaScript, what npm does. These are baseline questions. Get them wrong and you signal that you've been learning JavaScript in isolation.

The right level of awareness: be able to talk about all of this for two minutes, then redirect the interview back to the fundamentals you actually know deeply. "I've used React in personal projects but I haven't shipped production React. What I do know well is JavaScript itself — closures, prototypes, async patterns. Want me to walk through one of those?" That kind of self-aware response signals maturity.

What This Course Will Do for You

You've now seen JavaScript's full arc — designed in ten days in 1995, standardized as ECMAScript, broken out of the browser by Node in 2009, modernized by ES6 in 2015, evolving annually since then, embedded in every layer of modern software development.

What this course teaches is the foundation underneath all of that. Module 2 starts with values and types. Module 3 covers variables, scope, and hoisting. Modules 4 through 9 take you progressively deeper — into functions, closures, prototypes, the this keyword, async programming, and the event loop. By Module 13, you'll understand how the JavaScript engine itself works underneath the language. By Module 14, you'll be able to walk into a FAANG interview and discuss JavaScript at the level interviewers actually expect.

The framework you pick after this course doesn't matter much. The depth you build during this course matters enormously.

Let's begin.

Try It

Exercise: Make two lists:

List 1: JavaScript-adjacent technologies you've already used or heard of. Examples: TypeScript, React, Vue, Angular, Node.js, Deno, npm, Webpack, Vite, Express, Next.js, React Native, Electron.

List 2: JavaScript fundamentals you currently feel uncertain about. Examples: scope, closures, the this keyword, prototypes, the event loop, async/await, promises.

Compare the two lists. If List 1 is longer than List 2, you've been learning the ecosystem before the language. That's a common mistake — I made it myself. This course is going to invert that ratio. By the time you finish Module 14, the items on List 2 will be things you understand deeply, and the items on List 1 will feel like trivial tooling on top of a foundation you actually own.

Back to JavaScript Basic to Advance