liminfo

JavaScript Reference

Free reference guide: JavaScript Reference

54 results

About JavaScript Reference

The JavaScript Reference is a comprehensive, searchable cheat sheet covering the JavaScript language from core syntax to modern ES2022 features. It is organized into eight categories: Basics (let/const/var, console.log, typeof, strict equality ===, template literals, optional chaining ?., and nullish coalescing ??), Types (Number, String methods, Boolean falsy values, null/undefined distinction, Symbol, and BigInt), Functions (function declarations, arrow functions, default parameters, rest parameters, destructuring params, closures, and IIFE), Arrays (creation with Array.from, push/pop/shift/unshift, map/filter/reduce, find/findIndex/includes, some/every, slice/splice, sort/reverse, flat/flatMap, spread, and destructuring), Objects (object literals with shorthand properties, Object.keys/values/entries, destructuring, spread operator, Object.assign, Object.freeze/seal, Map, and Set), Async (Promise creation, Promise.all/race, async/await, fetch API, setTimeout/setInterval), DOM (querySelector, addEventListener, classList, createElement/appendChild), and ES6+ (class, import/export, for...of/for...in, Proxy, structuredClone, and at() method).

This reference is aimed at JavaScript developers working on browser applications, Node.js backends, and full-stack projects. The eight categories reflect the most common topics JavaScript developers look up: the distinctions between var/let/const and their scoping rules, the large set of Array prototype methods, the nuances of Promise-based async code, and the DOM APIs used in browser scripting. The Basics category specifically addresses common JavaScript pitfalls such as the typeof null bug, the behavior of == versus ===, and the different semantics of falsy values.

The ES6+ category highlights features that have changed how JavaScript is written in modern codebases: ES6 classes with inheritance, native module syntax with import/export, the Proxy object for metaprogramming, structuredClone for deep copying (ES2022), and the at() method for negative index access on arrays and strings (ES2022). Together with the async patterns in the Async category, this reference gives a complete picture of the language as it is used in production today.

Key Features

  • let/const/var scoping rules with var hoisting behavior and block scope examples
  • Optional chaining ?. and nullish coalescing ?? for safe property access and default values
  • Complete Array methods: map, filter, reduce, find, findIndex, some, every, flat, flatMap
  • Object utilities: Object.keys/values/entries, destructuring with defaults, spread, and Object.freeze/seal
  • Map and Set data structures with has, size, delete, and spread conversion examples
  • Async patterns: Promise.all/race, async/await with try/catch, and fetch API with POST body
  • DOM manipulation: querySelector, classList.add/remove/toggle, createElement, addEventListener with once option
  • ES6+ features: classes with extends, ES module import/export, structuredClone, and at() method

Frequently Asked Questions

What is the difference between let, const, and var in JavaScript?

var is function-scoped and hoisted to the top of its function (initialized as undefined). let and const are block-scoped and not accessible before their declaration (temporal dead zone). const requires an initial value and cannot be reassigned, though the object or array it points to can still be mutated. Use const by default, let when you need to reassign, and avoid var in modern code.

What is optional chaining (?.) and when should I use it?

Optional chaining ?. short-circuits and returns undefined if the value before it is null or undefined, instead of throwing a TypeError. It is useful when you are accessing properties of objects that may not exist, such as API response data or deeply nested configuration objects. user?.address?.city returns undefined instead of throwing if user or address is null.

What is the difference between == and === in JavaScript?

=== is strict equality and checks both value and type without type coercion. == is loose equality and performs type coercion before comparison, leading to surprising results like 1 == "1" being true. Always prefer === to avoid unexpected behavior from implicit type conversion.

What is a closure in JavaScript?

A closure is a function that retains access to variables from its outer (enclosing) scope even after the outer function has returned. The counter example in the reference shows a typical closure: the inner inc and get functions have access to the count variable from their enclosing counter function, maintaining a private counter between calls.

What is the difference between Promise.all and Promise.race?

Promise.all takes an array of promises and resolves when all of them resolve, returning an array of results. It rejects immediately if any promise rejects. Promise.race resolves or rejects as soon as the first promise in the array settles. Use Promise.all when you need all results and Promise.race for timeout patterns or taking the fastest response.

What is the difference between null and undefined in JavaScript?

undefined is the default value for variables that have been declared but not assigned, function parameters that were not passed, and object properties that do not exist. null is an explicit value you assign to indicate "no value" or "empty". Both are falsy. typeof undefined is "undefined"; typeof null is "object" (a historical bug in the language).

How does structuredClone work and why use it instead of spread?

structuredClone (ES2022) creates a deep copy of an object, recursively copying all nested objects, arrays, Map, Set, and Date values. Spread (...) only does a shallow copy, so nested objects still share the same reference. Use structuredClone when you need to clone deeply nested data structures without shared references.

What is the Proxy object used for in JavaScript?

Proxy wraps another object and intercepts operations like property access, assignment, function calls, and more using "traps". Common uses include validation (intercept set to validate values), logging (intercept get to log access), default values (return a default if a property does not exist), and building reactive data systems (like Vue 3's reactivity system).