JavaScript Basics — Quick Guide
Author: M365 Copilot
What is JavaScript?
JavaScript (JS) is a high-level, dynamic programming language that runs in the browser and on servers (via
[Link]). It powers interactivity on the web and follows the ECMAScript standard.
● Runs in all modern browsers
● Event-driven, prototype-based, single-threaded with a concurrency model based on an event loop
● Ecosystem includes DOM APIs, [Link], npm
Variables and Types
Use let and const for block-scoped variables; avoid var in modern code. JavaScript has primitive types like
string, number, boolean, null, undefined, symbol, and bigint.
// Declarations
const pi = 3.14159; // constant
let count = 0; // mutable
let name = 'Ada'; // string
let isReady = true; // boolean
let n = null; // null
let u = undefined; // undefined
let big = 123n; // bigint
// Type checks
[Link](typeof name); // "string"
[Link](typeof big); // "bigint"
Operators and Control Flow
Prefer === and !== for strict equality. Use if/else, switch, and the ternary operator for branching; for, while, and
for...of for loops.
// Strict equality
if (value === 42) {
[Link]('The answer');
}
// Ternary
const status = isReady ? 'ready' : 'not ready';
// Loops
for (const x of [1,2,3]) {
[Link](x);
}
Functions and Arrow Functions
Functions are first-class. Arrow functions provide concise syntax and lexical this binding.
JavaScript Basics — Quick Guide Page 1
function add(a, b) { return a + b; }
const mul = (a, b) => a * b;
// Default/rest parameters
function logAll(prefix = 'val', ...args) {
[Link](v => [Link](prefix, v));
}
Objects, Arrays, and Destructuring
Objects are dynamic collections of key-value pairs; arrays are ordered lists. Destructuring and spread syntax
simplify extraction and copying.
const user = { id: 1, name: 'Ada', role: 'admin' };
const tags = ['js', 'ts', 'node'];
const { name: userName, role } = user; // destructure with rename
const [first, ...rest] = tags;
const extended = { ...user, active: true };
const merged = [...tags, 'web'];
Asynchronous JavaScript
Promises and async/await handle asynchronous operations. The event loop manages callbacks, microtasks
(promises), and macrotasks (timers).
// Promise API
fetch('/api/data')
.then(res => [Link]())
.then(data => [Link](data))
.catch(err => [Link](err));
// async/await
async function load() {
try {
const res = await fetch('/api/data');
const data = await [Link]();
[Link](data);
} catch (e) {
[Link](e);
}
}
Modules
ES Modules (ESM) use import/export syntax and are supported in modern environments. CommonJS
(require/[Link]) is prevalent in [Link] legacy code.
// [Link] (module)
export function add(a, b) { return a + b; }
export const PI = 3.14;
// [Link]
JavaScript Basics — Quick Guide Page 2
import { add, PI } from './[Link]';
[Link](add(2, 3), PI);
DOM Basics (Browser)
The Document Object Model (DOM) represents HTML as a tree. You can query, modify, and listen to events.
const btn = [Link]('#save');
[Link]('click', () => {
[Link]('#status').textContent = 'Saved!';
});
JavaScript Basics — Quick Guide Page 3
