JavaScript Basics
Build strong programming fundamentals for modern web development
Table of Contents
Introduction to JavaScript
What You Will Learn:
This tutorial explains what JavaScript is, how it works in browsers, and how to use core concepts like variables, functions, DOM manipulation, events, and asynchronous code.
JavaScript is the programming language of the web. It allows developers to make pages interactive, update content dynamically, validate forms, and connect web apps to APIs and backend services.
Interactivity
Respond to user actions like clicks, typing, and scrolling.
Logic
Write conditions, loops, and reusable functions for app behavior.
Integration
Connect frontend UI with APIs, data, and external services.
JavaScript is a high-level, interpreted programming language used to create dynamic and interactive web pages. Along with HTML and CSS, it forms the core of modern frontend development.
Your first JavaScript
// Press F12 -> Console to see this.
Program vs Script
| Program | Script |
|---|---|
| Usually compiled before running | Usually interpreted at runtime |
| Can run as a standalone application | Often runs inside another environment (browser/shell) |
| Generally bigger system-level software | Often automation or page interaction logic |
JavaScript started mainly as a scripting language in browsers, but today it is used for full applications too.
Client-side Script vs Server-side Script
- Runs in the browser
- Handles UI interactions
- Can manipulate DOM instantly
- Examples: form validation, dynamic menus
- Runs on the server
- Accesses database and secure logic
- Returns data or rendered HTML to client
- Example runtime: Node.js
What is Client?
A client is the user-side application (usually a web browser) that requests data and displays webpages. It sends requests to servers and receives responses like HTML, CSS, JavaScript, and JSON data.
What is Server?
A server is a machine or service that receives requests from clients, processes business logic, fetches data (if needed), and sends responses back to the client over HTTP/HTTPS.
Client-Server Architecture
This architecture powers most web applications: the client sends requests, the server processes them, and returns responses, often with data from a database.
JS History
- 1995: Created by Brendan Eich at Netscape in about 10 days.
- 1996: Microsoft released JScript for Internet Explorer.
- 1997: JavaScript standardized as ECMAScript (ECMA-262).
- 2009: Node.js introduced JavaScript on server-side.
- 2015+: ES6 and later versions modernized the language significantly.
JS Versions
| Version | Year | Highlights |
|---|---|---|
| ES3 | 1999 | Regular expressions, try/catch improvements |
| ES5 | 2009 | Strict mode, JSON support, array methods |
| ES6 (ES2015) | 2015 | let/const, arrow functions, classes, modules |
| ES2016+ | 2016 onward | Async/await, optional chaining, nullish coalescing, more |
JavaScript Features
JavaScript is powerful because it supports both beginner-friendly syntax and advanced programming patterns used in modern web apps.
Core Language Features
- Dynamic typing with flexible data structures
- Functions as first-class values
- Prototype-based object model
- Built-in arrays, objects, and JSON support
Modern ES6+ Features
let/const, arrow functions, template literals- Destructuring, spread/rest operators
- Promises and
async/awaitfor asynchronous code - Modules, optional chaining, and nullish coalescing
10 Interview Questions + 10 MCQs
Interview Pattern 10 Q&A== and ===?easy== allows type coercion before comparison; === checks value and type strictly.var initializes as undefined, while let/const stay in TDZ until declaration line.event.stopPropagation().call invokes with comma args, apply invokes with array args, bind returns new bound function.try...catch with await and fallback UI/logic; also handle promise .catch().10 JavaScript Interview MCQs
Which method creates a new array with elements that pass a condition?
filter() returns all matching elements as a new array.What is typeof null?
"object" for null.Which statement about const is true?
const requires initialization and cannot be reassigned.Which storage persists after browser restart?
localStorage data persists until explicitly cleared.Which method returns the first matching array element?
find() returns the first matched element, not all matches.Which promise method runs after both success or failure?
finally() executes regardless of outcome.Optional chaining ?. mainly prevents:
Which converts JSON string to object?
JSON.parse() parses valid JSON string into JavaScript value.Which keyword marks an async function?
async return promises.Best strict comparison operator for primitives?
=== checks both value and type without coercion.