What is JavaScript?
JavaScript is a lightweight, interpreted programming language with first-class functions. Originally created by Brendan Eich at Netscape in just 10 days in 1995, it has grown into the world's most widely used programming language - the only language that runs natively in every web browser.
JavaScript is a multi-paradigm language: you can write it procedurally, object-oriented (using prototypes or ES6 classes), or functionally. It is dynamically typed, meaning variables can hold any type of value without explicit declarations.
JavaScript has been the most-used programming language in Stack Overflow's annual developer survey for 12 consecutive years (2012-2024). Over 98% of websites use it on the client side.
How JavaScript Runs
JavaScript runs in two main environments:
In the Browser (Client-side)
Every browser - Chrome, Firefox, Safari, Edge - ships with a built-in JavaScript engine:
- V8 - Chrome, Edge, Opera, Node.js
- SpiderMonkey - Firefox
- JavaScriptCore - Safari
When a browser loads a webpage, it downloads the HTML, CSS, and JavaScript files. The JS engine parses and executes the JavaScript, which can manipulate the page, respond to user input, and communicate with servers - all without a page reload.
On the Server (Node.js)
In 2009, Ryan Dahl took Chrome's V8 engine and packaged it as Node.js - allowing JavaScript to run outside the browser. This enabled JavaScript developers to also write backend APIs, command-line tools, and servers using the same language they use for the frontend.
PHP runs on the server and sends finished HTML to the browser. JavaScript runs in the browser after the page loads, enabling interactive UIs without page refreshes. With Node.js, JavaScript can do both.
What Can JavaScript Do?
- Animate elements and update the page
- Form validation before submission
- Fetch data from APIs (AJAX / fetch)
- Build single-page applications (SPAs)
- Handle user events (clicks, keyboard, scroll)
- Store data locally (localStorage, IndexedDB)
- REST APIs and web servers
- Real-time apps (WebSockets, Socket.io)
- Command-line tools and scripts
- Database operations (MongoDB, PostgreSQL)
- Build tools (Webpack, Vite, ESBuild)
- Serverless functions (AWS Lambda, Vercel)
JavaScript vs Other Languages
| Language | Where It Runs | Type System | Primary Use |
|---|---|---|---|
| JavaScript | Browser + Server (Node.js) | Dynamic | Web (frontend + backend) |
| TypeScript | Browser + Server (compiled) | Static | Large-scale JS apps |
| PHP | Server only | Dynamic | Web backend, CMS |
| Python | Server, scripts, AI/ML | Dynamic | Web, data science, AI |
| Java | Server, Android | Static | Enterprise, mobile |
Your First JavaScript Program
The quickest way to run JavaScript is the browser console. Press F12 in Chrome, click Console, and type:
console.log("Hello, World!");A more practical example - working with variables and the DOM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First JS</title>
</head>
<body>
<h1 id="greeting">Loading...</h1>
<button id="btn">Click me</button>
<script>
const name = "RubanLearn";
const hour = new Date().getHours();
const timeOfDay = hour < 12 ? "Morning" : hour < 18 ? "Afternoon" : "Evening";
document.getElementById("greeting").textContent =
`Good ${timeOfDay}, ${name}!`;
document.getElementById("btn").addEventListener("click", function () {
alert("You clicked the button!");
});
</script>
</body>
</html>Inline <script> tags are fine for learning. In real projects, put your JS in a separate app.js file and include it with <script src="app.js" defer></script>. The defer attribute makes it load after the HTML is parsed.
ECMAScript Versions
JavaScript is standardized as ECMAScript. New features ship annually:
| Version | Year | Key Features |
|---|---|---|
| ES2024 | 2024 | Promise.withResolvers, Object.groupBy, ArrayBuffer.resize |
| ES2023 | 2023 | Array.findLast(), toSorted(), toReversed(), hashbang grammar |
| ES2022 | 2022 | Class fields, top-level await, at(), Object.hasOwn() |
| ES2021 | 2021 | ??=, ||=, &&=, String.replaceAll(), Promise.any() |
| ES2020 | 2020 | Optional chaining ?., nullish coalescing ??, BigInt, globalThis |
| ES6 / ES2015 | 2015 | Biggest update: let/const, arrow functions, classes, modules, Promises, template literals, destructuring |
| ES5 | 2009 | strict mode, JSON, Array methods (map/filter/reduce) |
Focus on ES6+ features throughout this tutorial. All modern browsers and Node.js 18+ support ES2022 fully. Avoid learning old ES5 patterns like var and function expressions as your default - they exist but modern code prefers let/const and arrow functions.
Common Beginner Mistakes
- Using
==instead of===- always use strict equality - Declaring variables with
var- useletorconstinstead - Forgetting that JavaScript is asynchronous - code does not always run top-to-bottom
- Confusing
nullandundefined- both mean "no value" but in different contexts - Mutating arrays/objects accidentally - pass by reference, not by value
Next Steps
Now that you understand what JavaScript is, set up your environment and start coding: