Learn JavaScript - Introduction to JavaScript and Its Ecosystem

#Introduction

Your environment is ready from episode 0. Now it's time to answer the most fundamental question: what is JavaScript really, and why does it dominate the web? Episode 1 is the conceptual foundation — without understanding JavaScript's place in history and the ecosystem, many terms in later episodes will feel disconnected.

You'll learn the origins of the language, the important difference between JavaScript and ECMAScript, and a map of the modern ecosystem that lets JavaScript run in browsers, on servers, in mobile apps, and even on the desktop. At the end of the episode, you'll write a JavaScript program that runs in two places at once.

This episode is more storytelling than typing, but there's still code you must run. This is the mental foundation that will make the four phases of this series feel coherent.

#What Is JavaScript

JavaScript is an interpreted programming language that runs directly without a separate compilation step. The language has three characteristics that make it unique:

• Runs in the browser: the only programming language natively understood by all modern browsers without plugins.
• Dynamic and loosely typed: data types are determined at runtime, and variables can freely change type.
• Event-driven: designed to respond to user interactions like clicks, input, and scrolling in real time.

JavaScript is not a compiled language like C or Go. The code you write is executed directly by an engine — called V8 in Chrome, SpiderMonkey in Firefox, and JavaScriptCore in Safari. Each engine's job is to interpret and run code as fast as possible.

First JavaScript program

const pesan = "Halo, dunia!";
console.log(pesan);

Run the code above in the DevTools Console or via node index.js. const pesan = "Halo, dunia!" declares a constant, and console.log displays it. It looks simple, but underneath the engine works hard to interpret the code into machine instructions.

#A Brief History of JavaScript and ECMAScript

#Born in 10 Days

JavaScript was created by Brendan Eich in 1995 at Netscape, and — this is a well-known fact — written in about ten days. It was first named Mocha, then LiveScript, and finally JavaScript as a marketing strategy to ride on Java's popularity at the time.

That misleading name has never changed, even though JavaScript and Java have no technical relationship. In 1996, Netscape submitted the language to ECMA International to be standardized. That standard is what we call ECMAScript — abbreviated ES — and each version is released with a year or edition number.

#The Big Leap of ES6

From 1997 to 2015, ECMAScript developed very slowly. Everything changed in 2015 with the release of ES6, officially named ES2015. This leap brought the modern syntax you'll use throughout this series: let and const, arrow functions, template literals, destructuring, spread, and modules.

Modern syntax from the ES6 era

const daftar = [1, 2, 3];
const duaKali = daftar.map((angka) => angka * 2);
console.log(duaKali);

The code above uses an arrow function (angka) => angka * 2 and the map method — two features that didn't exist before ES6. Since then, ECMAScript has released new features every year, so the term "modern JavaScript" refers to syntax established after 2015.

#JavaScript vs ECMAScript vs TypeScript

These three terms are often mixed up, even though the differences are clear:

• ECMAScript: the language standard managed by ECMA International. It is a pure text specification.
• JavaScript: the concrete implementation of ECMAScript augmented with environment-specific facilities, such as the DOM in browsers or file modules in Node.js.
• TypeScript: a JavaScript superset created by Microsoft that adds a static type system, then compiles back down to JavaScript.

In other words, every JavaScript is ECMAScript, but not every ECMAScript is JavaScript. ECMAScript knows nothing about document or window — those belong to the browser environment. When episode 13 covers the DOM, you'll see this difference in action.

#A Map of the Modern JavaScript Ecosystem

#Runtime: Node.js and the Gateway to the Server World

In 2009, Ryan Dahl took the V8 engine and separated it from the browser, giving birth to Node.js. This was the moment JavaScript was no longer locked into the browser: it could now read files, handle networking, and become the foundation of servers. Node.js brought along npm — the largest JavaScript package registry in the world, with hundreds of thousands of packages.

#The Toolchain Around JavaScript

The modern ecosystem consists of several layers you'll encounter gradually:

• Package managers: npm, yarn, pnpm — install project dependencies.
• Bundlers: Vite, Webpack, esbuild — combine many files into a bundle.
• Frameworks: React, Vue, Svelte — build interfaces with structured patterns.
• Linters and formatters: ESLint and Prettier — keep code quality high.

You don't need to master all of them today. Episodes 20 and 21 will cover tooling and bundlers specifically. What you should carry away now is a mental map: JavaScript is a language, and around it sits an ecosystem of tools that make the language productive at scale.

#Running JavaScript in Two Environments

One of JavaScript's strengths is that the same code can run in the browser and on the server. The example below writes a file and runs it in Node:

cat > halo.js <<'EOF'
const nama = "JavaScript";
console.log(`Selamat belajar ${nama}!`);
EOF
node halo.js

Note the template literal `Selamat belajar ${nama}!` — an ES6 feature that inserts a variable's value directly into a string. node halo.js runs the same file you could open in the browser via a script tag. One language, many environments.

#Wrap-Up

Episode 1 put JavaScript in context: born in 1995 in ten days, standardized as ECMAScript, making a big leap with ES6, and growing into a language that runs almost anywhere via Node.js and a massive tooling ecosystem.

Key takeaways:

• JavaScript is an interpreted, dynamic, and event-driven language.
• ECMAScript is the standard; JavaScript is its implementation.
• ES6 (2015) brought the modern syntax used throughout this series.
• Node.js opened JavaScript up to the server world, and npm became its largest registry.
• The same JavaScript code can run in the browser and in Node.js.
• The browser provides the DOM; Node.js provides file and networking facilities.

In the next episode 2 we'll cover variables, data types, and operators — how to declare values with let and const, get to know the seven primitive data types, and combine values with arithmetic, comparison, and logical operators. These are the most basic building blocks of all the code you'll ever write.