# What is JavaScript? > JavaScript is the language of the web. It runs in your browser, powers your servers, and is the most widely used programming language in the world. --- ## Introduction JavaScript is a **high-level**, **dynamic**, and **interpreted** programming language primarily used to make web pages interactive. It is one of the three core technologies of the web, alongside HTML (structure) and CSS (style). While HTML builds the skeleton and CSS adds the appearance, JavaScript brings the page to life — handling button clicks, form validation, animations, API calls, and much more. JavaScript runs directly in the browser without needing any installation. Open any browser, press `F12`, go to the Console, and you can start writing JavaScript right now. ```js console.log("Hello, World!"); ``` > JavaScript is not related to Java. The name was a marketing decision in 1995. The two languages are completely different. --- ## What is JavaScript? JavaScript is a **scripting language** that was originally designed to run inside web browsers to make pages dynamic and interactive. Over the years, it evolved into a full-featured programming language capable of building: - Frontend web apps (React, Vue, Angular) - Backend servers (Node.js) - Mobile apps (React Native) - Desktop apps (Electron) - Game engines - Machine learning tools (TensorFlow.js) **Key characteristics:** | Feature | Description | |---|---| | High-level | Closer to human language, abstracts hardware complexity | | Dynamic | Variables can hold any type; types are resolved at runtime | | Interpreted | Executed line by line, no manual compilation step | | Single-threaded | One task runs at a time on the main thread | | Event-driven | Responds to user actions, timers, network events | | Multi-paradigm | Supports OOP, functional, and procedural styles | ```js // A simple JavaScript example let name = "Vikas"; let age = 22; console.log(`My name is ${name} and I am ${age} years old.`); // Output: My name is Vikas and I am 22 years old. ``` > **MCQ 1** > What is JavaScript primarily designed to do? > - a) Style web pages > - b) Define the structure of web pages > - c) Add interactivity to web pages > - d) Manage databases > > **Answer: c) Add interactivity to web pages** --- ## History of JavaScript Understanding where JavaScript came from helps you understand many of its quirks and design decisions. **Timeline:** | Year | Event | |---|---| | 1995 | Brendan Eich creates JavaScript in 10 days at Netscape. Originally called "Mocha", then "LiveScript", finally "JavaScript". | | 1996 | Microsoft releases JScript (their own version) for Internet Explorer. | | 1997 | JavaScript is submitted to ECMA International for standardization. The standard is named **ECMAScript**. | | 1999 | ES3 released — introduced regular expressions, try/catch, and more. | | 2009 | ES5 released — strict mode, JSON support, Array methods like `.forEach`, `.map`. | | 2009 | Node.js released by Ryan Dahl — JavaScript can now run on the server. | | 2015 | ES6 (ES2015) released — the biggest update in JavaScript history. | | 2016+ | Annual releases: ES2016, ES2017, ... ES2024 | > The browser wars of the late 1990s were a chaotic period where different browsers implemented JavaScript differently. This is why JavaScript has some strange, legacy behavior even today. > **MCQ 2** > Who created JavaScript and in which year? > - a) Tim Berners-Lee, 1991 > - b) Brendan Eich, 1995 > - c) Ryan Dahl, 2009 > - d) Linus Torvalds, 1993 > > **Answer: b) Brendan Eich, 1995** --- ## ECMAScript (ES6, ES2020, etc.) **ECMAScript** is the official standard that defines how JavaScript should work. JavaScript is an *implementation* of the ECMAScript standard. Think of it this way: - ECMAScript = the rulebook - JavaScript = the actual language that follows those rules **Why does it matter?** When you see terms like `ES6`, `ES2020`, or `ESNext`, they refer to specific versions of the ECMAScript standard. Each version adds new features to the language. **Key ES versions and their features:** | Version | Year | Notable Features | |---|---|---| | ES5 | 2009 | `strict mode`, `JSON`, `Array.forEach`, `Object.keys` | | ES6 / ES2015 | 2015 | `let`, `const`, Arrow functions, Classes, Template literals, Promises, Modules | | ES2017 | 2017 | `async/await` | | ES2019 | 2019 | `Array.flat()`, `Object.fromEntries()` | | ES2020 | 2020 | Optional chaining `?.`, Nullish coalescing `??`, `BigInt` | | ES2022 | 2022 | Top-level `await`, Class fields | ```js // ES5 way var greet = function(name) { return "Hello " + name; }; // ES6 way (Arrow function + Template literal) const greet = (name) => `Hello ${name}`; // ES2020 Optional chaining const user = null; console.log(user?.profile?.avatar); // undefined, no crash ``` > **MCQ 3** > Which ES version introduced `let`, `const`, and arrow functions? > - a) ES5 > - b) ES6 > - c) ES2017 > - d) ES2020 > > **Answer: b) ES6** --- ## JavaScript Engine (V8, SpiderMonkey) A **JavaScript engine** is a program that reads, understands, and executes JavaScript code. Without an engine, your browser would not know what to do with a `.js` file. **Popular JavaScript Engines:** | Engine | Used In | Made By | |---|---|---| | V8 | Google Chrome, Node.js | Google | | SpiderMonkey | Firefox | Mozilla | | JavaScriptCore (Nitro) | Safari | Apple | | Chakra | Old Microsoft Edge | Microsoft | **How a JS Engine works (simplified):** ``` Your Code (Source) | v [Parser] -- Reads code, checks syntax, creates AST | v [Compiler / Interpreter] -- Converts AST to bytecode or machine code | v [Execution] -- Code runs ``` **V8 specifically uses two compilers:** - **Ignition** — a fast interpreter that gets code running quickly - **TurboFan** — an optimizing compiler that takes frequently run code ("hot code") and compiles it to highly efficient machine code This is called **JIT (Just-In-Time) compilation** — a hybrid approach that is why modern JavaScript is so fast. > **MCQ 1** > Which JavaScript engine is used by Google Chrome and Node.js? > - a) SpiderMonkey > - b) Chakra > - c) V8 > - d) Nitro > > **Answer: c) V8** > **MCQ 2** > What does JIT stand for in the context of JavaScript engines? > - a) JavaScript Inline Transpiler > - b) Just-In-Time compilation > - c) Java Integration Tool > - d) Join Internal Threads > > **Answer: b) Just-In-Time compilation** --- ## Interpreted vs Compiled Languages This is a foundational concept every developer should understand. **Compiled Languages** (e.g., C, C++, Rust): - Source code is translated entirely into machine code *before* execution - A separate build step produces a binary executable - Generally faster at runtime - Errors are caught at compile time **Interpreted Languages** (e.g., older Python, older JS): - Source code is read and executed *line by line* at runtime - No separate build step - Easier to debug interactively - Historically slower (but modern engines close this gap) **Where does JavaScript fall?** Modern JavaScript is neither purely interpreted nor purely compiled. It uses **JIT (Just-In-Time) compilation**: - Code starts being interpreted immediately (fast startup) - The engine identifies "hot" code paths that run often - Those sections get compiled to machine code on the fly - This gives the best of both worlds: fast startup + fast execution ``` Traditional Compiled: Source → [Compile] → Machine Code → Run Traditional Interpreted: Source → [Run line by line] JavaScript (JIT): Source → [Parse] → [Interpret] → [Compile hot paths] → Run ``` > **MCQ 1** > Which approach does modern JavaScript use for execution? > - a) Pure interpretation > - b) Pure compilation > - c) JIT (Just-In-Time) compilation > - d) Transpilation only > > **Answer: c) JIT (Just-In-Time) compilation** --- ## Single-threaded Nature of JavaScript This is one of the most important concepts to understand about JavaScript — and one of the most misunderstood. **What does single-threaded mean?** JavaScript has **one call stack**. It can do only **one thing at a time**. There is no parallel execution of multiple pieces of JavaScript code at the same moment. ``` Call Stack (only one) ┌─────────────────┐ │ greet() │ <-- currently executing │ main() │ └─────────────────┘ ``` **Then how does JavaScript handle async tasks like timers, API calls, etc.?** Through the **Event Loop** — a mechanism that allows JavaScript to offload work to the browser's Web APIs (or Node.js APIs) and come back to handle the result when the main thread is free. ```js console.log("1 - Start"); setTimeout(() => { console.log("2 - Inside timeout"); }, 0); console.log("3 - End"); // Output: // 1 - Start // 3 - End // 2 - Inside timeout ``` Even with `0ms` delay, the `setTimeout` callback runs after the main script finishes. This is the event loop in action. **The key components:** | Component | Role | |---|---| | Call Stack | Tracks which function is currently executing | | Web APIs | Handle async tasks (setTimeout, fetch, DOM events) | | Callback Queue | Holds callbacks ready to be executed | | Event Loop | Moves callbacks from queue to stack when stack is empty | > Single-threaded does not mean slow. It means predictable. The async model built around it (Event Loop, Promises, async/await) is what makes JavaScript capable of handling thousands of concurrent operations efficiently. > **MCQ 1** > What does "single-threaded" mean in JavaScript? > - a) JavaScript can run only one file at a time > - b) JavaScript has only one call stack and executes one task at a time > - c) JavaScript cannot handle async operations > - d) JavaScript runs on a single CPU core permanently > > **Answer: b) JavaScript has only one call stack and executes one task at a time** > **MCQ 2** > What mechanism allows JavaScript to handle asynchronous tasks despite being single-threaded? > - a) Multi-threading > - b) Web Workers only > - c) The Event Loop > - d) The Garbage Collector > > **Answer: c) The Event Loop** --- ## Browser Environment When you open a website, the browser downloads the HTML, CSS, and JavaScript files. It parses them and executes the JavaScript using its built-in engine. The **browser environment** is the full set of tools and APIs JavaScript has access to inside the browser. --- ## JavaScript in Browser The browser is JavaScript's original home. When JS runs in the browser, it has access to: - The **DOM** (Document Object Model) — to read and modify HTML - The **BOM** (Browser Object Model) — to interact with the browser itself - **Web APIs** — fetch, localStorage, geolocation, WebSockets, etc. - The **global `window` object** — the root of everything in the browser ```js // Accessing the page title via DOM console.log(document.title); // Changing background color document.body.style.backgroundColor = "black"; // Showing an alert window.alert("Hello from browser JS!"); ``` > **MCQ 1** > What is the global object in a browser JavaScript environment? > - a) `global` > - b) `document` > - c) `window` > - d) `self` > > **Answer: c) `window`** --- ## Script Tag The ` ``` **Important attributes:** | Attribute | Behavior | |---|---| | None | Blocks HTML parsing while the script downloads and executes | | `defer` | Downloads in parallel, executes after HTML is fully parsed | | `async` | Downloads in parallel, executes as soon as downloaded (order not guaranteed) | ```html ``` > Always prefer `defer` for your own scripts. It ensures the DOM is ready before your script runs and does not block the page from rendering. > **MCQ 1** > Which ` ``` **External JS** — written in a separate `.js` file and linked via the `src` attribute: ```html ``` ```js // app.js document.getElementById("btn").addEventListener("click", function () { alert("Button clicked!"); }); ``` **Why prefer external JS?** | Reason | Benefit | |---|---| | Separation of concerns | HTML stays clean, JS stays organized | | Reusability | One JS file can be used across many HTML pages | | Caching | Browser caches the `.js` file — faster repeat loads | | Maintainability | Easier to find and fix bugs | > **MCQ 1** > What is a key advantage of using external JavaScript files over internal scripts? > - a) External JS runs faster at a language level > - b) The browser can cache external JS files for faster repeat visits > - c) External JS does not need a `

Overview