JavaScript Basics Cheat Sheet

The core ideas of JavaScript Basics distilled into a single, scannable reference — perfect for review or quick lookup.

PiqCue — piqcue.com/javascript-basics/cheatsheet

Quick Reference

Variables: let and const

Variables in JavaScript are declared with 'let' (for values that will change) or 'const' (for values that will not be reassigned). The older 'var' keyword is still valid but has scoping quirks that make let/const preferable in modern code. const does not mean the value is immutable -- const objects and arrays can still have their contents modified; only the binding (the variable itself) cannot be reassigned.

Data Types

JavaScript has seven primitive types: string ('hello'), number (42, 3.14), boolean (true/false), null (intentional absence of value), undefined (declared but not assigned), BigInt (large integers), and Symbol (unique identifiers). It also has one structural type: objects, which include regular objects, arrays, and functions. JavaScript is dynamically typed -- variables can hold any type and change type during execution.

Functions and Arrow Functions

Functions are reusable blocks of code. Traditional functions are declared with the 'function' keyword. Arrow functions (=>) provide a shorter syntax and are commonly used in modern JavaScript, especially as callbacks. Arrow functions also behave differently with 'this' binding, which matters in object-oriented contexts.

DOM Manipulation

The Document Object Model (DOM) is the browser's tree-structured representation of an HTML page. JavaScript can read, modify, create, and delete DOM elements using methods like document.querySelector(), element.textContent, element.style, element.classList, and element.innerHTML. DOM manipulation is what makes web pages interactive and dynamic.

Events and Event Listeners

Events are actions that occur in the browser -- a user clicking, typing, scrolling, or submitting a form. JavaScript responds to events using addEventListener(), which attaches a callback function to a specific event on a specific element. Common events include 'click', 'submit', 'keydown', 'input', 'load', and 'scroll'.

Arrays

Arrays are ordered collections of values, created with square brackets. JavaScript arrays are dynamic (no fixed size) and can hold mixed types. Essential array methods include push() (add to end), pop() (remove from end), map() (transform each element), filter() (select elements matching a condition), and forEach() (execute a function for each element).

Objects

Objects are collections of key-value pairs (called properties) that represent structured data. Keys are strings (or Symbols); values can be any type, including other objects and functions (called methods when inside an object). Objects are the fundamental building block for structured data in JavaScript and are closely related to JSON (JavaScript Object Notation).

Promises and Async/Await

JavaScript is single-threaded but handles asynchronous operations (network requests, timers, file reading) using promises. A Promise represents a value that may not be available yet but will be resolved (success) or rejected (failure) in the future. The async/await syntax (introduced in ES2017) makes asynchronous code look and read like synchronous code, greatly improving readability.

Fetch API

The Fetch API is JavaScript's modern way to make HTTP requests to servers. It returns a Promise that resolves to the server's response. Combined with response.json() (to parse JSON data), it allows you to retrieve data from APIs and display it on web pages without reloading. It replaces the older XMLHttpRequest approach.

Template Literals

Template literals (backtick strings) allow you to embed JavaScript expressions inside strings using ${expression} syntax. They also support multi-line strings without escape characters. Template literals are the modern replacement for string concatenation with the + operator.

Key Terms at a Glance

Arrow Function:A concise function syntax using => notation. Commonly used as callbacks. Has different 'this' binding behavior compared to traditional functions.

Callback:A function passed as an argument to another function, to be executed later. Common in event listeners, array methods, and asynchronous operations.

DOM (Document Object Model):The browser's tree-structured representation of an HTML document. JavaScript interacts with the DOM to dynamically change page content, structure, and styles.

Event:An action that occurs in the browser (click, scroll, keypress, form submit) that JavaScript can detect and respond to using event listeners.

Fetch API:A modern JavaScript interface for making HTTP requests to servers. Returns a Promise that resolves to a Response object.

Promise:An object representing the eventual completion or failure of an asynchronous operation. Has three states: pending, fulfilled, and rejected.

Template Literal:A string delimited by backticks (`) that allows embedded expressions (${expression}) and multi-line strings. Introduced in ES6.

Type Coercion:JavaScript's automatic conversion of one data type to another during comparisons or operations. Can cause unexpected results, which is why === is preferred over ==.

Get study tips in your inbox

We'll send you evidence-based study strategies and new cheat sheets as they're published.

We'll notify you about updates. No spam, unsubscribe anytime.